Fully support the SVG standard
Illustrator can not read every SVG file. Some it doesn't read at all, some are imported only halfway or just completely messed up. There are issues with <use>, especially when used in herarchies. e.g. this file: https://de.wikipedia.org/wiki/Europaflagge#/media/File:Flag_of_Europe.svg There are issues with groups and masks and there are issues when units are missing e.g. from stroke widths. Also: SVG can have several attributes which Illustrator will delete when opening. Fully supporting the standard will enable people to have a workflow based on SVG files.
Just a general status update. We are currently and will continuously improve SVG import support in Adobe Illustrator. We are currently working on solving the issues mentioned in this report. Please feel free to open new bug reports here on uservoice if you are experiencing additional/untracked issues.
Martin Schoch commented
regarding SVG I encountered the following issue in Adobe Illustrator: When defining a pen with a “stroke-width” in the “style” section of the SVG transformation are not applied to “stroke width”.
Definition of Pen:
<g transform="matrix(3.12112 0 0 3.12884 165.161 945.581)">
<path d="M512.705,258.049 A184.000,241.500 0.000 1,0 512.724,740.951" fill-rule="nonzero" class="Pen0"/>
<polyline points="502,258 998,258" class="Pen0"/>
This issue does not occur in other SVG viewers or Web browsers. There the stroke-width is transformed / scaled correctly.
Don’t hesitate to contact me if you require test files to reproduce the issue.
Thanks a lot for your feedback Ruth! It would be great to hear more about the stroke-width issue that you run into. I tested this minimal example:
<rect x="10" y="10" width="100" height="100" style="stroke:black;fill:none;"/>
<rect x="120" y="10" width="100" height="100" style="stroke:black;fill:none;stroke-width:1"/>
<rect x="230" y="10" width="100" height="100" style="stroke:black;fill:none;stroke-width:1px"/>
<rect x="120" y="120" width="100" height="100" style="stroke:black;fill:none;stroke-width:10"/>
<rect x="230" y="120" width="100" height="100" style="stroke:black;fill:none;stroke-width:10px"/>
but all stroke-width values compute correctly after opening in Adobe Illustrator. Could you please post a short example here? Or, for bigger files, it is also possible to use firstname.lastname@example.org
Thanks a lot in advance!
Ruth Ivimey-Cook commented
For me, the stroke-width issue has caused much wasted time. The svg file has a sequence of <g> elements, none nested, and no complex transforms, but nevertheless lines are imported massively over-wide. I know PostScript can do all these transforms and more; why is it so hard for Illustrator to support import.
Re Dirk: for me, the requirement is just that the graphic imports with properties correct and, if there are aspects of the import that cannot be imported properly I am informed in a useful way. Eg:
File X.svg has been imported with the following issues:
* Repolarising the crystals is not supported, line 203
* Transparency cannot be combined in groups, line 554
* Comments in the source have been ignored, first-line 2
Dirk Schulze commented
Hi Monika. I can confirm the issues with nested <use>s. Illustrator (unnecessarily) creates too deeply nested groups. Eventually, it will reach the maximum allowed group nesting level and stops drawing. I logged that issue.
Illustrator does not use SVG as its native document format. Even though Illustrator does try to preserve certain attributes on SVG import it is not enough for a full SVG round tripping experience. Do you want to use Illustrator as "SVG editor" where structure, styling blocks and class names get preserved as much as possible, or is it enough to preserve attributes, styles and interactions on the element level? So CSS classes might get remixed as it makes sense for the exported SVG document.
What issues do you have with groups and masks?
Hi Alec, self referencing masks should not crash Illustrator in the latest release anymore. Nested masks, fill-rule are still an issue and I logged those. Could you share some failing examples with gradients, image transforms and patterns please? Please feel free to create separate user voice reports per SVG issue and file them as bugs. Thanks a lot!
Alec Miller commented
Please import fill-rule="evenodd" properly. Test case of an "O" that imports incorrectly (as fill-rule="nonzero") without the hole in the middle. Illustrator gets this wrong, but XD imports it properly. Some additional issues:
1. Ref-ing the same mask crashes Illustrator.
2. Nested masks don't import properly.
3. Gradient and image transforms and patterns (fit/fill/tile) don't import
<svg width="90" height="90" viewBox="0 0 90 90" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<use xlink:href="#path1_fill" fill="#C4C4C4"/>
<path id="path1_fill" fill-rule="evenodd" d="M 67.0157 46.007C 68.8447 34.502 61.8237 24 48.1947 24C 33.9167 24 25.0667 34.03 23.2967 44.945C 21.4677 56.45 28.1347 66.952 42.1767 66.952C 56.6317 66.952 65.3047 56.922 67.0157 46.007ZM 47.6047 32.201C 38.8727 32.201 33.3857 38.16 32.1467 45.712C 31.0847 52.497 34.2707 58.751 42.6487 58.751C 51.4397 58.751 56.9267 52.792 58.1067 45.24C 59.1687 38.455 55.9827 32.201 47.6047 32.201Z"/>