title: Is it acceptable to use the fill attribute & style on an svg element?
body: <p><strike>In the <a href="https://svgwg.org/svg2-draft/struct.html#SVGElement" rel="nofollow noreferrer">svg2-draft specs</a> <code>fill</code> is not listed as one of the valid attributes of an <code>svg</code> element. </strike></p>
  
  <p>However <code>fill</code> is an inherited <a href="https://svgwg.org/svg2-draft/painting.html#FillProperty" rel="nofollow noreferrer">HTML property</a> and <a href="https://www.w3docs.com/learn-css/fill.html" rel="nofollow noreferrer">CSS property</a>, so it will be inherited by svg shapes. </p>
  
  <p><strong>Is it acceptable to use the <code>fill</code> attribute &amp;/or style on an <code>svg</code> element?</strong> </p>
  
  <p><strong>As opposed to using fill on the shapes (e.g. <code>&lt;path&gt;</code>) directly.</strong></p>
  
  <p><em>Stretch question:</em> Is it generally acceptable to use inheritable attributes/styles on any element regardless of whether it is a valid attribute/style (for that element) for the sole purpose of those attribute/styles being inherited to their intended child elements?</p>
  
  <p>For example: </p>
  
  <pre><code>&lt;svg fill="#a0a0a0"&gt;
    &lt;path d="M150 0 L75 200 L225 200 Z" /&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>or </p>
  
  <pre><code>&lt;svg class="SVG"&gt;
    &lt;path d="M150 0 L75 200 L225 200 Z" /&gt;
  &lt;/svg&gt;
  
  &lt;style&gt;
    .SVG { fill #a0a0a0; }
  &lt;/style&gt;
  </code></pre>