Working with SVGs from Illustrator

From the "I'm writing this down now so I remember it later" department: I’m going back and forth between Illustrator and VS Code to see how I can manipulate elements in Illustrator to get some useful data into the markup from the start. Fair warning, this will be pretty dry for most readers, but if you like Illustrator and Scalable Vector Graphics then you are in the right place, my friend!

I’ll be updating these notes as I go, along with links to anything I find useful on the matter. If you have anything you think would be useful or find I have something wrong or incomplete, I’d love to hear about it so I can learn more.

Layer/object names become element IDs. As far as I have seen so far, you can’t directly add or modify classes. Similarly, you can’t add custom data attributes in Illustrator.
Illustrator handles objects with the same layer names by appending a random hash to the end of the ID, surrounded by underscores.
Spaces in later names become underscores; no need to put your own underscores into the names in Illustrator. In fact, putting your own underscores in will result in an HTML entity being added into the ID and it’s a whole mess.
Groups and layers are exported as simple Group tags. Fitting.
Grouping and nesting have no effect on the ID of children; whatever the name is, that’s going straight into the ID and you will always(?) have to deal with the duplicate names leading to hashed IDs issue.
Unique/Short IDs names each object with ascending character names a-z, then adds an additional character to the name when it reaches “z”. The original layer names are moved to a custom data attribute called data-name and the values no longer swap underscores for spaces. This allows for multiple objects having the same layer names without issue, but at the expense of potentially semantic IDs.
Combining groups with the short IDs means you can keep layer names relatively clean and let the hierarchy do some of the information conveyance.
The using SVG docs say “a layer named Button1 becomes <g id="Button1_ver3.0"> in the SVG file” but I haven’t seen it do that. It’s a straight copy of the layer name with underscores replacing spaces, as said above.
Illustrator does a good job of creating classes based off the styles of objects. Depending on what you are doing, styling objects can provide another grouping method atop the IDs and nesting structure.
I’m not sure what is causing it yet, but my practice file has a real problem with the next-to-the-last circle in each group turning into an ellipse in the markup, even when I haven’t done anything to it. It seems to decide it wants to be an ellipse on save and there’s no convincing it otherwise.
Depending on your particular use case, file sizes can be bloated depending on export method. Not much of an issue for what I’m doing right now but good to know in general. Export As … SVG is supposedly more “web ready” with better formatting and smaller file sizes but I need to investigate whether that is beneficial for how I’m thinking of using it.
Also depending on your particular use case, and the relative ease of developing an alternative, it may be easier to generate a base SVG file and a custom web interface for adding the desired additional data to the markup. (Fabric.js etc.)
It should go without saying, but performance is different with SVG compared to raster images. Complex SVG images can bring some browsers and devices to a crawl if not handled properly.

Last updated August 26, 2023