• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
1

SVG export format completely changed with Illustrator 28.4

Participant ,
Apr 04, 2024 Apr 04, 2024

Copy link to clipboard

Copied

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:

 

AI file.jpg

 

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.

TOPICS
Bug , Import and export , Scripting

Views

990

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Apr 15, 2024 Apr 15, 2024

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

Votes

Translate

Translate
Adobe
Community Expert ,
Apr 04, 2024 Apr 04, 2024

Copy link to clipboard

Copied

What's the definition of the svgOptions var?

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Apr 04, 2024 Apr 04, 2024

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 04, 2024 Apr 04, 2024

Copy link to clipboard

Copied

quote

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Apr 10, 2024 Apr 10, 2024

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 10, 2024 Apr 10, 2024

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Apr 10, 2024 Apr 10, 2024

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 10, 2024 Apr 10, 2024

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Apr 10, 2024 Apr 10, 2024

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Apr 12, 2024 Apr 12, 2024

Copy link to clipboard

Copied

capture 8.jpg

 

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 12, 2024 Apr 12, 2024

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Apr 15, 2024 Apr 15, 2024

Copy link to clipboard

Copied

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!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 15, 2024 Apr 15, 2024

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Apr 15, 2024 Apr 15, 2024

Copy link to clipboard

Copied

Thanks for providing a definitive answer.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 02, 2024 May 02, 2024

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 10, 2024 Apr 10, 2024

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Apr 10, 2024 Apr 10, 2024

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 11, 2024 Apr 11, 2024

Copy link to clipboard

Copied

I meant please share your settings in the UI.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Apr 11, 2024 Apr 11, 2024

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 15, 2024 May 15, 2024

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 16, 2024 May 16, 2024

Copy link to clipboard

Copied

quote

This has also broken my workflow.

I used to be able to embed class names based on the Graphical Styles applied to the elements


By @John37426380jlba

 

Can you share your Save As options? I get class names from graphic styles when using the 'Style Elements' option in 28.4.1:

DougARoberts_0-1715845161380.png

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
May 15, 2024 May 15, 2024

Copy link to clipboard

Copied

This is also presenting a huge issue for me. It is no longer correctly preserving the svg format needed for our application. I've reverted back to a previous version but will definitely need a different longer term solution. 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 15, 2024 May 15, 2024

Copy link to clipboard

Copied

Adobe's stance on this issue is troubling. It's not like the change makes things better (for users, at least). Having more control over the SVG output is a good thing instead of forcing us into a simplified or "dumbed down" export format.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 16, 2024 May 16, 2024

Copy link to clipboard

Copied

quote

This is also presenting a huge issue for me. It is no longer correctly preserving the svg format needed for our application. I've reverted back to a previous version but will definitely need a different longer term solution. 


By @elizabethm79439738

 

Can you, and anyone else having trouble with the recent changes, please post an example SVG with a description of the undesirable change, along with the exact Save As options you used?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
May 16, 2024 May 16, 2024

Copy link to clipboard

Copied

My issue is that it is not preserving the correct size however I downloaded the beta illustrator  28.6 and it resolved the issue - when I used save as in beta it correctly preserved the size of the objects. 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines