Opening SVG exported by Adobe Illustrator 2020

Following up on a discussion in the inbox about directly opening Adobe Illustrator files (and a separate issue report on the subject), I wanted to survey the current state of opening SVG that is exported by Adobe Illustrator.

Summary

Based on the findings in #175 (comment 276912709)] and below, the following changes would need to be implemented in the aisvg extension:

  • Layer import
    • Any group element that contains a non-empty data-name attribute should be treated as a layer in Inkscape.
    • An import/conversion extension could manage this by checking all groups to see if they have that attribute.
    • For every group that has a non-empty data-name attribute $A, we would add the following two attributes: inkscape:label="$A" and inkscape:groupmode="layer".
  • DPI conversion from 72 dpi to 96 dpi for correct size of the imported document
  • Correct treatment of hidden objects in all cases
  • Write documentation with recommended export procedure* from Illustrator.
Aside 1: Illustrator versions

Adobe Illustrator 2020 is the current version. AI has been a SAAS product since 2013. Since it does not run except with a current subscription, it is reasonable to presume that the vast majority of its current user base is on the latest (or nearly the latest) version.

I am not certain that there is much use in calling out a specific version number or set of version numbers for which version of AI is supported. AI version names change (generally speaking) more frequently than Inkscape releases.

Aside 2: SVG versions

Adobe Illustrator presents many number of different options about how to export files as SVG. I am documenting several sets of export options, but it is a subset of the available options. In addition to all of these, there is a separate process for saving (not exporting) SVG that has very similar options.

Test file

The test file is the same as used in the issue report about directly opening AI files.

The file was created in AI and contains several simple elements (a very small subset of potential AI or SVG elements) that should serve as good reference points for how well importing currently works:

  • It has a document size, which is 8.5 x 11 inches.
  • It contains some text laid out in Goudy Bookletter 1911, a font available under the SIL Open Font License (a FOSS-friendly license so that anyone testing the import can install it font on their computer.)
  • It contains both plain and flowed text.
  • It contains text converted to outlines.
  • It contains three squares, each 1 inch (2.54 cm) on a side, with a fill, stroke, and fill plus stroke.
  • It contains text placed in multiple layers and a sublayer
  • It contains a layer that is hidden.

Screen_Shot_2020-01-24_at_5.16.07_PM

The screenshot above shows how the document appears in AI. Most of the text and graphical elements are in the layer called Layer 1. There is additional text in Layer 2, and in Layer 2A, which is a sublayer of Layer 2. There is also text in Layer 4 which is hidden and not visible in the document screenshot.

layers

The original file is attached here for download.

About Exporting as SVG from Adobe Illustrator

I exported the file from AI using the File > Export > Export As... menu command, and then selected SVG from the drop-down menu. There are four drop down menus (representing 54 options) plus an option to edit the precision, plus "minify" and "responsive", that I will not be testing here.

Note that this exporting is a separate process from saving as SVG, which has its own set of (very similar) options, plus options for different SVG standards (1.0,1.1,...).

export_options

The export options are for:

  • Styling:
    • Internal CSS
    • Inline Style
    • Presentation Attributes
  • Font:
    • Convert to Outlines
    • SVG
  • Images:
    • Preserve
    • Embed
    • Link
  • Object IDs:
    • Layer Names
    • Minimal
    • Unique

Our test file does not have images, so I will not be testing the Images options.

Exporting 1: All styling options, Convert to Outlines, Layer Names

The following options are selected:

For each of these three options -- with output SVG linked above -- the results were essentially identical:

testdoc_internal_outline_names

  • ✅ File size is about 433 kB, from a 1.2 MB Illustrator document.
  • ✅ The correct font is displayed
  • ✅ The fill and stroke look correct
  • ✅ The text comes in as path objects (not text), as expected.
  • ✅ The text from the hidden layer is not visible.
  • 🔴 The Layers panel in Inkscape does not have any layers listed.
  • 🔴 The squares are not sized correctly
  • 🔴 Document size is incorrect. It displays as a square.

Exporting 2: Internal CSS styling, SVG Font, Layer Names

The following options are selected:

  • Styling: Internal CSS
  • Font: SVG
  • Object IDs: Layer Names

For this set of options, the generated SVG appears as follows in Inkscape:

testdoc_Internal_svg_names.svg

  • ✅ File size is tiny at 28 kB, from a 1.2 MB Illustrator document.
  • ✅ The correct font is displayed
  • ✅ The fill and stroke look correct
  • ✅ The text comes in as editable text, and is editable.
  • ✅ The text from the hidden layer is not visible.
  • 🔴 Flowed text is not flowing automatically between in Inkscape.
  • 🔴 The Layers panel in Inkscape does not have any layers listed.
  • 🔴 The squares are not sized correctly
  • 🔴 Document size is incorrect. It displays as a square.

Other than the size and layers issues, this is quite good.

The layers (and sublayer) are present in the SVG document are labeled like <g id="Layer_2" data-name="Layer 2">. It should be possible to parse those into Inkscape while importing.

The scaling (DPI) issue should also be possible to address.

The hidden layer, Layer 4, is not present in the exported SVG document. (That's on Illustrator, not us.)

The document size (8.5 x 11 inches), is not present in the exported SVG document. (That's on Illustrator, not us.)

Exporting 3: Inline/Presentation CSS styling, SVG Font, Layer Names

The following options are selected:

For these two options -- with output SVG linked above -- the results were essentially identical:

inline_svg_names

  • ✅ File size is tiny at 28 kB, from a 1.2 MB Illustrator document.
  • ✅ The fill and stroke look correct
  • 🔴 No text is displayed
  • 🔴 The Layers panel in Inkscape does not have any layers listed.
  • 🔴 The squares are not sized correctly
  • 🔴 Document size is incorrect. It displays as a square.

Exporting 4: Inline/Presentation CSS styling, SVG Font, Unique IDs

The following options are selected:

These two options -- with output SVG linked above -- gave the same results as part 3 above, with no text visible.

Exporting 5: Inline/Presentation CSS styling, SVG Font, Minimal IDs

The following options are selected:

These two options -- with output SVG linked above -- gave the same results as parts 3 and 4 above, with no text visible.

Exporting 6: Internal styling, Convert to Outlines, Minimal/Unique

The following options are selected:

  • Styling: Internal CSS
  • Font: Convert to Outlines
  • Object IDs:

Results are very similar to part 1 above ( Internal CSS styling, SVG Font, Layer Names )

Exporting 7: Internal styling, SVG font, Minimal/Unique

The following options are selected:

Results are very similar to part 2 above (Internal CSS styling, SVG Font, Layer Names)

Edited by Windell Oskay