Advertisement


Specify CSS class names on SVG paths using Illustrator


Question

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.

2017/05/23
1
21
5/23/2017 12:40:00 PM

Accepted Answer

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'
]);
2015/08/09
5
8/9/2015 11:16:00 AM