title: Where to put <style> inside SVG?
body: <p>Sorry if that might come an opinion-based, but I hope there's a right answer..</p>
  
  <p>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.</p>
  
  <p>The first style is defined inside <code>defs</code> tag and the second styles is defined right inside the <code>svg</code> tag.</p>
  
  <p>Both styles are successfully displayed on the circle (at least in Chrome they do, didn't check other browsers though).</p>
  
  <p>My question is which way is more standard?</p>
  
  <p>I think keeping styles in <code>defs</code> keeps the whole SVG more tidy. However, one can claim that I should not use <code>defs</code> tag since no one references the style with <code>&lt;use&gt;</code></p>
  
  <p>Thanks!</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;svg height="100" width="100"&gt;
      &lt;defs id="someDefs"&gt;
          &lt;style id="style1"&gt;
              .blue-fill {
                  fill : blue;
              }
          &lt;/style&gt;
      &lt;/defs&gt;
      &lt;style id="style2"&gt;
          .red-stroke {
              stroke : red;
              stroke-width : 12
          }
      &lt;/style&gt;
      &lt;circle cx="50" cy="50" r="40" class="blue-fill red-stroke" /&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>