How to show a scaled svg in pseudo element?

Question

I want to display an .svg file within a pseudo element in CSS.

.commit-status:before {
    content: url('git.svg');
    margin-right: 7px;
    font-family: 'FontAwesome';
    font-size: 100%;
}

I converted this .eps file to an .svg with Inkscape.
This is the output. I think this is a valid conversion.

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   width="114.8625"
   height="114.8625"
   id="svg3031"
   xml:space="preserve"><metadata
     id="metadata3037"><rdf:RDF><cc:Work
         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
     id="defs3035" /><g
     transform="matrix(1.25,0,0,-1.25,0,114.8625)"
     id="g3039"><g
       transform="scale(0.1,0.1)"
       id="g3041"><path
         d="M 901.547,500.352 500.355,901.527 c -23.093,23.11 -60.566,23.11 -83.691,0 L 333.363,818.211 439.039,712.535 c 24.559,8.293 52.723,2.727 72.293,-16.847 19.688,-19.696 25.207,-48.102 16.699,-72.75 L 629.887,521.094 c 24.648,8.496 53.066,3.004 72.754,-16.711 27.5,-27.492 27.5,-72.059 0,-99.574 -27.52,-27.516 -72.078,-27.516 -99.61,0 -20.683,20.703 -25.801,51.097 -15.312,76.582 l -95,94.992 0,-249.969 c 6.699,-3.32 13.027,-7.742 18.613,-13.312 27.5,-27.497 27.5,-72.059 0,-99.598 -27.5,-27.488 -72.09,-27.488 -99.57,0 -27.5,27.539 -27.5,72.101 0,99.598 6.797,6.789 14.668,11.925 23.066,15.363 l 0,252.281 c -8.398,3.438 -16.25,8.531 -23.066,15.367 -20.828,20.821 -25.84,51.395 -15.157,76.977 L 292.426,777.285 17.3281,502.211 c -23.10544,-23.129 -23.10544,-60.602 0,-83.711 L 418.539,17.3242 c 23.098,-23.10545 60.559,-23.10545 83.691,0 L 901.547,416.641 c 23.117,23.113 23.117,60.605 0,83.711"
         id="path3043"
         style="fill:#100f0d;fill-opacity:1;fill-rule:nonzero;stroke:none" /></g></g></svg>

I read about the viewBox element, removed the height and with elements and added viewBox="0 0 114.8625 114.8625". Also I used background-image and background-sizeas here suggested.

Answer 1

You should be able to use background and background-size to scale the image. You need to set the size of the pseudo element and make sure it has a display type where you can set width and height, like display: inline-block or display: block.

DEMO

.commit-status:before {  
    content: " ";
    background: url('http://upload.wikimedia.org/wikipedia/commons/3/34/Red_star.svg');
    background-size: 10px;
    background-size: contain;
    width: 10px;
    height: 10px;
    display: inline-block;
}