resize svg image insert with content: url()

Question

Ok, lo que obtuve es lo siguiente: múltiples imágenes svg con diferentes anchuras/alturas que se insertan en html a través de css. Quiero escalarlos todos al mismo ancho pero eso no funciona (al menos no en Safari, Chrome y 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'); } 

¿Cómo podría cambiar el tamaño de las imágenes SVG para que se visualizan con un ancho de 20 píxeles cada uno (pero no cambiar el SVG sí mismo)?

Answer 1

Si sabe cuáles serán las alturas, podría establecer las imágenes como fondos para los pseudo-elementos y declarar background-size: 20px auto;, pero necesitaría saber el tamaño exacto o más grande para la altura del psuedo -el elemento en sí.

Más allá de eso, no pude encontrar la manera de hacerlo funcionar completamente solo en CSS. Si tiene acceso a la codificación del lado del servidor, es posible que pueda abrir el archivo SVG y pescar los tamaños automágicamente.