CSS Support in SVG

ThorVG supports CSS in SVG since v0.8. There are three general ways to use CSS styling in an SVG file:

• Inline styling - supported in TVG since v0.8
• Internal CSS style sheets - currently under development
• External CSS style sheets - not supported yet

Inline styling

It's a method with the highest precedence - it overwrites the values set using the attributes and all other methods of CSS styling.

Example:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 20 20">
    <rect width="10" height="10" style="fill:blue; stroke: #3399ff" fill="red" stroke-width="3"/>
</svg>

The result should look as follows:

It's worth to notice, that the fill="red" attribute, as it has the lowest precedence, does not overwrite the one set in the style attribute.

Internal CSS style sheets

We are currently gradually introducing this method into TVG.

In the table below you can find the supported features, the ones that we plan to support and some that we can consider, especially on demand.

Within the internal CSS styling different selectors have different precedence - the more specific the selector is, the higher its precedence. For the selectors currently introduced into the TVG, starting with the one with the highest precedence:

• Type and class selector
• Class selector
• Type selector

Example:

In the svg file below you can see the example usage of each of mentioned selectors:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 100">
 <defs>
  <style>
    rect.mineStyle1 {
        fill: blue; stroke: #3399ff;
    }
    .mineStyle2 {
        fill: red; stroke: pink;
    }
    rect {
        fill: #00cc00; stroke: #99ff33; stroke-width: 5;
    }
  </style>
 </defs>
 
 <!-- type selector: a green rect -->
 <rect x="5"  y="5"  width="50" height="50" />
 
 <!-- type and class selector: a blue rect -->
 <rect x="45" y="25" width="50" height="50" class="mineStyle1" />
 
 <!-- class selector: a red shape -->
 <rect x="85" y="45" width="50" height="50" class="mineStyle2" />
 <circle cx="110" cy="70" r="15" class="mineStyle2" stroke-width="5"/>
 
 <!-- selector with the highest precedence overwrites the other ones: a blue rect -->
 <rect x="5" y="75" width="20" height="20" class="mineStyle1" class="mineStyle2" />
</svg>

The result should look as follows:

Progress:

Feature	Status
type selector tag	Done
class selector .name	Done
type+class selector tag.name	Done
styling inside CDATA block	Done
proper precedence	Done
define style after it is used	Done
id selector #id	Pending
gradients/stops styling support	Pending
combined selectors tag1 > tag2	Not Supported
style attributes (type, media, id)	Not Supported
geometry attributes (SVG2 only)	Not Supported
!important property	Not Supported
apply style to defs children nodes?	Not Supported

External CSS style sheets

Not supported in TVG (let us know in case you need it).