SVG export from Adobe Illustrator generates strange code

49 Views Asked by At

In an application that my company is developing, there is a need for symbols generated from Adobe Illustrator to be added as SVG-files. It has been a long development and we already have a library of SVG-files of symbols needed. But now we need a few adjustments on existing symbols, and as I haven't been responsible for creating the old symbols, tried my luck with Adobe Illustrator to export them. But now when I am exporting to SVG, a year later, the code looks different than from before. And the person who made the old ones, a year ago, has left the company...

The only thing we know is that the person used Adobe Illustrator, unknown variant, to make them. So here is the issue. This is two SVG´s from the same symbol, created in Adobe Illustrator, created using the same export settings (hopefully), probably with different Adobe Illustrator version, but the code looks different. Now you may ask, what is the problem? Well, according to the coders of the application, it matters if the file has relative or absolute coordinates, and the old SVG has relative coordinates but the new has absolute coordinates...

Old SVG file:

Old SVG

New SVG file:
New SVG

As you can see, there are several differences within the files. <Style> is different, the old has clean labels of class but the new has some crazy labeling. And the <Path class> is different also with both capital and lower case letters in the code. And here is the settings in Adobe Illustrator that we use:

AI settings

You can probably spot more differences of course, but my question is: How can I generate a SVG file with the clean code from the old SVG I have shown here? What am I doing wrong? And do you need more information?

Thanx in advance Ulf

I have tried to export the symbols via Adobe Illustrator 28.3, Affinity Design 2.4, Inkcsape 1.3.2. All of the programs generate completely different code.

1

There are 1 best solutions below

3
Danny '365CSI' Engelman On

Looks like the old SVG was post-processed to make everything a path

Tell tale sign is the rect

where all settings ended up in the (clear to read) d-path

https://jakearchibald.github.io/svgomg/ can do that conversion