How to Style Scalable Vector Graphics Using CSS

Key Takeaways

• CSS styling rules can be applied to SVG elements, allowing for more streamlined and efficient coding. Styles can be applied to SVG elements using inline styles with identical property names, or through embedding stylesheet code using standard CSS selectors.
• SVGs are ideal for logos, as they can be scaled to any size and used in responsive templates. By defining an SVG file and pointing it to a stylesheet, one can create a logo that can be styled with CSS and viewed in a browser.
• CSS can be used to animate SVGs, change the color and stroke of SVGs, control their opacity, scale, position, rotate, and skew them. This flexibility allows for a wide range of design and animation possibilities when using SVGs in web design.

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" "https://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="https://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" "https://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" "https://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="https://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:

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:

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?

Frequently Asked Questions on SVG Styling with CSS