Forum libero

Se in una pagina web inserisco

<p><svg width="500px" height="500px"><circle cx="100" cy="100" r="100" fill="#1fa3ec"></circle></svg></p>

compare un cerchio azzurro.

Se volessi metterlo come sfondo alla pagina via CSS, come fare?

Non avendone idea ho provato empiricamente le seguenti soluzioni, ma nessuna ottiene il risultato.

1. Creo un file circle.svg contenente

<svg width="500px" height="500px"><circle cx="100" cy="100" r="100" fill="#1fa3ec"></circle></svg>

e specifico

background-image: url('../img/circle.svg');

(con una JPG invece funziona).

2. Direttamente

background-image: url('data:image/svg;utf8,<svg width="500px" height="500px"><circle cx="100" cy="100" r="100" fill="#1fa3ec"></circle></svg>');

Cercando con Google i risultati sono inquinati da una marea di pagine che spiegano come usare CSS per stilizzare gli elementi di un SVG, invece che come incorporare un SVG centro un foglio di stile.