Adobe Illustrator - Using SVG

Explorer ,
Feb 25, 2019 Feb 25, 2019

Copy link to clipboard

Copied

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

Views

1.3K

Likes

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

Adobe Community Professional , Feb 26, 2019 Feb 26, 2019
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

Likes

Translate

Translate
Adobe Community Professional ,
Feb 25, 2019 Feb 25, 2019

Copy link to clipboard

Copied

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

Likes

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
Adobe Community Professional ,
Feb 26, 2019 Feb 26, 2019

Copy link to clipboard

Copied

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


— Adobe Certified Expert & Instructor at Noble Desktop | Web Developer, Designer, InDesign Scriptor

Likes

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 ,
Jun 06, 2022 Jun 06, 2022

Copy link to clipboard

Copied

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.

Likes

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
Adobe Employee ,
Feb 27, 2019 Feb 27, 2019

Copy link to clipboard

Copied

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

Likes

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
Adobe Community Professional ,
Feb 27, 2019 Feb 27, 2019

Copy link to clipboard

Copied

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.


— Adobe Certified Expert & Instructor at Noble Desktop | Web Developer, Designer, InDesign Scriptor

Likes

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
Adobe Employee ,
Mar 04, 2019 Mar 04, 2019

Copy link to clipboard

Copied

Hi Dan,

Thanks for the explanation.

Regards,

Srishti

Likes

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 21, 2019 May 21, 2019

Copy link to clipboard

Copied

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.

Likes

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 ,
Jun 07, 2022 Jun 07, 2022

Copy link to clipboard

Copied

LATEST

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).

 

Azragh_0-1654586929178.png

 

Likes

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