Styling SVG (Attributes or CSS)

Styling SVG documents shares much in common with styling HTML documents. SVG has a similar attribute inheritance scheme. SVG can be styled with CSS (Cascading Style Sheets) and it borrows many of the properties used in CSS. The font and text styling attributes in CSS are a little lacking so the more obscure XSL (Extensible Stylesheet Language) was used as the basis for those attributes. The complete list of shared and non-shared properties is in the SVG standard.

Inheritance and SVG styling

Regardless of how you style, SVG viewers paint objects to the screen by combining the presentation attributes from the object itself and its parents. Any missing attributes are drawn using the initial value for that attribute. If a parent and a child have the same attribute the child's value is used.

Some elements allow you to link to another tag and inherit from a tag which is not a direct parent. This linked element (and any parents) are inherited before any direct parent.

<g fill="green" stroke="black" >
<rect x="10" y="10" rx="5" ry="5" width="80" height="80" />
<g fill="blue" rx="10" ry="10" stroke-width="4" >
    <rect x="110" y="110" width="80" height="80" />
</g>
</g>

The second blue rectangle doesn't have rounded corners because 'rx' and 'ry' are not presentation attributes. They are attributes of the 'rect' element and are not inherited.

Styling Choice 1 - Presentation Attributes

Presentation attributes are the basic way that you style in SVG. SVG viewers are required to support this way to style. To summarize the standard: It's the easy way.

You just add the attributes to the object you wish to style using a presentation attribute. Which objects support which attributes is the tricky part.

Most presentation attributes are summarized in the reference appendix.

Styling Choice 2 - CSS

CSS provides a way to simplify your document by separating styling and the content of the document. It also has the advantage of reuse across documents. The problem: it's not required for SVG viewers to support CSS. Viewers which don't support CSS will ignore the styling and use defaults instead. CSS will override any presentation attributes.

Every presentation attribute has an equivalent CSS style rule with the same name. Like HTML, SVG can have can be external, internal and inline CSS.

Using external CSS is the preferred way to style with large and complex projects. It separates the content of the document from the styling. This avoids duplication and makes maintenance easier.

<defs>
    <style type="text/css"><![CDATA[
      rect {
        fill:blue;
        stroke:black;
        stroke-width:4;
        stroke-dasharray:10,5;
      }
    ]]></style>
</defs>
 
<rect width="100" height="100" class="rect" />