En realidad si que puede utilizar un svg
dentro del atributo content
de un elemento :before
. Sin embargo, no lo podrás añadir directamente y tendrá que ser a través de una url
.
Te dejo dos formas:
Añadiendo el svg como fichero externo
Puedes importar el svg
con una url dentro de tu atributo content
.
#midiv:before {
content: url("fichero.svg");
}
donde fichero.svg
sería el fichero en el que tuvieras contenido tu svg
.
Añadiendo el svg como una URI
En el caso de que no quisieras utilizar un fichero externo, puedes añadir tu svg como una data URI. Esto te permitirá tratar tu svg
como si fuera una url.
Ejemplo:
#midiv{
background-color: green;
width: 100px;
height: 100px;
}
#midiv:before{
content: url("data:image/svg+xml;charset=UTF-8, <svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='100' width='100'><circle cx='50' cy='50' r='40' stroke='black' stroke-width='3' fill='red' /></svg>");
}
<div id="midiv"></div>