zuubaDigital

Styles

css styles

An SVG element's presentation attributes - properties like fill, stroke, stroke-width, and opacity - can be styled via CSS using:

Inline styles
Embedded styles
External stylesheet for standalone svg files
External stylesheets for inline svgs.

Here is a list of all SVG attributes that can be styled via CSS.

Now let's look at HOW CSS styles are applied.

Inline Styles

The first method: inline via the “style” attribute.

1
2
3

<circle 
cx="250" cy="250" r="200" 
style="fill: lightgreen; stroke: seagreen; stroke-width: 20" />

Embeded styles

CSS styles can be embedded within the SVG itself.

<svg width="500" height="500" viewbox="0 0 500 500">
   <style>
       #my-circle {
           fill: lightgreen;
           stroke: seagreen;
           stroke-width: 20;
       }
   </style>
   <circle 
        id="my-circle" 
        cx="250" cy="250" r="200" />
</svg>

stylesheets

CSS styles can be applied to Inline SVGs via a normal html page internal or external stylesheets.

<html
.
.
<link rel="stylesheet" href="myStyles.css">
<body>
   <svg width="500" height="500" viewbox="0 0 500 500">
   <circle id="my-circle" cx="250" cy="250" r="250" />
   </svg>
</body>

external stylesheet

Standalone svg files

External stylesheet

CSS styles can be applied to standalone svg files via an external stylesheet You’ll need to add the stylesheet reference to the beginning of the file:

1
2

<?xml-stylesheet type="text/css" href="myStyles.css" ?>
<svg width="500" height="500" viewbox="0 0 500 500">...

External stylesheet - @import

You can also reference an external stylesheet by using the @import statement in the svg’s style section

<svg width="500" height="500" viewbox="0 0 500 500">
 <style>
   @import url(myStyles.css);
 </style>
 .
 .
</svg>

Style hierarchy

The hierarchy for CSS styles is as follows:

(1) Inline Styles - top priority. Inline styles override all other styles.
(2) Embedded/External Styles - Can be overridden by inline styles.
(3) Presentation Attributes - lowest priority, overridden by both inline and embedded.external styles.

In the example below the inline style overrides both the “fill” presentation attribute and the fill, stroke, and stroke-width styles defined in the my-circle class in the myStyles.css external css file.

// myStyles.css

.my-circle {
fill: blue;
stroke: red;
stroke-width: 5;
}

<circle 
    class="my-circle" 
    cx="250" cy="250" r="200" 
    fill="purple" 
    style="fill: orange; stroke: seagreen; stroke-width: 20"/>

geometric attributes?

But what about geometric properties like cx, cy, width, r (radius) - can these also be styled via CSS?

If we try to create a CSS class to set a circle element's cx and cy on some browsers (like Firefox or Safari on a mac) we get a weird result.

<svg width="500" height="500" viewbox="0 0 500 500">
   <style>
       .geo-style{
           cx: 250;
           cy: 250;
       }
   </style>
   <circle class="geo-style" r="50" fill="purple" />   
</svg>

safari and firefox

chrome

Some browsers don't understand the svg's geometric properties in css, so the circle is just placed at 0, 0.

But when we add the px unit of measure, it magically works! Or it might not work then either, depending on your browser and/or operating system!

<svg width="500" height="500" viewbox="0 0 500 500">
   <style>
       .geo-style{
           cx: 250px;
           cy: 250px;
       }
   </style>
   <circle class="geo-style" r="50" fill="purple" />   
</svg>

firefox,chrome, and safari with units of measure (px) added to geometric properties

So the answer to our question: Can geometric properties be styled via CSS? Not at this time, at least not reliably.

The current version of the svg spec (1.1) does not allow geometric attributes to be styled via CSS. The next version of the spec, SVG 2.0, WILL allow for styling of geometric attributes. And while most browsers have already started implementing the spec, implementation is spotty and inconsistent at best, which means you'll see some odd behavior (like the style working with the 'px' units when these aren't required in the presentation attributes).

< Prev: Presentation Attributes Next: Colors >