SVG Tutorial
Iniziare con SVG
Ricerca…
Osservazioni
Scalable Vector Graphics (SVG) è uno standard W3C per il disegno di immagini vettoriali.
Ecco un semplice file SVG standalone:
<svg xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="25" fill="blue"/>
</svg>
SVG può anche essere incorporato in HTML, nel qual caso l'attributo xmlns non è richiesto.
Altri elementi grafici sono:
-
<line> -
<ellipse> -
<path> -
<polygon>e<polyline> -
<text>inclusi elementi<tspan>come<tspan>e<textPath>
Il CSS è usato per lo styling sebbene non tutte le proprietà CSS si applichino a SVG e SVG stesso definisce alcune proprietà specifiche come il fill e il stroke che non sono usati altrove.
Le forme possono essere riempite con gradienti o motivi e si possono ottenere effetti raster aggiuntivi usando i filtri.
Il ritaglio è disponibile utilizzando gli elementi grafici sopra indicati come percorsi di clip.
Riguardo alle versioni dello standard SVG W3C:
- La versione corrente è SVG 1.1 (Seconda edizione)
- Il W3C sta attualmente lavorando su una bozza di SVG 2
Versioni
| Versione | Data di rilascio |
|---|---|
| 1.0 | 2001/09/04 |
| 1.1 Prima edizione | 2003/01/14 |
| 1.2 Piccolo | 2008-12-22 |
| 1.1 Seconda edizione | 2011-08-16 |
Inline SVG
Inline SVG consente al markup SVG, scritto in HTML, di generare grafica nel browser.
Quando si utilizza SVG in linea, un DOCTYPE non è strettamente richiesto. Invece, solo i <svg> apertura e chiusura insieme a un viewBox oa attributi di larghezza e altezza saranno sufficienti:
<svg width="100%" height="100%">
<!-- SVG elements go here -->
</svg>
Il frammento <svg> sopra agisce sia come contenitore sia come elemento strutturale. Questo frammento stabilisce il proprio sistema di coordinate.
Di seguito è riportato un esempio di rendering di un frammento SVG con alcuni contenuti. Produrrà un rettangolo con "Hello World!" testo al suo interno.
<svg width="50%" viewBox="0 0 10 10">
<rect x="1" y="1" width="5" height="3" fill="teal" />
<text x="2" y="2" font-family="Palatino, Georgia, serif" font-size="3%" font-weight="bold" fill="white">Hello World!</text>
</svg>
Risultato:
SVG come ![]()
È possibile eseguire il rendering dei contenuti di un file SVG come immagine all'interno di un documento HTML utilizzando un tag <img> . Per esempio:
<img src="my_svg_file.svg" alt="Image description">
Per impostazione predefinita, le dimensioni dell'immagine verranno visualizzate in base alle proprietà width e height specificate nel file SVG a cui si fa riferimento nell'attributo src .
Vale la pena notare le varie limitazioni inerenti a questo approccio:
- Il supporto del browser, sebbene buono, non include Internet Explorer 8 e versioni precedenti, né Android 2.3 e versioni precedenti.
- Non è possibile assegnare uno stile ai singoli elementi contenuti nel file SVG usando CSS che è esterno al file SVG. Tutto il CSS deve essere all'interno del file immagine stesso.
- JavaScript non verrà eseguito.
- L'immagine deve essere completa in un singolo file. Ad esempio, se il file SVG contiene immagini raster, quelle immagini interne devono essere codificate come URL di dati.
SVG come immagine di sfondo
È possibile visualizzare un file SVG all'interno di un documento HTML, specificandolo come immagine di sfondo in CSS. Per esempio:
.element {
background-size: 100px 100px;
background: url(my_svg_file.svg);
height: 100px;
width: 100px;
}
Se le dimensioni specificate nel file SVG sono maggiori delle dimensioni dell'elemento HTML, potrebbe essere opportuno specificare la proprietà background-size per ridimensionare l'SVG in modo che si adatti al suo elemento.
Come con l'utilizzo di SVG come <img> , vale la pena notare alcune limitazioni con questo approccio:
- Il supporto del browser non include Internet Explorer 8 e versioni precedenti, né Android 2.3 e versioni precedenti.
- Non è possibile assegnare uno stile ai singoli elementi contenuti nel file SVG usando CSS che è esterno al file SVG. Tutto il CSS deve essere all'interno del file immagine stesso.