title: How to style SVG with external CSS?
body: <p>I have several SVG graphics I'd like to modify the colors of via my external style sheets - not directly within each SVG file. I'm not putting the graphics in-line, but storing them in my images folder and pointing to them.</p>
  <p>I have implemented them in this way to allow tooltips to work, and I also wrapped each in an <code>&lt;a&gt;</code> tag to allow a link.</p>
  <pre><code>&lt;a href='http://youtube.com/...' target='_blank'&gt;&lt;img class='socIcon' src='images/socYouTube.svg' title='View my videos on YouTube' alt='YouTube' /&gt;&lt;/a&gt;
  </code></pre>
  <p>And here is the code of the SVG graphic:</p>
  <pre><code>&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
  &lt;?xml-stylesheet href=&quot;stylesheets/main.css&quot; type=&quot;text/css&quot;?&gt;
  &lt;!DOCTYPE svg PUBLIC &quot;-//W3C//DTD SVG 1.1//EN&quot; &quot;http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd&quot;&gt;
  
  &lt;svg version=&quot;1.1&quot; id=&quot;Layer_1&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; viewBox=&quot;0 0 56.69 56.69&quot;&gt;
  &lt;g&gt;
      &lt;path d=&quot;M28.44......./&gt;
  &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>
  <p>I put the following in my external CSS file (main.css):</p>
  <pre><code>.socIcon g {fill:red;}
  </code></pre>
  <p>Yet it has no effect on the graphic. I also tried <code>.socIcon g path {}</code> and <code>.socIcon path {}</code>.</p>
  <p>Something isn't right, perhaps my implementation doesn't allow external CSS modifications, or I missed a step? I'd really appreciate your help! I just need the ability to modify the colors of the SVG graphic via my external stylesheet, but I cannot lose the tooltip and link ability (I may be able to live without tooltips though).</p>