Menu
I want to make sure that I follow the standards.
Is it allowed to have multiple defs in ONE SVG document?
And are nested svgs allowed to have defs?
<svg>
<defs></defs>
<svg>
<defs></defs>
</svg>
</svg>
I couldnt find anything in the specs related to this
738
The <defs> element is used to store graphical objects that will be used at a later time. Objects created inside a <defs> element are not rendered directly. To display them you have to reference them (with a <use> element for example).
An SVG document fragment can stand by itself as a self-contained file or resource, in which case the SVG document fragment is an SVG document, or it can be embedded inline as a fragment within a parent HTML or XML document. 'svg' elements can appear in the middle of SVG content.
Yes it is allowed, but bear in mind that ids must still be unique within the entire document. The behaviour of the example below is undefined/browser-dependent:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<svg width="800px" height="300px"
xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="Gradient01">
<stop offset="20%" stop-color="#39F" />
<stop offset="90%" stop-color="#F3F" />
</linearGradient>
</defs>
<rect x="10" y="10" width="60" height="10"
fill="url(#Gradient01)" />
<svg width="380px" height="330px"
xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="Gradient01">
<stop offset="50%" stop-color="#39F" />
<stop offset="90%" stop-color="#F3F" />
</linearGradient>
</defs>
<rect x="250" y="250" width="160" height="110"
fill="url(#Gradient01)" />
</svg>
</svg>
</body>
</html>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