Styling SVG (Scalable Vector Graphic) with CSS

Guess most of us are familiar with SVG (Scalable Vector Graphic), but for the novice. It's basically what you work with in Adobe Illustrator. SVG images and their behaviors are defined in XML text files, which means that they can be searched, indexed, scripted, and compressed.

SVG allows three types of graphic objects: vector graphics, raster graphics, and text. And being an XML file, it can be created and edited with any text editor.


SVG working with CSS

Styling SVG work the same way as in regular HTML elements, where HTML cares for content and structure, CSS cares for the looks. In SVG, text and shapes were handled by the markup and the looks can be controlled using presentation attributes and CSS.

There are two possible stylesheet languages for customizing SVG: XSL and CSS. The usage of CSS is very similar to how it is used in HTML.

In SVG, closed polygons, circles, ellipses, rectangles and round-cornered rectangles can be drawn. Also, straight-line paths and paths made up of a series of connected straight-line segments (polylines) are standard. Here's a list of all SVG elements.

Below is a code that produces a rectangular shape:

<svg>
<rect x="10" y="10" width="150" height="150" fill="grey" stroke="black" stroke-width="2"/>
</svg>

As seen in the above example, we created a rectangle with the rect element, giving it a specific width and height, then instead of using the background-color property to give it a color (as it won't work on SVG shape), we set the color with a fill attribute. Colors are specified in the same way as in CSS2, i.e. using names like black, in hexadecimal such as #ccc or #dddddd, in decimal like rgb(255,255,127), or as percentages like rgb(100%,100%,50%).

SVG shapes can be filled and/or outlined with color, gradient, or pattern. The color and strength of the rectangle’s outer frame is defined by the attributes stroke and stroke-width.


Inline styles

Instead of using attributes, you can use inline CSS styles with identical property names:

<svg>
<rect x="10" y="10" width="150" height="150" style="fill: grey; stroke: black; stroke-width: 2px;"/>
</svg>

You won’t be able to define positions/margins and values for width and height within the inline style attribute. We will simply stick with x and y coordinates as well as width and height attributes.

Note: An !important declaration within a presentation attribute definition is an invalid value.

Also, note that presentation attributes count as low level “author stylesheets”. Meanwhile, style definition from the author (external stylesheets, document stylesheets and inline styles) will override it. Therefore, the rectangle in the following example will be red:

<svg>
<rect width="150" height="150" fill="grey" style="fill: red;"/>
</svg>

Internal styles

Just as in HTML that we could work with classes and IDs on any element. In SVG, standard CSS selectors can also be used to apply styles to element types or those with specific IDs or class names, like:

<style type="text/css">
<![CDATA[
.example {
fill: grey;
stroke: black;
stroke-width: 2;
}
]]>
</style>
<svg>
<rect x="10" y="10" width ="150" height="150" class="example"/>
</svg>

From the above example, we included our CSS stylesheets within a CDATA construct. This is very important, as CSS style sheets can include characters, such as >, which conflict with XML parsers. Even if your style sheets doesn't include any character, it's still recommended that you make use of the CDATA blocks.


External stylesheets

You might want to separate your stylesheets so they can be easier to maintain or reused elsewhere. Referencing external stylesheet in SVG is similar to the way we do it in HTML. But we will be using xml-stylesheet attribute instead of the link attribute, like:

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

Grouping elements

With the <g> or <svg> structural element we can group several SVG shapes to share the same styles. It's as simple as:

<g style="fill: grey; stroke: black; stroke-width: 2;">
<rect x="203" width="150" height="150"/>
<circle cx="120" cy="80" r="76"/>
</g>

Using pseudo-classes

Dynamic pseudo-classes such as :hover, :active and :focus and pseudo-classes :first-child, :visited, :link and :lang can be used in SVG – even in combination with the CSS3 property like transition and transform:

<style type="text/css">
<![CDATA[
.example {
fill: slategrey;
stroke: black;
stroke-width: 2;
transition: all 2s ease;
}
.example:hover {
fill: blue;
}
]]>
</ style >
<svg>
<rect x="10" y="10" width ="150" height="150" class="example"/>
</svg>

The code above will result in color change from slategrey to blue on hover. To make that work properly and for now-outdated web browsers capable of displaying SVG graphics, needed them embedded in <embed>, <object> or <iframe> elements to display them integrated as parts of an HTML webpage instead of using the standard way of integrating images with <img>.

<object type="image/svg+xml" src="example.svg"/>

Using <img> would certainly display the SVG correctly. But hover effects and transitions would be ignored.


SVG with responsive design

We can make an SVG file responsive. It's as simple as:

<style>
body {
width: 100%;
height: 100%;
overflow: hidden;
}
.example {
display: block;
width: 100%;
height: 100%;
margin: auto;
}
</style>
<body>
<object class="example" type="image/svg+xml" src="example.svg"/>
</body>

The size of the SVG file will be determined by the size of the screen viewing it. The file will appear at the center of the page and at maximum possible values. The quality remain the same regardless.

Also @media, @font-face, @import and @charset rules within stylesheets are supported.


Final words

The capabilities of styling SVG is very large. But in today post, I hope you have learn the basics? Despite the use of SVG on the web was limited by the lack of support in older versions of Internet Explorer (IE). You can enjoy its benefits while it gain more strength.

Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

Follow @realcombiz