I'd like to have one <svg> tag in my page that includes all my SVG definitions that I'll be using on other SVG elements.
Something like this:
<html>
<head>
<svg>
<defs>
<filter id="shadow1">
<feDropShadow dx="3" dy="7" stdDeviation="2"/>
</filter>
</defs>
</svg>
</head>
<body style="display: flex">
<svg viewBox="0 0 100 100" width="100">
<path d="M0,0 L50,50" stroke="red" filter="url(#shadow1)" />
</svg>
</body>
</html>This works, but the problem is that the browser renders the <svg> tag that's in the <head> as if it was inside the body.
If I set width=0 and height=0 on the <svg> tag, it disappears but it's still a child element of the <body>.
Is it possible to have an <svg> tag with definitions only but outside the page's <body>?
Or a least some way of telling the browser that the <svg> element is purely declaratory and not meant to be part of the visible area of the document.
P.S.: I don't want to use and external .svg file because the definitions inside are dynamic and depend on the page being viewed.
No, SVGElement (
<svg>) is not part of the meta-data contents, only content-type allowed in<head>. It must be a descendant of the<body>.But you can place it absolutely with CSS, set its z-index to -1, set its size attributes to 0 and it would not be rendered.