HTML and CSS Reference
In-Depth Information
il documento SVG contiene gli elementi di disegno e di testo che rappresentano
l'immagine;
i tag, in modo simile all'HTML, sono auto descrittivi e rendono comprensibile il mar-
kup, anche aprendo il file con un editor di testo.
L'uso della sintassi XML fa sì che il documento possa essere trattato con molteplici stru-
menti, come designer dedicati alle immagini vettoriali, come Adobe Illustrator, Corel Draw
o Open Office, oppure strumenti in grado di esportare in SVG, come Microsoft Visio.
Sempre grazie alla sintassi XML, un documento SVG gode degli stessi benefici di una
pagina HTML, perché può essere indicizzato dai motori di ricerca (cosa che i più diffusi
bot già fanno) e dà significato agli elementi, poiché questi possono avere un id, contenuti
testuali e metadati.
Un file SVG può essere compresso attraverso
gzip
, adatto per stream testuali, e si iden-
tifica con l'estensione
.svgz
. Con HTML5, inoltre, un documento SVG può essere inseri-
to all'interno di una pagina, permettendo di mischiare markup rappresentativo di informa-
zioni con markup dedicato alle figure, senza che questo debba rispettare obbligatoriamente
la sintassi XML, ma semplicemente le specifiche SGML, come in HTML5.
Nell'esempio 10.2
possiamo vedere due rettangoli inseriti all'interno di una pagina che
contiene anche un tag
h1
.
Esempio 10.2
<!DOCTYPE html>
<html>
<head>
<title>Esempio</title>
</head>
<body>
<h1>SVG</h1>
<svg viewBox="0 0 100 100">
<rect fill="red" width="50" height="50" />
<rect fill="gray" x="25" y="25" width="50" height="50"
/>
</svg>
</body>
</html>
