Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

Is there a way to edit SVG files in Illustrator where you can specify a CSS class for each path?

I already know in Illustrator that if you give the layer name an actual name, Illustrator will use that name as the path's ID, which is fine if you don't plan on reusing the icon more than once on the same page.

My current workaround is to just use the IDs method, but then later convert the IDs to classes in my code editor, but it's pretty annoying to have to do every time I generate my SVG sprite.

If that's currently not possible in Illustrator, are there any other apps that will allow you to specify that? Or maybe a Grunt or Gulp package?

It looks like you might be able to do it with Inkscape with a hack, so I might look at that if there's no other good solutions out there.

share|improve this question
I can't get illustrator to export with ID's, or classes's. I prefer to code my SVG's though, as odd as that sounds, and not very effective i know, Could you include what version of illustrator you are using? –  Daniel Jun 18 at 18:42
I'm using Adobe Illustrator CC version 17.1.0 –  NerdCowboy Jun 18 at 18:52
Ah, i'm using an older version, mine probably doesn't even do this. –  Daniel Jun 18 at 18:56
i am also searching for the perfect SVG image workflow. i want to create a set of SVGs listening to the same CSS — for this it is necessary to have classes. the source files need to stay editable in a visual editor. i tried out "sketch" briefly, just as with illustrator, the generated svg code looks very proprietary. –  Frank Lämmer Oct 7 at 8:27

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.