How to Style Scalable Vector Graphics Using CSS

Tweet

If you’ve been following this series you’ll know what SVGs are, why you should consider them, how to create basic drawings and six ways to embed SVGs in your web page.

While creating SVG XML may be easy, the code can be a little verbose, e.g.


<circle cx="100" cy="300" r="80"
stroke="#909" stroke-width="10" fill="#f6f" />

Wouldn’t it be great if we could apply CSS styling rules to SVG elements? Well, that’s exactly what you can do! Instead of attributes, you can use inline styles with identical property names:


<circle cx="100" cy="100" r="80"
style="stroke: #909; stroke-width: 10; fill: #f6f;" />

Inline styles are still clunky so you can embed stylesheet code. Standard CSS selectors are used to apply styles to element types or those with specific IDs or class names, e.g.


<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="xMidYMid meet">
	<defs>
		<style type="text/css"><![CDATA[
			circle {
				stroke: #909;
				stroke-width: 10;
				fill: #f6f;
			}
		]]></style>
	</defs>
	<circle cx="100" cy="100" r="80" />
</svg>

Note that the <![CDATA[ … ]]> block is required since CSS can contain > characters which will confuse XML parsers. I recommend you use them regardless.

That’s great but, as all good developers know, it’s best to separate your stylesheets so they’re easier to maintain and can be reused elsewhere. We can do that by adding a new xml-stylesheet tag immediately after the XML declaration:


<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet href="styles.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg...

Creating the SitePoint Logo as a CSS-Styled SVG

SVGs are ideal for logos since they can be scaled to any size and used in a responsive template. We’ll start by defining a sitepoint.svg file which points to a stylesheet named sp-styles.css:


<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet href="sp-styles.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="95 40 550 180" preserveAspectRatio="xMidYMid meet">
	<title>SitePoint</title>
	<desc>The SitePoint Logo</desc>
	<g id="main">

We’ll follow this with polyline elements for the blue slants but won’t worry about styling just yet:


		<polyline points="100,100 150,100 170,150 120,150" />
		<polyline points="170,100 220,100 240,150 190,150" />

The orange slants are defined using similar polylines except that we’ll give them a class named “orange”:


		<polyline class="orange" points="120,45 170,45 150,95 100,95" />
		<polyline class="orange" points="190,155 240,155 220,205 170,205" />

We finish with the logo text and closing SVG tags:


		<text id="sp" x="240" y="150">sitepoint</text>
	</g>
</svg>

The unstyled SVG can be viewed in your browser:

unstyled SVG

We’ll now add the some simple styles to the sp-styles.css file. The first will apply a blue fill to all polylines:


polyline
{
	stroke: 0;
	stroke-linejoin: butt;
	fill: #003565;
}

Polylines with a class name of “orange” will have an orange fill applied:


polyline.orange
{
	fill: #ff6400;
}

Finally, we can apply simple text styling. We could use webfonts or any of the standard CSS font/text properties:


text#sp
{
	font-family: verdana, sans-serif;
	font-size: 570%;
	fill: #003565;
}

Our SVG is now complete:

CSS-styled SVG

Using the SVG in a Responsive Design

A simple HTML5 template can be developed to display the SVG in an object tag:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>SVG logo</title>
</head>
<style>
html, body
{
	width: 100%;
	height: 100%;
	overflow: hidden;
}

#sp
{
	display: block;
	width: 100%;
	height: 100%;
	margin: auto;
}
</style>
<body>

<object id="sp" type="image/svg+xml" data="sitepoint.svg">SitePoint</object>

</body>
</html>

It doesn’t matter how the browser height or width dimensions change, the logo will always appear in the center of the page at the maximum possible size. The quality remains good regardless.

View the SVG logo demonstration page…

The combined size of the SVG and CSS file is 931 bytes before compression and gzipping. The PNG shown above won’t look good above a 500 pixel width and has a file size of 3.4kB after compression
(although it will work in IE6/7/8!).

Stay tuned to SitePoint for more SVG articles coming soon…

And if you enjoyed reading this post, you’ll love Learnable; the place to learn fresh skills and techniques from the masters. Members get instant access to all of SitePoint’s ebooks and interactive online courses, like HTML5 & CSS3 For the Real World.

Comments on this article are closed. Have a question about CSS? Why not ask it on our forums?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.bloginity.com Daniel

    When will sitepoint’s website transform to HTML5/CSS3? =)

  • Guest

    Rally like that! I wish to use something like linear-gradient for text inside the stylesheet…

  • itmitică

    There are a few more problems:
    – in FF 13.0, the text reads “sitepoin”
    – in Op 11.64, the text reads “sitepo”

    Obviously, browsers have their own mind when it comes to and 100%.

    Zooming this example makes the SVG move a bit around in the page, while remaining at the same size. Frustrating.

    • http://www.optimalworks.net/ Craig Buckler

      Really? Which OS are you using? I suspect it’s substituting verdana for a wider font and cropping it accordingly.

      • itmitică

        W7 Professional SP1 64bit

        Also, being an object, NoScript blocks it by default.

      • http://www.optimalworks.net/ Craig Buckler

        OK, is it your Windows display DPI settings?
        I suspect anything above 100% may scale the font so it doesn’t fit.

      • itmitică

        IE 9, Ch 19, Saf 5.1.7 manage to honor the 100% width though.

      • http://www.optimalworks.net/ Craig Buckler

        Pah. Let’s give up this web development lark and do something simpler like brain surgery.

  • http://www.leachcreative.com Andrew

    Thanks for sharing, this was definitely an interesting read.

  • http://www.visnos.com/home Mike

    Well it looks like you will have to rewrite the article for the new logo. IMHO the old one looked better but maybe that’s just familiarity.

  • http://www.uglyfashionmedia.com Eoin Oliver

    I think SVG is an amazing idea, particularly if you can start designing entire websites with it in mind, and of course, given the old mobile phone/tablet/pc issues you have with design.

    My question is how can we make this backwards compatible, as I think not supporting some not so old browsers is a very poor idea.

    I’ve also yet to see a real life example of where someone required a huuuuugggeee logo. A resizable one may be useful for the different viewing sizes, but does SVG work on mobiles/tablets?

    • http://www.optimalworks.net/ Craig Buckler

      The main places where SVG will cause issues is IE8 and below and Android 2.3 and below. There are shims, although I personally prefer simpler solutions such as reverting to a static PNG.

  • Alex

    The logo does not display in android 2.3 can something be done to support these older devices?