resize svg image inserted with content:url()

Question

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).

html:

<h4 class="before" id="foo">Foo</h4>
<h4 class="before" id="bar">Bar</h4>
<h4 class="before" id="foobar">Foobar</h4>

css:

.before:before { width: 20px; }
#foo:before { content:url('foo.svg'); }
#bar:before { content:url('bar.svg'); }
#foobar: before { content:url('foobar.svg'); }

How could I resize those svg images so that they are displayed with 20px width each (but don't change the svg itself)?

Answer 1

If you know what the heights are going to be, you could set the images as the backgrounds to the pseudo-elements and declare background-size: 20px auto;, but you'd need to know the exact size or larger for the height of the psuedo-element itself.

Beyond that, I wasn't able to find a way to make it work entirely just in CSS. If you have access to server-side coding, you might be able to open up the SVG file and fish out the sizes automagically.