Set class info for SVG
You can set the name of a path that becomes an id in the svg export.
If you are programming in javascript to animate items in the svg, you need the id, but also classes. This would mean we could manipulate many different objects in one command.
What we need is to set a list of classes (in the Properties window, probably). So if you set the list to orangeStyle, dark, tobeResized (probably with a + sign to add another class) and the svg output will have class="orangeStyle, dark, tobeResized" inside.
Francis
shared this idea
-
Brennan Young
commented
Hi Dirk,
As long as the renaming on export is consistent, and predictable, so that when you roundtrip, it doesn't re-encode its own output from the previous export, and so that we have a fighting chance of constructing an id or class identifier algorithmically, then the renaming on export is ok.
I do wonder why 'special' characters are converted to numerical entities. If the exported SVG is tagged as having a utf-8 charset (which it is, if you use Save As... SVG), the only truly forbidden characters are <, >, &, ' and ". All other characters might well be represented in their literal form. No? Some fine-grained control over this behavior would be welcome.
-
Dirk Schulze
commented
Hi Brennan,
With renaming you refer to class names when importing the SVG file back? (The round-tripping experience.) Or is there an issue even with saving the Graphic Styles and naming conventions?
Greetings,
Dirk -
Brennan Young
commented
Hi Dirk,
Yes, I've tried using Graphic Styles and yes, they get exported, and yes this is a good start. But the renaming is infuriating.
But we will certainly want to use the same class name on things with *different* graphic styles - or different kinds of drawing object (e.g. text). -
Dirk Schulze
commented
Hi Brennan,
Are you familiar with Graphic Styles in Illustrator? If you have a couple of shapes with the same styling, you can create a common "Graphic Style" for the shapes and reuse this styling pattern. This can be done in the "Graphic Style" panel (Window > Graphic Style).
Then try File > Save as and chose SVG (this may not work with one of the export options yet so try Save as for now). The common graphic styles should be exported as classes if you select "Style Element" as "CSS Properties" setting in the Advanced tab for SVG options.I am curious if that is one of the requests you were looking for.
Thanks in advance,
Dirk -
Brennan Young
commented
So compellingly useful, it's astounding that this is not implemented yet.
Also: when importing SVG, Illustrator should not rename the class and id attributes because there might be scripts that depend on those specific names. Current behavior makes roundtrip editing of SVG very impractical.