Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Where to put <style> inside SVG?

Tags:

Sorry if that might come an opinion-based, but I hope there's a right answer..

Where an inline CSS style should be placed inside an SVG document? In the example I provide below I have defined two styles and a circle that uses them.

The first style is defined inside defs tag and the second styles is defined right inside the svg tag.

Both styles are successfully displayed on the circle (at least in Chrome they do, didn't check other browsers though).

My question is which way is more standard?

I think keeping styles in defs keeps the whole SVG more tidy. However, one can claim that I should not use defs tag since no one references the style with <use>

Thanks!

<svg height="100" width="100">
    <defs id="someDefs">
        <style id="style1">
            .blue-fill {
                fill : blue;
            }
        </style>
    </defs>
    <style id="style2">
        .red-stroke {
            stroke : red;
            stroke-width : 12
        }
    </style>
    <circle cx="50" cy="50" r="40" class="blue-fill red-stroke" />
</svg>
like image 457
mati.o Avatar asked Jun 22 '17 10:06

mati.o


1 Answers

It doesn't matter. Neither approach is "more standard". <style> elements are not renderable anyway, so there is no real need to put them in the <defs> section

As commented by Paul LeBeau.

After reading this article about style on MDN, that shows an example of a style simply under the SVG root, I am more convinced it is correct to put <style> there rather than under <defs>.

Also, since <defs> tag is indeed for reusable graphical elements that should be rendered, and <style> is not a renderable element, there's no point keeping it there.

like image 157
mati.o Avatar answered Sep 29 '22 07:09

mati.o