Sizes and coordinates get distorted in SVG export
Adobe Illustrator CC on Mac OS
I composed a graphic in Illustrator to use as a SVG Sprite in CSS. To make sure all my sprites render sharply I aligned my vectors to full pixel coordinates and sizes. Unfortunately those same coordinates end up on some slightly odd positions in the source of the exported SVG.
I used the "Export as..." function with Decimals set to 2.
I am closing the ticket due to lack of response.
Please get in touch with us at sharewithai@adobe.com or any of the other support channels – helpx.adobe.com/support.html . Please give a reference to this post so that we can identify you.
Thanks
Anish Kumar
Illustrator Team
-
Khoa, which method to export the SVG do you use? How many Decimals do you set when exporting? The default 2 can just be way too small for the precision you need. Please try to set it something larger, like 6, and compare results.
-
Khoa Hoang commented
When I create an icon in illustrator and then export it as an SVG, the SVG loses its shape and form. See screenshot below.
-
Dirk Schulze
commented
This should be fixed in later versions of Adobe Illustrator. For others: if you do see such issues, experiment with the "Decimal" option by increasing the number.
-
Dave Lawrence
commented
Hi Tom, I recommend using Affinity Designer. I'm a font designer. i can move hundreds of letters from my font editor, FontLab, and then I put it in Affinity to generate hundreds of slices. You can then export SVG, PNG, JPG, whatever. So you could make hundreds of assets, maybe even thousands of sellable assets in five or so minutes.
So it's a possible easy workflow to import your stuff from Illustrator into Affinity Designer, and export that.
-
Tom M
commented
This is currently a huge problem for me with using the "Asset Export" panel. I have a document with all our company icons on it in one place, this enables me to work with them very simply in on project, and when I create new ones I can check they visually are consistent with the other icons.
I've always used the Asset Export panel to export all the icons individually as SVG files, but now however I'm having issues that weren't there before. It's as though the decimal place is set to a high setting (this setting isn't available using the Asset Export panel) and therefore the SVG exports are inaccurate and can't be used.
I literally can't export our company icons any more, I can't use the File > Export > SVG menu because this export the whole document and not individual icons. Absolute shambles.
-
Dave Lawrence
commented
TG, right on. I was just telling my wife the other day, "You can't expect to keep sucking money out of people's bank accounts and expect them not to resent it." Especially when stuff like this doesn't get fixed.
I was fortunate enough to be on a FontLab closed beta, and they could fix something like this within a week. And sometimes within days.
Admittedly, I haven't tried it in the AI 2023 version. But I'm sort of tired of checking Adobe's products for them when they don't even fix bugs in a timely manner.
My workflow for making vector assets has become FontLab→Affinity. Or sometimes Affinity→ FontLab→ Affinity.
It's no secret that I'm a big supporter of FontLab, having volunteered some video tutorials for them. Their node tools are many times more advanced than either Illustrator or Affinity: like tunni lines for adjusting all curve tension (like changing the corners of all icons), curvature combs like those used in CAD, nodes that automatically adjust to remain smooth, delta filter for adjust parts of a shape without distortion, good selective transforms... And you can even make like a logo for small sizes and a logo for large sizes, then mix the two to get something in between or even extrapolated.
Also, now that Affinity exports DWG/DXF there's really no reason to export with Illustrator.
-
TG
commented
THANK YOU for posting this. I thought I was the only one noticing this; it seems to have only started happening with more recent versions of AI, and why it's suddenly happening AND why Adobe hasn't addressed this in all this time are both mysteries to me. It's pure aggravation.
Example: I can create a perfect 10x10 grid of squares, with the edge points perfectly overlapping one another, save it as an SVG, then RE-open it in AI or elsewhere and discover that the squares have shifted up/down/left/right, such that they're no longer aligned as they were originally placed. Also note in my screenshots that the actual dimensions of the object have changed as a result.
This is driving me to Affinity Designer. I use my designs for use on a vinyl cutter and in Blender, and I need precision that Adobe's SVG export is no longer providing. Can someone please fix this?
-
Amin
commented
for me this issue comes with type export. i solved it by creating outlines for the types in the document and this solved the export issue.
-
Dave Lawrence
commented
I hate export.
One problem, we in font design call the problems "kinks". Handles from nodes are flying all over the place, pinching the outline sharply, where it should be smooth.
Ridiculous.
THE DECIMAL SETTINGS ARE BROKEN. CHECK IT OUT.
Save as works ok, with the same decimal settings.
I always have to do a "save a"s instead, but if you have multiple artboard, the svg is cluttered with all these empty layers.
How can this not be fixed by now?
-
Joachim Tillessen commented
Sorry, for not getting back to this issue earlier. I can't remember how I solved the problem back then. I looked into it right now and can't reproduce the issue.
-
Nicole
commented
I'm having a similar issue: When using "export as" I see anchor points move, so shapes become misaligned.
However, when I use "save as a copy" I don't see this issue. -
MJL in Australia
commented
I'd also like to find out why I cannot select above 5 for the 'Decimal' setting. Choosing 6 or 7 returns an error and the setting reverts to 5.
-
Erik Demaine
commented
http://erikdemaine.org/outgoing/bug-small.svg is a very simple SVG drawing (rendered by MathJax) of a <path> representing the letter k (italic). It loads and renders fine in AI 24.2.3 on WIndows 10. But when I save it, I get http://erikdemaine.org/outgoing/bug-small-save.svg which also has a <path> but a very different-looking one (unrecognizable). Presumably a bug in the SVG export engine?
-
Erik Demaine
commented
Attached is a very simple SVG drawing (rendered by MathJax) of a path representing the letter k (in math mode). It loads and renders fine in AI 24.2.3 on WIndows 10. But when I save it, I get the second attached file, which also has a path but a very different-looking one (unrecognizable). Presumably a bug in the SVG export engine?
-
Erik Demaine
commented
Attached is a very simple SVG drawing (rendered by MathJax) of a path representing the letter k (in math mode). It loads and renders fine in AI 24.2.3 on WIndows 10. But when I save it, I get the second attached file, which also has a path but a very different-looking one (unrecognizable). Presumably a bug in the SVG export engine?
-
Erik Demaine
commented
Attached is a very simple SVG drawing (rendered by MathJax) of a path representing the letter k (in math mode). It loads and renders fine in AI 24.2.3 on WIndows 10. But when I save it, I get the second attached file, which also has a path but a very different-looking one (unrecognizable). Presumably a bug in the SVG export engine?
-
jv
commented
IT SO ******* PAINFUL!!!!
-
Susann
commented
In 23.0.2 and 23.0.3 when saving or exporting SVG the file is totally deformed afterwards...
-
Susann
commented
In 23.0.2 and 23.0.3 when saving or exporting SVG the file is totally deformed afterwards...
-
Anonymous
commented
Here is other topic of the same issue, I previously made:
https://community.adobe.com/t5/illustrator/please-fix-export-svg-adobe-illustrator-ai-ruins-vector-graphics/m-p/10745011#M154871