SVG export format completely changed with Illustrator 28.4

[Andy Swift]

[update August 2, 2024]

With Illustrator 28.6, Adobe again changed the SVG format. They seem to have abandoned the use of `data-name` for complex object ID's.

Illustrator 28.4.1-28.5:

<rect id="mouse_link_n" data-name="mouse/link/n" class="cls-17"...

Illustrator 28.6:

<rect id="mouse_x2F_link_x2F_n" class="cls-17...

This is the same as the old format, before 28.4.1. However, the new stylesheet format is still used (.cls-1 etc.).

——————————

Beginning with Illustrator 28.4, the format of SVG files exported via Javascript are in a very different format.

The following examples are exported with:

options.cssProperties = SVGCSSPropertyLocation.STYLEELEMENTS;
...
doc.exportFile(fileObjSingle, ExportType.SVG, svgOptions);

The AI file looks like this:

The old format looked like this (Illustrator 28.3):

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 27.9.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
<style type="text/css">
	.st0{clip-path:url(#SVGID_00000050657835777145769900000007173324349283303303_);}
	.st1{fill:#FF000D;}
	.st2{fill:#CA00D5;}
	.st3{fill:#2AEC00;}
	.st4{fill:#F0AB00;}
</style>
<g id="layer_2__x2F__extra_content">
	<g>
		<defs>
			<rect id="SVGID_1_" x="207.75" y="328.25" width="128" height="128"/>
		</defs>
		<clipPath id="SVGID_00000120556236775382720460000010520103355737100182_">
			<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
		</clipPath>
		<g id="clipped_group" style="clip-path:url(#SVGID_00000120556236775382720460000010520103355737100182_);">
			<rect id="Rectangle_x5F_smaller" x="150" y="270.5" class="st1" width="128" height="128"/>
			<rect id="Rectangle_x5F_Grandé" x="193.5" y="367" class="st2" width="40" height="40"/>
		</g>
	</g>
</g>
<g id="layer_1_200_x25_">
	<g id="group_1__x3E__group_2">
		<rect x="37.5" y="33.5" class="st3" width="116.5" height="116.5"/>
		<rect x="106.25" y="102.25" class="st4" width="116.5" height="116.5"/>
	</g>
</g>
</svg>

The new format looks like this (Illustrator 28.4 & 28.4.1):

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 500 500">
  <defs>
    <style>
      .cls-1 {
        clip-path: url(#clippath);
      }

      .cls-2 {
        fill: none;
      }

      .cls-2, .cls-3, .cls-4, .cls-5, .cls-6 {
        stroke-width: 0px;
      }

      .cls-3 {
        fill: #f0ab00;
      }

      .cls-4 {
        fill: #ff000d;
      }

      .cls-5 {
        fill: #2aec00;
      }

      .cls-6 {
        fill: #ca00d5;
      }
    </style>
    <clipPath id="clippath">
      <rect class="cls-2" x="207.75" y="328.25" width="128" height="128"/>
    </clipPath>
  </defs>
  <g id="layer_2_extra_content" data-name="layer 2 / extra content">
    <g class="cls-1">
      <g id="clipped_group" data-name="clipped group">
        <rect id="Rectangle_smaller" class="cls-4" x="150" y="270.5" width="128" height="128"/>
        <rect id="Rectangle_grandé" class="cls-6" x="193.5" y="367" width="40" height="40"/>
      </g>
    </g>
  </g>
  <g id="layer_1_200_" data-name="layer 1 200%">
    <g id="group_1_group_2" data-name="group 1 &amp;gt; group 2">
      <rect class="cls-5" x="37.5" y="33.5" width="116.5" height="116.5"/>
      <rect class="cls-3" x="106.25" y="102.25" width="116.5" height="116.5"/>
    </g>
  </g>
</svg>

There are many many changes:

• the style definitions
• ID's now strip out characters like / or < instead of replacing them with entities
• the original names are included via data-name tags
• the comment from the 2nd line is now gone
• clipping paths are handled differently

I have built a complex program over many years that depends on the previous format, and it is now completely broken.

Does anyone know how to get back the previous SVG export format?

Does anyone know if this is a bug that will be fixed?

I have filed a bug report with Adobe.

[Doug A Roberts]

What's the definition of the svgOptions var?

Do you see the same difference if you export via the UI?

[Andy Swift]

The svg Options var contains options.cssProperties = SVGCSSPropertyLocation.STYLEELEMENTS;

If I export with the UI, I get the old format, with st0 etc. for the style elements.

I have tried the newer ExportType.WOSVG, and the output is the newer format with cls- style definitions.

Interestingly, the PREVIOUS version of Illustrator also exports the newer cls- style definitions with WOSVG.

It makes me wonder if the change is a move to harmonize the output.

[Doug A Roberts]

If I export with the UI, I get the old format, with st0 etc. for the style elements.

By @Andy Swift

With which SVG options? Using Export or Save As?

Strangely, SVGCSSPropertyLocation uses the CSS options from the UI Save As, not Export As (i.e. ENTITIES, STYLEATTRIBUTES, PRESENTATIONATTRIBUTES, STYLEELEMENTS).

Export As only has Internal CSS, Inline Style, and Presentation Attributes.

[NickyIndz97]

I don't see anything about it in their update notes, either. It has put a wrench in what I do on the daily at work.

[Doug A Roberts]

I've been informed that the Save As SVG code has been brought in line with that from Export As.

Exporting SVG via script until now used the Save As code, so this too has changed.

[Andy Swift]

If this is true and you have a contact at Adobe, can you ask them to respond to the bug report linked in the question?

This would be logical, but saving via the UI hasn't changed, and the update will obviously break anyone's workflow who depended on the previous format.

Can you be more specific?

I assume this means that there is zero chance the format will be returning to the previous standard.

[Doug A Roberts]

I will ask what I can share.

Can you post your exact export settings using Save As? In testing I've noticed you can still force the older code with some options, like using ISO 8859-1 instead of UTF-8.

[Andy Swift]

var options = new ExportOptionsSVG()

options.saveMultipleArtboards = true
options.coordinatePrecision = 3
options.cssProperties = SVGCSSPropertyLocation.STYLEELEMENTS
options.documentEncoding = SVGDocumentEncoding.UTF8
options.DTD = SVGDTDVersion.SVG1_1
options.embedRasterImages = false
options.fontSubsetting = SVGFontSubsetting.None
options.fontType = SVGFontType.SVGFONT
options.includeFileInfo = false
options.includeUnusedStyles = false
options.preserveEditability = false
options.slices = false
options.sVGTextOnPath = false

var destFile = newFile(destFolder, name)
var doc = app.activeDocument
doc.exportFile(destFile, ExportType.SVG, options)

I need to use UTF-8, unfortunately.

[Andy Swift]

I checked, and when you save from the UI (these are my settings), you get the NEW style SVG format.

BUT, if you click on the SVG Code… button, you get the OLD style SVG format.

[Doug A Roberts]

I see, that's probably something to be fixed -- from the developer's perspective at least.

[Andy Swift]

Have you been able to ask to share more information?

I am looking at a month of work to rewrite code if this change will not be reverted.

I assume that this is the case, but it would be nice to be sure.

Also, thanks — I really appreciate your responses!

[Doug A Roberts · Accepted solution]

The change will not be reverted -- I believe the SVG code from 'Save As' has been seen as legacy for some time.

[Andy Swift]

Thanks for providing a definitive answer.

[Doug A Roberts · Accepted solution]

I've been notified that Beta 28.6 54 includes the following changes to Save As SVG:

1. ID generation for node IDs have been reverted to the original logic (I believe this affects entities in IDs)
2. The 'Generator' comment has been added back in.

If you have a chance to test the Beta and share your thoughts I'm sure the team would appreciate it.

[Andy Swift]

After your comment that the change would not be reverted, I didn't come back to this page (until today).

Now I see that only two weeks later, the change was being reverted.

After your message in April, I spent a month rewriting our program to handle the "data-name" type node IDs, Adobe approved the new version of our product for the Exchange Marketplace on July 5, and the update to 28.6 breaks it.

I think that in terms of format, Adobe has made the right call.

The big lesson for me is that I have to be using the beta version consistantly.

[Andy Swift]

Beta 29.1.2 has once again changed the SVG ID logic, going back to the style that I described at the top of my original post:

<rect id="mouse_link_n" data-name="mouse/link/n" class="cls-17"...

Can you find out what is going on?

Presumably Illustrator 2025 will be released within a month, and I'd like to know how it will behave.

[Doug A Roberts]

Hi Andy,

I've been told the aim is to revert the naming schema for XML IDs and CSS class names for Save As w/o changing the schema for Export As. Presumably this means revert to pre-28.4.1 state.

If you want more definite information (such as it may be), I suggest you join the prerelease program:

https://www.adobeprerelease.com

[Andy Swift]

Thanks, I've joined.

[Doug A Roberts]

If you join the Slack I'll send you every relevant thread I can remember.

[Bobby Henderson]

I think SVG files exported using the Save As command have been altered as well.

In my workplace I have to use SVG files for cut-only operations using a Graphtec vinyl plotter/cutter. The SVG files are brought into Onyx Thrive Cut Server. Previously the SVG version 1.1 files with default settings worked properly. The same settings don't work using the latest build of Illustrator. Onyx has next to nothing in terms of documentation for proper SVG export settings, much less what kinds of details should be in the XML code. Onyx has lots of documentation and tutorials for print and cut jobs using PDF files, which makes the lack of info on SVG for cut-only work even more frustrating.

Earlier this week I had to make cut files for a window graphics design spanning a store front's windows (7 foot tall by 23 foot wide design using speciality vinyl that looks like etched glass). No combination of settings using SVG 1.1 would work. I finally found a combination of settings that would work using the SVG Tiny 1.1 format.

[Andy Swift]

When I tried saving from the UI, I got the old format. I'll check again.

[Doug A Roberts]

I meant please share your settings in the UI.

[Andy Swift]

I will, but it will be tomorrow — I'm travelling today.

[John37426380jlba]

This has also broken my workflow.

I used to be able to embed class names based on the Graphical Styles applied to the elements. Now Illustrator embeds generic cls-x formatted classes in the CSS.

Why would such a breaking change be done? Why not just include the previous options instead of making it a dumb export with practically zero customization.