Then you can use CSS to style your SVGs however you want! For example, to change the color of the arrow from the SVG example above: Just build SVGO into your application build process and enable the “illustratorLayerIdsToClasses” plugin (it is disabled by default). Until my branch is pull-requested and accepted into the master SVGO project, you can get to it in my fork of SVGO, “illustratorLayerIdsToClasses” branch. You want to go with File > Export > Export As Name your file and choose SVG as the format. We really want class names, not id names, so I wrote a plugin for SVGO that will do just that! Now getting meaningful names into the saved SVGs is easier to manage for your graphic designer. This gets us a step closer to what we want… Moving IDs to Classes with SVGO Now remember that IDs should be unique, so if you have more than 1 layer that has the same name, Illustrator will append a number to the end “arrow1”, “arrow2”, etc… but the original name will be put into a data-name='arrow' attribute.

Now the saved SVG will include the layer names as IDs, and the top-level layer name becomes the ID of the top-level SVG element. Just select the option “Object IDs: Layer Names” Now you can use the “File > Export” method of exporting the SVG. However, due to a quirk in the way it does this, I recommend having only 1 top-level layer, then group drawing objects using sub-layers: Illustrator can by default save Layer Names as element IDs. Instead of going through the inconvenient process of making Graphical Styles, let’s instead just use the convenient Layer Names. It can also be really hard to tell what elements are covered by a certain Graphical Style. They seem to be applicable only to single elements, not groups. This method of exporting classes really isn’t useful. The saved SVG will include your Graphical Style name in the elements that they apply to: From this window, click “More Options” then choose “CSS Properties: Style Element” (Don’t use “File > Export” because it doesn’t give you any advanced options). Next you need to properly export the SVG using “File > Save As > SVG”. Then double-click the style to give it a name (use only characters that would be valid in a CSS name). Then in the “Graphical Styles” window, click “New Graphical Style” to copy the selected layer’s styling. You can see the styling in the “Appearance” window. The only way I have seen to get Illustrator to export class attributes with meaningful names is to create new “Graphical Styles”.įirst you need to select a part of the image that has some styling. Exporting Classes in Adobe Illustrator (The hard way) Unfortunately it can be difficult to get meaningful class names exported into your SVGs in most editors. One of the problems with using CSS to style an SVG is that you will typically want to target class names, just like other HTML elements. JavaScript can even be used to manipulate parts of the image at runtime. Parts of the image can be styles with CSS, including making them responsive with media queries. Using SVG images on the web can be quite awesome.

Adobe illustrator svg export enable