Skip to content

Latest commit

 

History

History
77 lines (43 loc) · 3.29 KB

how-to-prepare-svg-template.md

File metadata and controls

77 lines (43 loc) · 3.29 KB

How to prepare SVG template

Using Adobe XD

If you are a user of Adobe XD, you are lucky. Prepare SVG Template by using Adobe XD is strongly recommended.

Because if you put some placeholders in the artboard like %placeholder1% or %serialPlaceholder[0]%, Adobe XD assigns ids to <text> elements in SVG like _placeholder1_ or _serialPlaceholder_0_ automatically.

From this, you can embed the exported SVG into your HTML without any modification even if you use some id-unsafe characters.

And as a result, you can replace only placeholder to actual value without replacing id 👍

Concrete procedure

Design the document.

Export it as SVG.

At this time, note that Save images option must be set as Embed and Path Options option must NOT be checked.

Then, you've got a template SVG file like this 👍

Using Figma

To be honest, Figma is not very good for this use case.

Figma doesn't automatically replace id including some unsafe characters like Adobe XD does.

So you have to replace id by hand like as following.

$ sed -E 's/id="%([^%]+)%"/id="_\1_"/' /path/to/exported-from-figma.svg \
| sed -E 's/id="_(.+)\[(.+)\]_"/id="_\1_\2_"/' > /path/to/exported-from-figma-tweaked.svg

This command converts ids to safe format.

And one more thing. With Figma, you should not use multi-byte characters as placeholder.

If you use multi-byte characters, Figma converts them into XML character reference when exporting. This is very inconvenient for replacing or specifying as id.

Concrete procedure

Design the document.

Export it as SVG. At this time, not that Content only and Include "id" Attribute options must be checked and Outline Text option must NOT be checked.

Then, you've got an SVG file like this.

After that, convert ids to safe format string by following command.

$ sed -E 's/id="%([^%]+)%"/id="_\1_"/' /path/to/exported-from-figma.svg \
| sed -E 's/id="_(.+)\[(.+)\]_"/id="_\1_\2_"/' > /path/to/exported-from-figma-tweaked.svg

Finally, you've got a template SVG file like this 👍

Using some other tools

The exported SVG has to meet the following conditions.

  • Text isn't outlined. (<path> isn't used for text but <text> is)
  • Can specify <text> elements including placeholders with CSS selector. (like #some-id)

If you use svg-paper with SVG output by other tools, please send me a PR 😇