Styling Scalable Vector Graphic (SVG) with CSS

Today we are going to continue our discussion on Scalable Vector Graphic (SVG), and as we have pointed out in our previous post, one of the advantages of using SVG is that it can be styled with CSS.

SVG Styling Properties

Styling SVG basically work the same way as in regular HTML elements, they in fact shared some common properties as well. However, there are other properties that are intended specifically for SVG object which have their own specification apart from CSS.

For instance, in regular HTML element, we can add background color either with background-color or background CSS property. In SVG, it is a little bit different; the background color is specified with the fill property instead. Also, element’s border is specified with stroke property and is not with the border like we did in regular HTML, you can see the complete list here.

If you have been working with vector editor like Adobe Illustrator quite long, you can guess quickly that the property naming mechanism in SVG is originated from the editor.

SVG Style Implementation

We can use one of the following ways to style SVG element;

Recommended Reading: Reviewing CSS Style Priority Level

Presentation Attributes

If you have seen all SVG properties list, they all can be added directly on the element to alter the element’s presentation. The following example shows how we can add fill and stroke property directly on a rect element;

<svg>
<rect width="200" height="200" fill="slategrey" stroke="black" stroke-width="3"/>
</svg>

The rectangle will turn out to be like the screenshot below;

Inline Style Sheet

We can also add style with the style attribute. In the following example we will also add fill and stroke to the rect, but this time we add it within the style and rotate it with CSS3 transform property, like so;.

<svg>
<rect x="203" width="200" height="200" style="fill:slategrey; stroke:black; stroke-width:3; -webkit-transform: rotate(45deg);"/>
</svg>

The rectangle will turn in the same result, only that it is now also rotated;

Internal Style Sheet

Embed the SVG style within the style element is also possible and is no different to how we did it on regular HTML. This example below shows how we add internal styles to affect SVG elements in .html document.

<style type="text/css" media="screen">
	#internal rect {
		fill: slategrey;
		stroke: black;
		stroke-width: 3;
		-webkit-transition: all 350ms;
	}
	#internal rect:hover {
		fill: green;
	}
</style>

However, SVG is an XML-based language, so when we are about to add inline style sheet in a .svg document, we need to put the styles declaration inside cdata, as follows;

<style type="text/css" media="screen">
	<![CDATA[
	#internal rect {
		fill: slategrey;
		stroke: black;
		stroke-width: 3;
		-webkit-transition: all 350ms;
	}
	#internal rect:hover {
		fill: green;
	}
	]]>
</style>

The cdata here is required, since CSS can have > character that will conflict with XML parsers. Using cdata is highly recommended for embedding style in SVG, even if the conflicting character is not given in the style sheet.

External Style Sheet

The external style sheet also work the same way for SVG elements in .html document.

<link rel="stylesheet" type="text/css" href="style.css">

Again in .svg document, we need to refer the external style sheet as an xml-stylesheet, like so.

<?xml-stylesheet type="text/css" href="style.css"?>

Grouping Elements

SVG elements can be grouped with the <g> element. Grouping elements will allow us to share common styles to all the elements in the group, here is an example;

<g style="fill:slategrey; stroke:black; stroke-width:3; fill-opacity: 0.5;">
	<rect x="203" width="200" height="200"/>
	<circle cx="120" cy="106" r="100"/>
</g>

Both the rectangle and the circle will have the same result.

Final Thought

We have walked through all the essential matters on styling SVG with CSS and this is just one of the advantages of serving graphic with SVG. In the next post we will take a look into another one further, so stay tuned.

via hongkiat.com http://www.hongkiat.com/blog/scalable-vector-graphic-css-styling/

Photoshop CS6 Download