Tutorial SVG 9: styling SVG with CSS

svg and CSS

Till so far in this range of SVG tutorials we specified the style properties for SVG objects in HTML pages, like text, shapes and paths, by using attributes:

<rect x="50" y="50" width="300" height="170" rx="60" ry="50"
stroke="red" stroke-width="10"
fill="black" fill-opacity="0.6" />

Or by using the style attribute:

<rect x="10px" y="10px" width="300px" height="300px"
style="stroke:black; fill:red; stroke-width:20; fill:red; fill-opacity:0.6;"  />    

However, this is not a good practice because of the non-separation of the content and its style. To change anything on the page you have to go into the file, which is not recommendable if you administer a large website with a lot of pages

But here's the good news, SVG supports CSS stylesheets which allows you separate the style of an SVG graphic from its content. And there is more: in CSS stylesheets that you use in combination with other document markup languages, like in HTML or XML files, you can specify SVG images for example as background or list-bullet images. So far so good, but how exactly does it work? After all, the elements and the style properties used in SVG are different than in HTML.

First of all we need to differentiate between two kind of SVG entities:

  • a SVG document
  • a SVG element inside an HTML document.

In the first case we are dealing with an XML page (SVG is build on top of XML), in the latter with an HTML page.

Using stylesheets in an SVG document (or in any other XML based document)

<svg xmlns="http://www.w3.org/2000/svg"     
	xmlns:xlink="http://www.w3.org/1999/xlink">          
<style type="text/css" >       
	<![CDATA[          
    	circle {            
        stroke: black;            
        fill:   red;
        }        
   ]]>     
   </style>          
<circle  cx="100" cy="100" r="50"/> 
</svg>

Or when using external stylesheets

<?xml-stylesheet type="text/css" href="CSS/stylesheet.css" ?> 
<svg xmlns="http://www.w3.org/2000/svg"     
xmlns:xlink="http://www.w3.org/1999/xlink">       
<circle cx="100" cy="100" r="50"  style="strokeblack; fill:red"/>  
</svg>

Using stylesheets in an SVG object inside a HTML document

<html> 
<body>  
<style>   
	circle {
    	stroke: black;      
       fill  : red;   
    } 
</style>  
<svg>   
<circle cx="100" cy="100" r="50" /> 
</svg>  
</body> 
</html>

Or when using external stylesheets

<html> 
<head>
<link href="CSS/stylesheet.css" /> 
</head>
<body>  
<svg>   
<circle cx="100" cy="100" r="50" /> 
</svg>  
</body> 
</html>

Example 1: styling an SVG element in a HTML page using CSS

Let's just look at an example in which we explore the possibilities of CSS in relation to an SVG image.

Made with SVG and CSS
Image 1. Made with SVG and CSS

The SVG code

<svg width="600px" height="600px" viewBox="-160 -160 600 600"
  xmlns="http://www.w3.org/2000/svg" version="1.1"
  xmlns:xlink="http://www.w3.org/1999/xlink">
<title>SVG and CSS3</title>
  <desc> SVG in combination with CSS3</desc>
<defs>
  <g id="petal" class="petal">
  <path class="petal-sticker" fill="#FFFFFF" d="M127.1,21l0.5,0.5c29.3,29.3,30.1,76.9,1.1,106.4c-29.3,29.7-77.1,29.8-106.5,0.4l-1.1-1.1	C7.6,113.7,0,95.4,0,76.4L0,0l76.4,0C95.4,0,113.7,7.6,127.1,21z"/>
  <path class="petal-fill" d="M118.5,26.9l0.4,0.4c25.3,25.3,26,66.4,0.9,91.9c-25.3,25.7-66.6,25.8-92,0.3l-1-1	C15.3,106.9,8.7,91.2,8.7,74.7v-66h66C91.2,8.7,106.9,15.3,118.5,26.9z"/>
  <path class="petal-edge" d="M118.5,26.9l0.4,0.4c25.3,25.3,26,66.4,0.9,91.9 	c-25.3,25.7-66.6,25.8-92,0.3l-1-1C15.3,106.9,8.7,91.2,8.7,74.7v-66h66C91.2,8.7,106.9,15.3,118.5,26.9z"/>
  </g>
  
  <g id="part45">
  <use xlink:href="#petal"/>
  </g>
  
  <g id="clover">
  <use xlink:href="#part45"/>
  <use xlink:href="#part45" transform="rotate(90)"/>
  <use xlink:href="#part45" transform="rotate(180)"/>
  <use xlink:href="#part45" transform="rotate(270)"/>
  </g>
  
  <radialGradient id="fade" cx="0" cy="0" r="200"
  gradientUnits="userSpaceOnUse">
  <stop id="fade-stop-1" offset="33%"/>
  <stop id="fade-stop-2" offset="95%"/>
  </radialGradient> 
</defs> 

<g id="clover4">
  <circle id="overlay" cx="0" cy="0" r="200"
  stroke="none" fill="white" />
  <use id="outer-clover" xlink:href="#clover" fill="url(#fade)" />
  <use id="inner-clover" xlink:href="#clover"
  transform="rotate(45) scale(0.75)"  />
</g>
</svg>

The CSS

svg {
  background-color: white;
}

#heading {
  font-size: 24px;
  font-weight: bold;
}
  
#caption {
  font-size: 12px;
}
  
/* clover4 */
  #clover4:hover {
  cursor: crosshair;
}
  
/* gradient */
  #fade-stop-1 {
  stop-color: darkgreen;
}
  
#fade-stop-2 {
  stop-color: lightgreen;
}
  
/* outer clover */
  #outer-clover {
  opacity: .75;
}
  
#inner-clover {
  opacity: .6;
}
  
#outer-clover .petal-sticker {
  fill: none;
}

#outer-clover .petal-edge {
  fill: none;
}
#outer-clover .petal:hover > .petal-fill {
  fill: yellow;
}
#outer-clover .petal:hover > .petal-edge {
}
  
/* inner clover */
  #inner-clover .petal-fill {
  fill: darkgreen
}
  
#inner-clover .petal-edge {
  fill: none;
}
  
#inner-clover .petal-sticker {
  fill: white;
}
  
 #inner-clover .petal:hover > .petal-fill {
  fill: yellow;
  stroke: none;
}
  
#inner-clover .petal:hover > .petal-edge {
  stroke: green;
}

Check this example in your browser

Next tutorial

Leave a comment