SVGIniziare con SVG


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:

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:

Semplice esempio di output SVG

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.

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.