Styling SVG with CSS: Capabilities and Limitations

SVG is the new standard for vector images in the browser. Vector editors such as Adobe Illustrator allow to directly save to that format and modern browsers have no problems to properly display SVG. As SVG graphics consist of markup, they can be created and maintained using your favorite text editor, just as you do with your HTML. It is even possible to style SVG with CSS, though you'll need to know about quite a few differences in doing so, compared to styling HTML.

SVG Attributes and CSS Properties

The dividing line between HTML and CSS is straight. HTML cares for content and structure, CSS cares for the looks. In SVG this line is blurred, to say the least. That's the main reason, why text and shapes in SVG are usually controlled using element attributes and not CSS:

<rect x="10" y="10" width="300" height="100" fill="red" stroke="green" stroke-width="2" />

In this example we draw a rectangle which is colored using fill. The color and strength of the rectangle's outer frame is defined by the attributes stroke and stroke-width.But, you could as well style the recatngle that way using CSS:

<rect x="10" y="10" width="300" height="100" style="fill: red; stroke: green; stroke-width: 2" />

We simply abuse the attributes as CSS properties. This will not work for all attributes, though. You won't be able to define positions and values for width and height that way. We will simply stick with y as well as width and height attributes. Just as in HTML we could also work with classes and IDs on any element. This way, we'd define the looks of a bunch of elements in SVG via a styled class.

<style>
  .example {
    fill: red;
    stroke: green;
    stroke-width: 2;
  }
</style>

<rect x="10" y="10" width="300" height="100" class="example" />

As SVG does not differentiate between a Head and a Body, stylesheets and actual content share the SVG element which is comparable to an HTML element.

Using Pseudo Classes

Using pseudo classes such as :hover is possible in SVG - even in combination with the CSS3 property transition.

<style>
  .example {
    fill: red;
    stroke: green;
    stroke-width: 2;
    transition: all 2s ease;
  }
  .beispiel:hover {
    fill: blue;
  }
</style>

Having implemented this example hovering elements carrying the class example leads to a color change from red to blue. To have that work properly make sure to not embed the SVG as an Img. Choose Embed or Iframe instead:

<embed src="example.svg" />

Using Img would certainly display the SVG itself correctly. But hover effects and transitions would be ignored. Besides transition we could also use transform. Elements would be scaled or rotated that way.

<style>
  .example:hover {
    fill: blue;
    transform: rotate(20deg);
  }
</style>

While using CSS3 make sure to add vendor prefixes to support as many modern browsers as possible. While Chrome and Firefox have no problem rendering flawlessly, the Internet Explorer would refuse to show your creation even in the most recent version, while he is perfectly capable of showing these CSS3 properties when used in HTML.

Media Queries and SVG

If you want to adjust your SVG to resize to certain resolutions, simply use media queries right inside it:

<style>
  @media only screen and (max-width: 800px) {
    .example {
      display: none;
    }
  }
</style>

This example makes sure that elements classed example are not shown as soon as the visible width falls below 800 pixels. Be aware that it's not the width of your document that defines that, but the width of the element carrying your SVG.

<embed src="example.svg" width="500" />

In this example, elements classed example would not be shown, as the defined width is merely 500 pixels. Media queries in SVG are also useful to optimize the graphics for printing.

<style>
  @media only print {
    .example {
      fill: none;
    }
  }
</style>

In this example we omit showing the fill color on print. I hope I was able to show you how fairly easy it is to work with CSS inside SVG. The advantages are apparent. Older browsers and the Internet Exploder will still mean trouble, though.

(dpe)