-
Notifications
You must be signed in to change notification settings - Fork 3
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
SVG Rendering issues #1
Labels
question
Further information is requested
Comments
Thanks, this was very useful, Will be better to put this in readme! |
Added a warning with a link to it ! |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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 :
cx
,cy
,r
cx
,cy
,rx
,ry
x
,y
,width
,height
d
,fill-rule
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 :
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 :
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.
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.The text was updated successfully, but these errors were encountered: