Un esempio SVG

SVG è scritto in XML.

Esempio SVG

Esempio seguente è un esempio di file SVG semplice. I file SVG devono essere salvati con l'estensione .svg:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>

Visualizza esempio (valido solo per i browser che supportano SVG)

(Per visualizzare il codice sorgente SVG, apri questo esempio e fai clic con il tasto destro del mouse nella finestra. Seleziona "Visualizza codice Sorgente".)

Spiegazione del codice:

La prima riga contiene la dichiarazione XML. Presta attenzione all'attributo standalone! Questo attributo determina se questo file SVG è "indipendente" o contiene riferimenti a file esterni.

standalone="no" significa che il documento SVG farà riferimento a un file esterno - in questo caso, il file DTD.

Le righe due e tre fanno riferimento a questo DTD SVG esterno. Il DTD si trova all'indirizzo “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”. Il DTD si trova nel W3C e contiene tutti gli elementi SVG consentiti.

Il codice SVG inizia con l'elemento <svg>, inclusi il tag di apertura <svg> e il tag di chiusura </svg>. Questo è l'elemento radice. Le proprietà width e height possono impostare la larghezza e l'altezza di questo documento SVG. L'attributo version può definire la versione SVG utilizzata, mentre l'attributo xmlns definisce lo spazio dei nomi SVG.

L'elemento <circle> SVG viene utilizzato per creare un cerchio. Le proprietà cx e cy definiscono le coordinate x e y del centro del cerchio. Se queste proprietà vengono ignorate, il punto di partenza viene impostato su (0, 0). L'attributo r definisce il raggio del cerchio.

L'attributo stroke e stroke-width controllano come visualizzare il contorno della forma. Impostiamo il contorno del cerchio su 2px di larghezza, con bordo nero.

L'attributo fill imposta il colore all'interno della forma. Impostiamo il colore di riempimento su rosso.

Il ruolo del tag di chiusura è quello di chiudere l'elemento SVG e il documento stesso.

Nota:Tutti i tag aperti devono avere un tag di chiusura corrispondente!