title: Can you define multiple definitions inside a single defs tag in SVG?
body: <p>Is it OK to use multiple definitions inside a <em>single</em> def tag at the root of the document? </p>
  
  <p>Example. Notice all of the gradients <strong><em>inside</em></strong> the <strong><em>defs</em></strong> tag. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
    &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Document&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;svg width="0" height="0"&gt;
         &lt;defs&gt;
           &lt;linearGradient id="Gradient01"&gt;
             &lt;stop offset="20%" stop-color="#39F" /&gt;
             &lt;stop offset="90%" stop-color="#F3F" /&gt;
           &lt;/linearGradient&gt;
           &lt;linearGradient id="Gradient02"&gt;
             &lt;stop offset="00%" stop-color="#3F3" /&gt;
             &lt;stop offset="50%" stop-color="#39F" /&gt;
             &lt;stop offset="90%" stop-color="#F55" /&gt;
           &lt;/linearGradient&gt;
         &lt;/defs&gt;
      &lt;/svg&gt;
      &lt;svg width="800px" height="300px"
             xmlns="http://www.w3.org/2000/svg"&gt;
  
          &lt;rect x="10" y="10" width="200" height="20" 
                fill="url(#Gradient01)" /&gt;
          &lt;svg width="380px" height="330px"      
               xmlns="http://www.w3.org/2000/svg"&gt;
  
          &lt;rect x="10" y="50" width="200" height="20" 
                fill="url(#Gradient02)" /&gt;
          &lt;/svg&gt;
        &lt;/svg&gt;
      &lt;/body&gt;
    &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>