SVG Export Issue

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

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

Svg don’t support angular gradiant
So what i did is to created the effects with pure css

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.

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… 🤓 🤡

Hello,
Are there any new developments and iterations regarding these SVG export bugs?
Their lack of “what you see is what you get” quality on export is becoming a tremendously time consuming effort to design and development.
The workarounds we have to do are just not efficient at this point.

There seems to always be a new unexpected bug:
A masked group that on SVG export unexpectedly shows one of the shapes visible outside of the mask;
A masked group on SVG export showcases transparency without any been given having to force a white underlayer to mitigate this event;

What is the expected roadmap for these improvements?

Hello - Is this issue ever going to be resolved? Considering Figma is used for web dev and other graphic intense activities - wouldn’t you want to fix this bug that is so fundamental to the user’s experience? Or is Figma now too bloated to actually care?

Hi,
I’m having exactly the same issue, I cannot export anything from my file. And I don’t have any strokes, since I’m trying to export image I’ve superimposed using different filter in each of them!
That’s extremely frustrating and seems to be a very old bug. Any workaround?
Thanks,
Chloé

SVG Export to Android Vector Studio is throwing errors. We think it’s due to the dimension data at the bottom of the XML file.

1. Select the artwork
2. Outline Stroke
3. Copy As SVG
4. Paste
5. Export SVG
6. Open SVG in Text Editor
7. Go to the next to the last <></> that contains W X H dimensions and delete. Save the File.
8. Go to the Android Vector Uploader and the file should load properly.

Can this be automated if not Fixed?

This is the solution i was looking for… No idea how this black-magic works, but it does! #bless

Thanks Elias

Hi,
I’m having issues exporting SVGs - the stroke is always converted to outline. I noticed it only happens if the graphic has boolean groups applied to it. Is there a way or workaround to resolve this?

Yeah I was having this issue, was exporting as PNG fine so I tried ‘copy as PNG’ then pasted as SVG. Fixed the problem 🙂

As stupid as it seems, and as much as I hate adobe, importing the svg into XD and exporting from there seems to fix the issue for me.

I am experiencing the same issue with .svg and .pdf. I am new to Figma, and am wondering if there has been a patch.

Thanks for the work around, you may have just saved my day.

Hi! I have the same problem. Did you manage to solve it?