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>
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With