Exporting SVG should not require destructive edits to the vector shape. @anon21722796 where are you on this? Let’s maybe not take over a year to fix this time-consuming bug.
1 Like
Same issue - I have a simple thumb tack, the pin section needs the stroke on the inside to get the point, nothing else works, but then the output in svg is a pin about 25% the length.
See attached, the background is figma, and the foreground is the svg preview tool on my machine showing the svg exported:
I just had same issue but it wasn’t related to the shapes but text areas. And it was a random issue, other file with the same components exported fine and other ones didn’t. I had to break the components and check all elements one by one. Pretty annoying…
I’m having same issue as well, exporting a file certain icons do not export at all while others from an original file are fine. It’s extremely frustrating, I have even tried to use different icons and none are able to transfer.
Hi there, I’m also having an issue while exporting SVGs to Android studio. The error I’m getting is with images, android studio can’t support the way figma deals with images using pattern. Wondering if there is a work around this?
Met unsupported element: pattern.
1 Like
In my case this was because when copy pasting assets through figma a width turned to 0px. but still would look fine. and export would work fine for user without editing rights. But for me with editing rights, exporting the assets as an svg would look broken because of that 0px width “bug”… as soon as I put that manually back to 2px (which was what the original asset had) the asset not only looked fine but also exported fine again.
When export a frame as a svg file some effects are not recognized like Background blur and the file sizes dimension are totally incorrect by settings i made. Besides, the preview in exported svg files in MacOS Monterrey shows some lack of colors in layers or simply their are not there.
I supposed to export a iphone 13 frame file and i got a ugly web page size. 
Hey there, I’m going through a headache around exporting SVGs from Figma 
The width and height properties are exported and when used in my ReactJS/NextJS projects it doesn’t scale to the container. I always need to remove the width and height props from the exported SVG file to make it work. For dozens of assets used on the web app that becomes a chore.
Is there any plan to improve exporting to SVG?
And one addition: sometimes assets that are 24x24 are exported as 24x25
Was having the same issue. What worked for me was to not have any Stroke as part of the export, only the Fill. Hopefully that helps someone!
We’re experimenting the same issue with svgs to Xcode format. The gradients are exported in a not usual way, making them showed as circles instead of gradients.
Please fix it!
same issue , Angular gradients exported as radial gradients .
please fix it
3 Likes
I am having an issue on a very simple shape:
Exported svg:
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
<path d="M2.84667 5.6548L1.29688 4.1032V1L4.39647 4.1032" stroke="black" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9.3541 4.41461L8.4253 3.48221C7.3561 4.55321 6.3949 4.24361 5.3257 3.17261L1.9165 6.5872C2.9857 7.6564 3.2953 8.6194 2.2261 9.6904L3.1567 10.621" stroke="black" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9.35413 4.41455L18.0319 14.3037L13.3429 18.9999L3.15674 10.6209" stroke="black" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
The export is missing a “Z” character at the end of the last path to make it loop and look as intended.
Any fix? This bug is so frustrating!!
hi Marwen, have you found a solution on this issue? ive been facing it as well. angulars exported to radials
2 Likes
Svg don’t support angular gradiant
So what i did is to created the effects with pure css
1 Like
This is a positioning issue — not sure if it is a bug, try rounding up the numbers in the Xs and Ys of the icon;
e.g. if its X: 125.05 make sure you round it up and get rid of the decimals so change it to X: 125px that would do the trick 
This is a positioning issue — not sure if it is a bug, try rounding up the numbers in the Xs and Ys of the icon;
e.g. if its X: 125.05 make sure you round it up and get rid of the decimals so change it to X: 125px that would do the trick
Same issue here. All the svg exported from design team can’t be loaded in flutter with the error of pattern.
1 Like
I also had issues with the export. some lines where exportet to svg as strokes and i could edit strokewidth afterwards,… but some strokes were exportet as outlines and were only editable with fill. and so i was not able to edit strokewidth afterwards in the css.
for me it worked after i changed all settings for the joints to “miter” in the advanced stroke settings in figma then exportet and everything worked as i wanted it to… 
