Adobe Illustrator - Using SVG

[charlesn79540358]

Hello,

I am opening up a .SVG in Adobe Illustrator CC 2019 and I want to create custom classes for paths. Every time I saved the save with some styling Adobe Illustrator creates class names is there a way to edit the names in Adobe Illustrator CC 2019?

Hopefully this makes sense.

Thank you

[Monika Gause]

not sure what you want to do. you have named them in the layers panel?

[Dan Rodney · Accepted solution]

You can apply IDs by naming the layers, but you cannot apply classes within Illustrator. For more info about saving SVG files please refer to my blog post: Tips for Creating SVG with Adobe Illustrator

[Azragh]

This is simply not true. At least it was until now - I always added Layer styles and named them - then Illustrator added this names as classnames to the paths instead of .a, .b, .c and stuff. Sadly this doesn't work anymore.

[Srishti Bali]

Hi Charles,

I am afraid I could not understand the issue. When you say "class names" do you mean layers? Will it be possible for you to share some screenshots or a small video of the issue?

Regards,

Srishti

[Dan Rodney]

In SVG code you can name things with classes or IDs. He's asking if he can apply those names in Illustrator instead of doing it editing the exported code. Illustrator only lets you apply IDs, not classes.

[Srishti Bali]

Hi Dan,

Thanks for the explanation.

Regards,

Srishti

[brucezin]

I've found a solution for adding classes to your SVG.

It does not replace the ones Illustrator uses, but it might help you out.

Use the SVG Interactivity panel to add Classes using Javascript.

You just have to:

1. Select the path or group
2. Select the Event: onload;
3. Add the following code:

     this.classList.add('namehere');

Obs: Replace namehere with whatever class name you want.

[Azragh]

Just figured out how to do that (again) today, as it worked for a long time with adding layer styles to your paths (not groups!).

So to achieve that, you have to apply the same layer style to every single path you want the class name on (again, not on groups - then Illustrator will generate a random name like .cls-1 or similar). Make sure you write class names / name your layer styles without spaces in between - use hyphens. Then on the export settings (that one got me) you have to set Object-IDs to Layer names, otherwise it won't work (it did previously)! If you dont select that option, classes are just single letters like .a, .b, .c .. As far as I know it doesn't matter if you minify the export or not, font and image settings shouldn't make a difference too. Just make sure you generate internal CSS and Object-IDs from Layer names and you should be fine (with the latest Illustrator version at least).

[andrewv53371465]

There is a better answer...

Illustrator adds IDs not classes to objects. BUT There are 2 workarounds:

1- Name your Layer then target objects on that layer using #LayerName g. This will target any groups on that layer.

2- When Illustrator sees 2 objects with identical IDs it will dynamically apend a unique string to the ID name eg #Layername_8798..89798. You can treat these in the same way you can a CSS class by using wildcard selectors: eg. 

[id^="LayerName"]. This will target any ID beginning with "LayerName"