How to set size of SVG image in :before pseudo-class?

Question

I want to display an image in a CSS :before element.

.withimage:before {   content: url(path/to/image.svg);   display: block;   height: 20px;   width: 20px; } 

The problem is, the height and width are applied to the element, but the SVG doesn't scale down. How do I apply the sizes to the actual element created by before?

Plnkr example: https://plnkr.co/edit/UgryaObojs6PCU579oGY

Answer 1

You can use svg as background-image:

.withimage:before {   content: "";   display:block;   height:125px;   width:125px;   background-size: 125px 125px;   background-image: url(test.svg);   background-repeat: no-repeat; } 

Here is example

Also you can try use this one:

.withimage:before {   content: url("data:image/svg+xml; utf8, <svg.. code here</svg>");     display:block;     height:20px;     width:20px; } 

Answer 2

Scale transform worked for me:

::before {     content: url(path/to/image.svg); // source image is 24px wide     transform: scale(0.5);           // will be rendered 12px wide   }