CSS Styling Illustrator SVGs

Using SVG images on the web can be quite awesome. Parts of the image can be styles with CSS, including making them responsive with media queries. JavaScript can even be used to manipulate parts of the image at runtime.

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. Unfortunately it can be difficult to get meaningful class names exported into your SVGs in most editors.

Exporting Classes in Adobe Illustrator (The hard way)

The only way I have seen to get Illustrator to export class attributes with meaningful names is to create new “Graphical Styles”.

First you need to select a part of the image that has some styling. You can see the styling in the “Appearance” window.

Screen Shot 2016-05-01 at 11.08.04 AM

Then in the “Graphical Styles” window, click “New Graphical Style” to copy the selected layer’s styling. Then double-click the style to give it a name (use only characters that would be valid in a CSS name).

Screen Shot 2016-05-01 at 11.09.53 AM

Next you need to properly export the SVG using “File > Save As > SVG”. (Don’t use “File > Export” because it doesn’t give you any advanced options). From this window, click “More Options” then choose “CSS Properties: Style Element”

Screen Shot 2016-05-01 at 11.13.49 AM

The saved SVG will include your Graphical Style name in the elements that they apply to:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
...
<g transform="scale(1 1 ) translate(0 ) ">
    ...
    <path class="arrowhead" d="..."/>
</g>
...
</svg>

Graphical Styles aren’t convenient

This method of exporting classes really isn’t useful. They seem to be applicable only to single elements, not groups. It can also be really hard to tell what elements are covered by a certain Graphical Style.

Exporting IDs instead (The easy way)

Instead of going through the inconvenient process of making Graphical Styles, let’s instead just use the convenient Layer Names.

Illustrator can by default save Layer Names as element IDs. 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:

Screen Shot 2016-05-01 at 11.27.39 AM

Now you can use the “File > Export” method of exporting the SVG. Just select the option “Object IDs: Layer Names”

Screen Shot 2016-05-01 at 11.29.36 AM

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.

<svg id="login" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 31">
  ...
  <g id="arrow">
    <path id="arrowline" class="cls-1" d="..."/>
    <path id="arrowhead" d=".."/>
  </g>
  <g id="door">
    <path class="cls-1" d="..."/>
  </g>
</svg>

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.

This gets us a step closer to what we want…

Moving IDs to Classes with SVGO

Now getting meaningful names into the saved SVGs is easier to manage for your graphic designer. Tell them they owe you a beer.

We really want class names, not id names, so I wrote a plugin for SVGO that will do just that!

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.

Just build SVGO into your application build process and enable the “illustratorLayerIdsToClasses” plugin (it is disabled by default).

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:

svg .arrow {
  stroke: red;
}

Note that I include the “svg” tag into my CSS selector so that the selector becomes more specific than any CSS styling embedded in the SVG itself.

Advertisements
Posted in Programming
One comment on “CSS Styling Illustrator SVGs
  1. Andrew Go says:

    “Export as” option also works fine with Internal styling. (Illustrator 2016)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

CodingWithSpike is Jeff Valore. A professional software engineer, focused on JavaScript, Web Development, C# and the Microsoft stack. Jeff is currently a Software Engineer at Virtual Hold Technologies.


I am also a Pluralsight author. Check out my courses!

%d bloggers like this: