SVG: Use Attributes or CSS to style?

Question

In HTML it is recommended to seperate Content from Style, thus you should create external CSS-Files for your styles. As I am just getting started with SVG I now wonder: Does this rule also apply for SVG?

What is considered better code style?

• <circle fill="yellow" />
• or <circle style="fill: yellow;" />

Answer 1

I arrived here because I was trying to remember whether attributes or styles have greater precedence. This is one practical reason why you'd want one over another.

Attributes get applied as "presentation hints", as if they were the first of the cascading style sheets. In other words, this gives them lowest precedence.

Thus the precedence, from lowest to highest, is

1. attributes
2. CSS style sheets
3. inline styles

It's a little confusing that an inline style has much greater precedence than the attribute it's next to. (I keep having to look this up!)

There aren't going to be any new presentation attributes, and we are encouraged to use CSS styling instead, but it doesn't sound like presentation attributes are going away anytime soon.

More detail can be found in the Presentation Attributes section of the Styling chapter of the SVG standard.

Answer 2

I would generally prefer <circle fill="yellow" /> to <circle style="fill: yellow;" /> because it's shorter and easily to manipulate with, for example, getAttributeNS(null, "fill").

But over that I would prefer using a separate style element, just as with HTML, e.g:

  <style>     circle{       fill: yellow;     }   </style>     

Which has all the same advantages of using CSS, such as making it easy to change the stlye of lots of elements at once.

You can also put your CSS in an external file and add:

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

Before the svg element.