SVG controls

The SVG image field lets you work with inline SVG graphics, the <svg> elements written directly in your HTML. You can preview the artwork, replace it with an SVG that is already used in your project, or paste new SVG code. The rest of the page stays as it is.

SVG controls are new in Pinegrow 10 and are available in Pinegrow Desktop and Pinegrow Online.

Where to find the SVG image field

• Element Properties: select an <svg> element on the page or in the Tree. The <SVG> section shows the SVG image field. Select the <svg> element itself, not a shape inside it.
• Content Workspace: inline SVGs are listed with the other content of the page. An SVG on its own becomes an SVG image field. An icon inside a link or a button that also contains text becomes an Icon field.

The field has these parts:

• Preview of the artwork. Click it to choose another SVG.
• Browse opens the SVG browser.
• SVG code shows the complete source of the SVG.
• Original colors and Dark background change how the preview is shown.

Preview the artwork

The preview shows the SVG with the colors it gets on the page. An icon that uses currentColor is shown in its page text color, for example.

Two buttons change the preview only. They never change the SVG or the page:

• Original colors switches to Neutral preview, which shows all shapes in gray. Use it to check the outline of an icon. Click Neutral preview to switch back.
• Dark background puts the preview on a dark backdrop, so light or white artwork is visible. Click Light background to switch back.

The preview is a safe copy of the SVG. Filter, marker and mask effects are left out of the preview, and a note below the preview says so. They are still in the SVG on the page.

Replace an SVG with one from your project

1. Select the SVG and click Browse, or click the preview. The SVG browser opens.
2. Choose where to look:
   • This page lists the SVGs on the current page. The first one, Current SVG, is the one you are replacing.
   • SVG files lists the .svg files in your project.
   • Project inline lists the inline SVGs in the project's editable pages. The same SVG used on several pages is listed once.
3. Click an SVG to use it.

The SVG files and Project inline tabs need an open project. Without one, they show No project is open.

Find an SVG

Type in Search SVG assets to filter the list. Search matches the SVG's name, its file name and the pages where it is used. Pinegrow names an inline SVG after its <title>, then its aria-label, then its id. Unnamed SVGs are listed as Inline SVG 1, Inline SVG 2 and so on. Add a <title> to the SVGs you reuse, so you can find them by name.

The browser shows 80 SVGs at a time. Click Show more to see the next ones.

Pinegrow scans the project's pages the first time you open Project inline and keeps the list. When project files change, the list is refreshed the next time you open the tab. Click Rescan project to rebuild it at any time.

What happens when you choose an SVG

• The SVG code is copied into the page. When you choose an SVG file, the page gets its code as an inline SVG, not a link to the file.
• IDs inside the chosen SVG, such as gradient and clip path IDs, get a unique prefix, so they can't clash with other SVGs on the page.
• The element keeps its own id. In Content Workspace it also keeps its class, style, size and other layout attributes.
• In Element Properties, the element keeps its id, role, aria-* and data-* attributes, and its width and height when the new SVG has none. Its class and style attributes are not kept.

If the old SVG had an aria-label, check that it still describes the new artwork. You can change it in Element Properties.

Go back to a replaced SVG

Pinegrow remembers the SVGs you replace in the project's pages. They are listed in the browser as Remembered — followed by their name, on the This page and Project inline tabs. Click one to put it back. The list is kept until you close the project.

You can also undo the change with Undo in the toolbar or Cmd/Ctrl+Z.

View or paste SVG code

1. Click SVG code. The complete source of the SVG is shown below the field, and the button changes to Done.
2. Edit the code, or select all of it and paste new code. The code must be one complete <svg> element, for example an icon copied from a design tool or an icon library.
3. The preview updates as you type or paste. The page changes only when you apply the code.
4. Click Done to apply the code.

In Element Properties, pasted code replaces the whole element, including its id and class. Add them to the code if you need them. In Content Workspace, the element keeps its class, style, size and layout attributes.

Save the page to keep the change.

What Pinegrow accepts

SVG fields accept passive SVG graphics: shapes, paths, text, gradients, patterns, clip paths, masks, filters, symbols, <use> and <style>. Pinegrow checks every SVG before it applies it. If the SVG is not accepted, Pinegrow shows the reason below the field and the SVG on the page stays unchanged.

These are rejected:

• Scripts and other active or unsupported elements, including <script>, <foreignObject>, embedded <image>, links and animations: The SVG contains an unsupported or active element.
• Event handler attributes such as onclick or onload: Event handler attributes are not supported in SVG fields.
• javascript: URLs: Script URLs are not supported in SVG fields.
• References to anything outside the SVG, such as an href or url() that points to another file or website: SVG links and references must point to an ID inside the same SVG.
• Code that is not a single SVG: The SVG is not valid XML. or The value must contain exactly one SVG root element.
• Very large or complex SVGs, over 512 KB or with too many elements or effects: The SVG is too large for this field. or a similar message.

To fix a rejected SVG, remove the part named in the message and paste the code again. Most icon libraries and design tools can export plain SVG without scripts or external links.

SVGs that are not accepted are not listed in the SVG browser. The status line at the top of the browser says how many SVGs could not be loaded.

Related

• Content Workspace
• Using SVG images in Pinegrow
• History – Undo and Redo