SVG Rendering issues

[aloisdeniel]

If you have a rendering issue with an icon, please share its data content here.

Remember that the parsing pass is basic, on purpose. So make sure your vector data is really simple, composed only of filled shapes.

The only supported operations and properties are :

• circle : cx, cy, r
• ellipse : cx, cy, rx, ry
• rect : x, y, width, height
• path : d, fill-rule
• g : transform

All paths from operations are merged as a single path, filled with a unique color.

Preparing an icon in Figma

Outlining strokes

Let's take an example :

By default, Figma exports it to :

<svg width="155" height="148" viewBox="0 0 155 148" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M57.3785 ... 120.434Z" fill="black"/>
<circle cx="118.947" cy="73.5258" r="29.2399" stroke="black" stroke-width="13.6264"/>
</svg>

This won't work, since the circle is drawn with a stroke.

Right click on the circle, and choose Outline strokes from the menu.

The SVG now looks fine :

<svg width="155" height="148" viewBox="0 0 155 148" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M57.3785 .. 120.434Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M118.947 ...109.579Z" fill="black"/>
</svg>

Flattening

If you use complexe operations in your designing software (like unions/intersects), flattening the shapes may improve the final export.

For example :

The export may sometimes work, but it is generally better to have raw flatten path. To flatten your shapes, right-click on the shape, and select Flatten.

That's it ! You now have a unique path.

Optimizing data before release

If you want to optimize a bit the parsing before your production release, you can remove all the unnecessary properties.

<svg  viewBox="0 0 155 148">
<path fill-rule="evenodd"  d="M57.3785 .. 120.434Z" />
<path fill-rule="evenodd"  d="M118.947 ...109.579Z" />
</svg>

If you want an even more optimized parsing pass, you can join multiple path together, get a unique data content and use the PathIconData.fromData instead.

M57.3785 .. 120.434Z M118.947 ...109.579Z

[SergioEric]

Thanks, this was very useful, Will be better to put this in readme!

[aloisdeniel]

Added a warning with a link to it !