- Learn
- SVG e CSS, la guida
- Includere i CSS per SVG
Includere i CSS per SVG
Le immagini SVG possono essere create con un semplice editor di testo, proprio come i documenti HTML. E questa non è la sola analogia tra SVG e HTML: in entrambi i casi possiamo modificare le caratteristiche grafiche degli elementi attraverso i fogli di stile.
L’analogia va comunque specificata. Infatti, il rapporto tra HTML e CSS è chiaro e definito, ed è il rapporto tra struttura e presentazione della pagina. Nel caso di SVG, invece, il rapporto non è netto, dato che la funzione del linguaggio vettoriale è quello di creare elementi grafici, che normalmente vengono stilizzati attraverso gli attributi degli elementi. Eppure, dall’interzione delle due tecnologie, possono nascere opportunità inaspettate.
Fogli di stile inline
Esattamente come avviene per i documenti HTML, anche per SVG i fogli di stile possono essere esterni o interni al documento. All’interno del documento, in modalità inline, le proprietà CSS vengono dichiarate tramite l’attributo style
:
<circle
cx="60" cy="60" r="50"
style="fill: #cd3512; fill-opacity: 1; stroke: #000000; stroke-width: 4; stroke-opacity: 1" />
Fogli di stile interni
Sempre all’interno del documento SVG, le proprietà possono essere dichiarate all’interno dell’elemento style
:
<style>
<![CDATA[
.circle {
fill: #cd3512;
fill-opacity: 1;
stroke: #000000;
stroke-width: 4;
stroke-opacity: 1;
}
]]>
</style>
NOTA: Il W3C raccomanda di inserire sempre il costrutto CDATA
, dato che le dichiarazioni CSS possono contenere caratteri come >
, che possono generare conflitti con il parser SVG.
Fogli di stile esterni
Infine, gli stili possono essere dichiarati in un file .css esterno. In questo caso, il foglio di stile va incluso nel file SVG tramite l’istruzione xml-stylesheet
, da collocare prima dell’elemento svg
:
<?xml version="1.0" standalone="no"?>
<?xml-stylesheet href="style.css" type="text/css"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200" viewBox="0 0 1000 500">
Se vuoi aggiornamenti su CSS inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
I Video di HTML.it
UDOO, la board italiana con Linux e Arduino
Luca Pisani ci mostra la nuova board UDOO, un progetto che mette insieme una macchina linux un arduino e fornisce […]