Question

The SVG spec talks about Properties.. what are these? Can they be declared as attributes inline with the element? .. or can they only be declared in CSS stylesheets?

Answer 1

Standards compliant are both. There are several reasons why to use the one or the other.

• The spec says, that CSS style declared properties always take precedence before the ones declared in XML attributes
• On the other hand, if you use attributes, you don’t have the hassle to parse CSS declarations
• you can also declare an external stylesheet and style yur SVG from there

Styling properties, in short, are all these props, that are necessary for a certain rendering result, mostly related to color.

Equivalent examples:

<svg xmlns="http://www.w3.org/2000/svg">
  <rect fill="red"/>
<svg>

---

<svg xmlns="http://www.w3.org/2000/svg">
  <rect style="fill: red"/>
<svg>

---

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <style type="text/css">
    #fillme { fill: red; }
    </style>
  </defs>
  <rect id="fillme"/>
<svg>

Just note, that these CSS declarations are not valid in the sence of CSS specs 1 through 3.

Cheers,