Inline SVG, CSS and defs: Can I use Part 3

Previous: Inline SVG: Can I use Part 2

One of the great feature of SVG is <defs> or definitions, that allows graphic reusing.
Take a star with path

<path d="M46.19 9.21l1.96 7.76 7.98-.54-6.77 4.26 2.97 7.43-6.14-5.12-6.14 5.12 2.97-7.43-6.77-4.26 7.98.54z" id="star">

We can reuse the code of star and make some transformation (move, scale, rotate) for basic figure.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="160" height="152">
  <defs>
    <path id="star" d="M46.19 9.21l1.96 7.76 7.98-.54-6.77 4.26 2.97 7.43-6.14-5.12-6.14 5.12 2.97-7.43-6.77-4.26 7.98.54z"/>
  </defs>
    <use xlink:href="#star"/>
    <use xlink:href="#star" x="90" y="20" />
    <use xlink:href="#star" x="14" y="80" />
</svg>

What about browser support?

For test we use same page and the results are gladly equals to previous test.

Test are taken with inlined SVG (inside HTML as in previous tests).

The results for desktop:

Chrome: 38, ..., 16 *

Internet Explorer: 11, 10, 9,  8, 7, 6

Firefox: 31, ..., 4, 3.6, 3.5

Safari: 8, 7, 6.1, 5.1

* - green - works as expected, red - does not support SVG

The result for mobile devices:

Chrome Mobile: 37, ..., 31

Android Browser: 4.0, 2.2

Mobile Safari: 5.1, 5.02, 4.0.5, 4.0.4

Combining it with previous test we can make a rule:
If browsers supports SVG then it supports <defs> definitions.

There is convenient diagram for browser support: Can I use SVG.  And our tests confirm there topicality.


Next section: External SVG using Part 4