SVG and CSS - Cascading Style Sheets

Jakob Jenkov
Last update: 2014-06-15

It is possible to style your SVG shapes using CSS. By styling is meant to change the looks of the shapes. This can be stroke color and width, fill color, opacity and many other properties of your shapes.

There are 6 ways to style the shapes in your SVG images. Each will be covered in this text. At the end of this text you will find a list of the CSS properties you can use with SVG.

This text assumes that you are familiar with CSS. If you are not, I have a CSS Tutorial available too, which explains CSS in the context of HTML (where CSS is also used). The CSS properties for SVG elements are sometimes different from the CSS properties of HTML elements, but the overall principles remain the same.

CSS Styling Using Attributes

Is it possible to style an SVG shape using specific style attributes like stroke and fill. Here is an example: 

<circle stroke="#000000" fill="#00ff00" />

There are a range of styling attributes available. However, it is recommended that you use either inline style sheets or external style sheets, so I won't get into too much detail about style attributes here.

Using the style Attribute and CSS Properties

This method doesn't use any style specific attributes. Instead it uses only the style attribute and specifies CSS properties inside it. If you need to embed style directly in a shape, this method is preferable to the specific attributes, because you learn the names of the CSS properties. The CSS properties are the same in an internal or external style sheet, so it is easier to copy-paste and learn like this.

Here is the same circle with the stroke and fill set via the style attribute and CSS properties: 

<circle style="stroke: #000000; fill:#00ff00;" />

Using Inline Style Sheets

It is possible to define the styles for your shapes in an inline style sheet, and then have all these styles automatically applied to your shapes. Here is an example: 

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
    
    <style type="text/css" >
      <![CDATA[

        circle {
           stroke: #006600;
           fill:   #00cc00;
        }

      ]]>
    </style>
    
    <circle  cx="40" cy="40" r="24"/>
</svg>

Notice how the style of the circle-element is defined inside the <style>-element. This works the same way as in HTML and CSS.

Internal style sheets work fine in both Internet Explorer 7 and Firefox 3.0.5.

The class Attribute

Rather than applying a style to all shapes of a certain type (e.g. all circles), you can use the class attribute in the shape to choose the styling of that shape. Just like you would with the class attribute in an HTML element.

Here is an example of two styles for circles - a green and a red. Each of these two styles are applied to each their own <circle>-elemement using the class attribute: 

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

    <style type="text/css" >
      <![CDATA[

        circle.myGreen {
           stroke: #006600;
           fill:   #00cc00;
        }
       circle.myRed {
       stroke: #660000;
       fill:   #cc0000;
    }

      ]]>
    </style>

    <circle  class="myGreen" cx="40" cy="40"  r="24"/>
    <circle  class="myRed"   cx="40" cy="100" r="24"/>
</svg>

Notice how the circle selector name in the style sheet has been suffixed with .myGreen and .myRed. Now <circle>-elements can refer to either the green or red circle style using either class="myGreen" or class="myRed".

Using External Style Sheets

When you are using an external style sheet, the style sheet is put in a separate file and put on your web server, just like with an external CSS file for HTML pages. In addition, you need the following declaration in your SVG file, before the <svg>-element: 

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

This processing instruction tells the SVG viewer to use the CSS style sheet found the file "svg-stylesheet.css".

Here is an example where the declaration is being used inside an SVG file: 

<?xml-stylesheet type="text/css" href="svg-stylesheet.css" ?>
<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">


    <circle cx="40" cy="40" r="24"
       style="stroke:#006600; fill:#00cc00"/>

</svg>

NOTE: External CSS style sheets seem to work fine in Internet Explorer 7, but not in Firefox 3.0.5.

Using a style sheet in the HTML page.

If you embed the SVG image inside an HTML page, you can also embed the style sheet for the SVG image inside the HTML page. Here is an example: 

<html>
<body>

<style>
</style>

<svg>
</svg>

</body>
</html>

To add styles to the shapes inside the SVG image, just add regular CSS properties inside the style element. You can style the SVG elements using the same CSS selectors you would normally use for HTML. Here is an HTML page with a circle element styled via the CSS style sheet in the HTML page: 

<html>
<body>

<style>
  circle {
     stroke: #006600;
     fill  : #00cc00;
  }
</style>

<svg>
  <circle cx="40" cy="40" r="24" />
</svg>

</body>
</html>

If you embed SVG images directly inside HTML pages, this is probably the easiest way to style your SVG shapes.

Overriding Style Sheets Locally in Shapes

If you have styled a shape in a style sheet you can override this styling by setting new styling properties locally inside the shapes you want new styles for. The styles set locally inside the shape always has precedence over styles defined in internal or external style sheets.

SVG CSS Properties

SVG elements have the following CSS properties which you can set. Not all elements have all of these CSS properties. Therefore the CSS properties are split into multiple tables targeted at different elements.

Shape CSS properties

CSS properties for the path element and other shape elements:

<%-- --%>
CSS Property Description
fill Sets fill color of the shape.
fill-opacity Sets fill opacity of the shape.
fill-rule Sets fill rule of the shape.
marker Sets marker used along the lines (edges) of this shape.
marker-start Sets start marker used along the lines (edges) of this shape.
marker-mid Sets mid marker used along the lines (edges) of this shape.
marker-end Sets end marker used along the lines (edges) of this shape.
stroke Sets the stroke (line) color used to draw the outline of this shape.
stroke-dasharray Sets the stroke (line) dashing used to draw the outline of this shape.
stroke-dashoffset Sets the stroke (line) dash offset used to draw the outline of this shape.
stroke-linecap Sets the stroke (line) line cap used to draw the outline of this shape. Valid values are round, butt and square.
stroke-miterlimit Sets the stroke (line) miter limit used to draw the outline of this shape.
stroke-opacity Sets the stroke (line) opacity used to draw the outline of this shape.
stroke-width Sets the stroke (line) width used to draw the outline of this shape.
text-rendering Sets the text-rendering used to draw the outline of this shape.

Text CSS properties

CSS properties for the text element:

CSS Property Description
alignment-baseline Sets how the text is aligned to its x and y coordinates.
baseline-shift Sets the baseline shift used to render text.
dominant-baseline Sets the dominant baseline.
glyph-orientation-horizontal Sets horizontal glyph orientation.
glyph-orientation-vertical Sets vertical glyph orientation.
kerning Sets the kerning of the rendered text (kerning is letter spacing).

Gradient CSS properties

CSS properties for the SVG gradients:

CSS Property Description
stop-color Sets the stop color used in a stop element used in a gradient.
stop-opacity Sets the stop opacity used in a stop element used in a gradient.

Jakob Jenkov

Featured Videos

P2P Networks Introduction




















Advertisements

High-Performance
Java Persistence
Close TOC
All Tutorial Trails
All Trails
Table of contents (TOC) for this tutorial trail
Trail TOC
Table of contents (TOC) for this tutorial
Page TOC
Previous tutorial in this tutorial trail
Previous
Next tutorial in this tutorial trail
Next