Are multiple permissions allowed in SVG documents?

I want to make sure that I follow the standards.
Are multiple defs allowed in an ONE SVG document?

And can nested svgs have defs?

<svg>
 <defs></defs>
 <svg>
  <defs></defs>
 </svg>
</svg>

I could not find anything in the specifications related to this

+6
source share
1 answer

Yes, it is allowed, but keep in mind that it idmust be unique throughout the document. The behavior 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>
Run codeHide result

+4
source

Source: https://habr.com/ru/post/1678062/


All Articles