title: Manipulating external svg file style properties with CSS
body: <p>I am trying to manipulate an external .svg file via CSS. </p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;body&gt;
      &lt;div class="mysvg"&gt;
      &lt;img src="decho.svg" alt="decho" width="200px"&gt;&lt;/img&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>div.mysvg img {
      opacity: .3;
      transition: opacity 1s linear 0s;
  }
      div.mysvg img:hover {
      opacity: 1;
  }
  </code></pre>
  
  <p>This code works for opacity, but not for <code>fill</code> or other svg specific attributes like <code>stroke</code>. I am aware I can't do that with an <code>img</code> tag, but I've been looking for hours and I can't find the correct way to do it with <code>svg</code> or <code>object</code>.</p>
  
  <p>So basically, my questions is, how do I achieve the same result as the code which I linked, but to be able to manipulate fill, stroke etc. properties and it must be an <strong>external file</strong>, not just an inline svg code pasted in the html.</p>
  
  <p>If someone is able to show me the correct way to do it, I'd be most grateful. Thanks.</p>
  
  <hr>
  
  <p><strong>EDIT:</strong></p>
  
  <p>I managed to do it by adding a css inside the .svg file itself. It must be right after the <code>svg</code> opening tag.</p>
  
  <pre><code>&lt;svg ...&gt;
  &lt;style type="text/css" media="screen"&gt;  
      &lt;![CDATA[  
      g {  
          fill: yellow;  
          stroke: black;  
          stroke-width: 1;
          transition: fill 1s linear 0s;
      }
      g:hover {
          fill: blue;
      }
      ]]&gt;  
  &lt;/style&gt; 
  &lt;g&gt;
      &lt;path ...&gt;
  &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>You also need to insert it as an <code>object</code> in the html, otherwise it won't work.</p>
  
  <pre><code>&lt;object data="decho.svg" type="image/svg+xml"&gt;
  </code></pre>
  
  <p>Hopefully this helps to someone looking for an answer like mine in future. This is what helped me <a href="http://www.hongkiat.com/blog/scalable-vector-graphic-css-styling/" rel="noreferrer">http://www.hongkiat.com/blog/scalable-vector-graphic-css-styling/</a>.</p>