Selecting a SVG #document with CSS
<p>I'm trying to add a fill to a .svg file from my stylesheet. I've embeded it as an object:</p>

<pre><code>&lt;object class="img-responsive" data="&lt;?php echo get_template_directory_uri(); ?&gt;/assets/white-icons/icon2-white.svg" type="image/svg+xml"&gt;
&lt;/object&gt;
</code></pre>

<p>I can fill using inspector, but when I try to select the SVG ID using my stylesheet it seems that it can't find the ID. My guess is that I need to access the SVG DOM instead of my main DOM. It looks like my SVG is in a sort of embedded DOM called #document. Do I need to change the way I'm saving out my SVG's to fix this? </p>

<p>Here's my SVG document:</p>

<pre><code>    &lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG    Version: 6.00 Build 0)  --&gt;
&lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt;
&lt;svg version="1.1" class="twitter" id="Layer_5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="20px" height="20px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve"&gt;
&lt;path  d="M18.071,4.914c-0.626,0.276-1.298,0.463-2.004,0.548c0.722-0.432,1.275-1.115,1.534-1.929
c-0.674,0.399-1.42,0.689-2.216,0.845c-0.635-0.678-1.542-1.101-2.545-1.101c-1.926,0-3.487,1.562-3.487,3.487
c0,0.274,0.029,0.54,0.09,0.794C6.546,7.414,3.976,6.027,2.254,3.915c-0.3,0.517-0.472,1.116-0.472,1.755
c0,1.208,0.616,2.276,1.551,2.903C2.763,8.555,2.225,8.396,1.753,8.137V8.18c0,1.69,1.203,3.101,2.798,3.42
c-0.292,0.082-0.6,0.123-0.918,0.123c-0.225,0-0.443-0.021-0.656-0.062c0.443,1.386,1.731,2.394,3.258,2.42
c-1.194,0.937-2.698,1.494-4.332,1.494c-0.281,0-0.559-0.016-0.832-0.048c1.543,0.988,3.377,1.566,5.346,1.566
c6.417,0,9.924-5.314,9.924-9.923c0-0.152-0.003-0.303-0.01-    0.452C17.013,6.228,17.605,5.612,18.071,4.914"/&gt;
 &lt;/svg&gt;
</code></pre>