How to use easily svg as icon?
<p>I don't understand the "usefulness" of svg as it is not easily modifiable with CSS or Jquery.
For example:</p>

<pre><code>&lt;object data="../headset.svg" width="30" height="25" type="image/svg+xml" class="svg svg-danger" id="mysvg"&gt;
</code></pre>

<p>Great I can decide the size but the the fill color. I want to reuse this svg multiple time inside the document.</p>

<p>With:
    var a=document.getElementById("mysvg").contentDocument;</p>

<p>I just get undefined.</p>

<p>The inside svg, that I don't want to hard code in my document:</p>

<pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 361.014 361.014" style="enable-background:new 0 0 361.014 361.014;" xml:space="preserve"&gt;
&lt;g&gt;
&lt;g id="Layer_5_47_"&gt;
&lt;path d="M331.035,126.94H318.01c-3.563,0-3.682-2.333-3.805-3.494C307.375,59.094,252.77,8.791,186.637,8.791h-12.26    c-65.644,0-119.929,49.56-127.409,113.229c-0.191,1.631-0.291,4.92-3.291,4.92H29.978C20.987,126.94,0,136.401,0,184.18v25.075    c0,35.436,20.987,43.609,29.978,43.609h43.584c8.991,0,16.347-7.356,16.347-16.347v-93.23c0-8.991-7.356-16.347-16.347-16.347    c0,0-2.052-0.18-1.529-3.835c7.192-50.319,50.129-89.313,102.344-89.313h12.26c51.86,0,94.912,38.418,102.2,88.288    c0.235,1.608,1.111,4.86-1.385,4.86c-8.991,0-16.347,7.356-16.347,16.347v93.23c0,8.991,7.356,16.347,16.347,16.347h8.184    c2.25,0,1.868,1.798,1.667,2.704c-6.667,30.104-21.637,64.256-55.238,64.256h-24.889c-2.54,0-3.167-1.861-3.65-2.743    c-4.032-7.367-11.851-12.364-20.841-12.364h-22.933c-13.118,0-23.753,10.634-23.753,23.753c0,13.119,10.635,23.752,23.753,23.752    h22.933c9.112,0,17.023-5.132,21.005-12.662c0.348-0.658,0.633-2.026,3.321-2.026h25.054c22.823,0,53.365-11.341,69.259-65.373    c1.694-5.758,3.068-11.496,4.187-17.026c0.154-0.761,0.25-2.27,2.625-2.27h12.9c8.991,0,29.978-8.174,29.978-43.609v-25.075    C361.013,137.082,340.026,126.94,331.035,126.94z" /&gt;
    &lt;/g&gt;
&lt;/g&gt;

&lt;/svg&gt;
</code></pre>

<p>1/ How can I color it in red with jquery or orange? I just don't get it.
2/ Why svg is not easier to use?
Thanks,</p>

<p>Stef.</p>