Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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 '14 at 18:42
    
I'm using Adobe Illustrator CC version 17.1.0 – NerdCowboy Jun 18 '14 at 18:52
up vote 2 down vote accepted

I do this with a Grunt task. By using "grunt-text-replace" I am able to pass my minified SVGs (svgmin) through a custom regular expression that replaces all garbled class references with proper classes.

In Illustrator, declare the layer/object name as class="tree" for example. This will be exported by Illustrator as id="class="tree"". The below grunt task will take care of that and make it class="tree". I am also pasting below some other subtasks that will do an ID cleanup (recommended).

    replace: {
        // ID cleanup: performs a manual ID cleanup as Illustrator exports a mess
        illustrator: {
            src: ['assets/svg/optimised/*.svg'],
            overwrite: true,
            replacements: [{
                // Remove escaped underscore character
                from: '_x5F_',
                to: '_'
            }, {
                // Replace class names with proper classes
                //class_x3D__x22_tank-option_x22__2_
                from: /id\=\"class_x3D__x22_(.+?)_x22_(.*?)\"/gi,
                to: function(matchedWord, index, fullText, regexMatches) {
                    return 'class="'+ regexMatches[0].toLowerCase()+'"';
                }
            }, {
                // Lowercase all ids
                from: /id\=\"(.+?)\"/gi,
                to: function(matchedWord, index, fullText, regexMatches) {
                    return 'id="'+ regexMatches[0].toLowerCase()+'"';
                }
            }, {
                // Lowercase all id references to match the previous replace rule
                from: /url\(\#(.+?)\)/gi,
                to: function(matchedWord, index, fullText, regexMatches) {
                    return 'url(#'+ regexMatches[0].toLowerCase() +')';
                }
            }, {
                // Lowercase all id href to match the previous replace rule
                from: /href\=\"\#(.+?)\"/gi,
                to: function(matchedWord, index, fullText, regexMatches) {
                    return 'href="#'+ regexMatches[0].toLowerCase() +'"';
                }
            }, {
                // Remove all font references as we will use CSS for this
                from: /font\-family\=\"(.+?)\"/gi,
                to: function(matchedWord, index, fullText, regexMatches) {
                    return '';
                }
            }]
        }
    }

Then you can call this task within your Gruntfile as:

grunt.registerTask('svgclean', [
    'replace:illustrator'
]);
share|improve this answer

Looks like the link Ian Dunn posted might be your ticket. Here's an excerpt from that page:

In the SVG export options, I select Style Elements, and I select the Include Unused Graphic Styles option. It will declare sandStyle and blueSky as CSS styles in the SVG document.

Here is the SVG output generated by Illustrator CC:
<style type="text/css"> .sandStyle{fill:#BFAF8F;stroke:#A6806A;stroke-width:3;stroke-miterlimit:10;} .blueSky{fill:#338AC4;stroke:#3469B7;stroke-width:3;stroke-miterlimit:10;} </style> <g id="mySquare"> <rect x="90.5" y="15.5" class="sandStyle" width="64" height="63"/> </g> <g id="myCircle"> <circle class="sandStyle" cx="42" cy="46" r="34.2"/> </g>

Illustrator can export graphic styles as CSS in a style element and applies them via classes in the SVG code. This is how you can generate classes in your exported SVG. Depending on what you want those classes to do, you could just define them in another CSS file and remove the style definitions from the exported SVG.

The linked page states this, but for the sake of completeness, Illustrator will only generate the style element and classes if you set CSS Properties: Style Element in the Advanced area (you might need to click More Options) of the SVG Options Dialog: Save > Format: SVG > SVG Options > More Options > CSS Properties: Style Element

I'd also note that generated code is never going to be quite perfect for all situations. Hand-written code tends to be lighter and easier for humans to read (if that's what you're going for). I'd recommend reading over Wikimedia user Quibik's document on cleaning up SVG files by hand and taking a look at grunt-svgmin.

share|improve this answer

Simple way to do it, it's similar to Grunt task, but even more easier:

To all objects you would like to make class, give the name for example: "myClassmainCircle" and "myClassmainStar". After exporting replace all: 'id="myClass' with 'class="'

The result will be: class="mainCirle" class="mainStar"

share|improve this answer
    
Please, can you explain what is the difference to the other answers? Welcome to GD.SE! – Kurt Apr 4 at 21:00

Your Answer

 
discard

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.