: Specify CSS class names on SVG paths using Illustrator 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

@Barnes313

I just ran into this issue to and found the following solution (for Illustrator CC):

Apply named "Graphical Styles" to the paths you want to name and export the SVG with Internal CSS. For example, a Graphical Style named my-icon will define an internal my-icon class and apply that class to the proper paths.

Example with screenshots:

Create a new Graphic Style:


Export as... SVG:



Output:

<defs><style>.my-icon{ fill:#000; }</style></defs>
<path class="my-icon">...</path>

Source: www.viget.com/articles/5-tips-for-saving-svg-for-the-web-with-illustrator


Use Appropriate CSS Properties Setting (dev happiness)



CC: illustrator uses the defined Graphical Styles to create named classes (smart, useful)

Vote Up Vote Down

@Samaraweera207

In Illustrator 21.0.0 (2017) and possibly in earlier versions:


Create a new style in the Graphic Styles panel
Double click the new style and give it a custom name, like "my-style"
Apply that style to one or more elements
Export the SVG


The elements in the SVG will be given a class attribute with the value "my-style". Then you can use external CSS to override styles.

Note that if your style name contains a space, it will convert to a hyphen.

Vote Up Vote Down

@Sherry646

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"

Vote Up Vote Down

@Heady304

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'
]);

Vote Up Vote Down

@Si6392903

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:

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.

Vote Up Vote Down