SVG Rendering issues

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

```
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

```

### 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

```

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
```