Iniziamo dunque la nostra guida su SVG andando ad analizzare la struttura di un file SVG:
<?xml version="1.0" encoding="iso-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//Dtd SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/Dtd/svg11.dtd">
<svg width="300" height="200"
version="1.1" xmlns="http://www.w3.org/2000/svg">
<text x="10" y="100"
style="fill:red;font-family:times;font-size:18">
Primo esempio di SVG
</text>
</svg>Diamo adesso un'occhiata più in dettaglio al nostro file di esempio analizzandolo riga per riga. Come nel caso di un file HTML, un file SVG è costituito da una serie di marcatori, chiamati tag e indicati tra le parentesi angolate (<>), che costituiscono gli elementi che formano l'immagine SVG.
È possibile associare a ciascun tag SVG un determinato valore o caratterizzarne l'aspetto e il comportamento mediante l'uso di particolari attributi.
SVG è un linguaggio di grafica basato su XML e questo appare evidente fin dalla prima riga del nostro esempio. Infatti in questa riga troviamo l'istruzione che dichiara che il file in questione è un file XML conforme alla versione 1.0.
Nella seconda riga del nostro esempio troviamo la dichiarazione del tipo di documento. tramite questo comando noi informiamo il programma che si occuperà di visualizzare la nostra immagine che il file SVG è stato scritto seguendo le regole indicate nella versione 1.1 del linguaggio.
Nella terza riga troviamo la dichiarazione dell'elemento principale di un file SVG. Come nel caso del tag <html>, per le pagine web, che contiene tutti gli elementi della pagina, il tag <svg> è il tag che contiene tutti gli elementi grafici della nosta immagine. Per questo motivo è detto elemento root (radice) del documento.
Vediamo adesso il significato degli attributi del tag <svg> utilizzati in questo esempio.
Gli attributi width ed height indicano quella che sarà la dimensione dell'immagine (nel nostro caso si tratta di un'immagine di grandezza 300x200 pixel) mentre l'attributo version indica la versione di SVG che si sta utilizzando (nel nostro caso la versione 1.1). L'attributo xmlns serve ad indicare il namespace a cui fanno riferimento i tag del file SVG. In generale la dichiarazione del namespace, in un documento XML, indica a quale linguaggio appartengono i tag utilizzati all'interno del file. Nel nostro caso abbiamo dichiarato che tutti i tag ed i loro attributi appartengono alla sintassi di SVG.
Nella quarta riga troviamo la dichiarazione dell'unico elemento grafico che contiene la nostra immagine di esempio: un elemento testuale. Il nostro esempio conterrà quindi solamente la scritta "Primo esempio di SVG" e questa scritta, di colore rosso, sarà posizionata con la prima lettera ad una distanza di 10 pixel dal bordo destro dell'immagine e ad una distanza di 100 pixel dal bordo superiore dell'immagine. La posizione della scritta all'interno dell'immagine
è specificata mediante gli attributi x e y del tag <text> mentre il colore, il font della scritta e la sua grandezza sono indicati dall'attributo style.
Se siete curiosi di vedere come viene visualizzato questo esempio dal vostro browser dovete semplicemente salvare il codice dell'esempio in un file con estensione ".svg" (ad esempio potreste chiamarlo "primo-esempio.svg") ed aprire il file SVG con il vostro browser.
Quello che dovreste ottenere è una bella una scritta rossa come quella mostrata in figura:
Sicuramente non è un esempio molto spettacolare ma è utile per farvi capire meglio cos'è un file SVG. Nel corso della guida affronteremo con più cura la descrizione dei tag SVG e dei loro attributi.
Un immagine SVG può anche essere inserita all'interno di una pagina HTML, come fate con un'immagine Gif o Jpeg, utilizzando il tag <object> al posto del tag <img>. Per inserire il nostro esempio all'interno di una pagina HTML dovete aggiungere questa riga nel punto in cui volete visualizzare l'immagine SVG:
<object width="300" height="200" data="primo-esempio.svg" type="image/xml+svg">
Scaricate il plugin SVG per visualizzare l'immagine
</object>Con questo tag indicate al browser di visualizzare un'immagine di tipo SVG chiamata "primo-esempio.svg" di grandezza 300x200 pixel. Il testo contenuto all'interno del tag <object> è la scritta che verrà visualizzata dal browser qualora non fosse in grado di visualizzare l'immagine SVG (perché ad esempio non è stato correttamente installato il plugin).
Alcuni browser non interpretano in maniera corretta il tag <object> e preferiscono invece il tag <embed>. Quindi in questo caso il nostro esempio diventa:
<embed src="primo-esempio.svg" width="300" height="200" type="image/xml+svg">