title: resize svg image inserted with content:url()
body: <p>Ok, what I got is the following: multiple svg images with different widths/heights that are inserted into html via css. I want to scale them all to the same width but that does not work (at least not in Safari, Chrome and Firefox).</p>
  
  <p><strong>html:</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;h4 class="before" id="foo"&gt;Foo&lt;/h4&gt;
  &lt;h4 class="before" id="bar"&gt;Bar&lt;/h4&gt;
  &lt;h4 class="before" id="foobar"&gt;Foobar&lt;/h4&gt;
  </code></pre>
  
  <p><strong>css:</strong></p>
  
  <pre class="lang-css prettyprint-override"><code>.before:before { width: 20px; }
  #foo:before { content:url('foo.svg'); }
  #bar:before { content:url('bar.svg'); }
  #foobar: before { content:url('foobar.svg'); }
  </code></pre>
  
  <p>How could I resize those svg images so that they are displayed with 20px width each (but don't change the svg itself)?</p>