SVG - Panoramica

Cos'è SVG?

  • SVG, Scalable Vector Graphics è un linguaggio basato su XML per definire la grafica vettoriale.

  • SVG ha lo scopo di visualizzare immagini sul Web.

  • Essendo immagini vettoriali, l'immagine SVG non perde mai qualità, indipendentemente da come viene ingrandita o ridimensionata.

  • Le immagini SVG supportano l'interattività e l'animazione.

  • SVG è uno standard W3C.

  • Altri formati di immagine come le immagini raster possono anche essere bastonate con immagini SVG.

  • SVG si integra bene con XSLT e DOM di HTML.

Vantaggi

  • Utilizza qualsiasi editor di testo per creare e modificare immagini SVG.

  • Essendo basate su XML, le immagini SVG sono ricercabili, indicizzabili e possono essere inserite in script e compresse.

  • Le immagini SVG sono altamente scalabili in quanto non perdono mai la qualità, indipendentemente dal modo in cui vengono ingrandite o ridimensionate

  • Buona qualità di stampa a qualsiasi risoluzione

  • SVG è uno standard aperto

Svantaggi

  • La dimensione del formato del testo è maggiore rispetto alle immagini raster formattate in binario.

  • Le dimensioni possono essere grandi anche per immagini piccole.

Esempio

Il seguente frammento XML può essere utilizzato per disegnare un cerchio nel browser web.

<svg width="100" height="100">
   <circle cx="50" cy="50" r="40" stroke="red" stroke-width="2" fill="green" />
</svg>

Incorpora l'XML SVG direttamente in una pagina HTML.

testSVG.htm

<html>
   <title>SVG Image</title>
   <body>
   
      <h1>Sample SVG Image</h1>
      
      <svg width="100" height="100">
         <circle cx="50" cy="50" r="40" stroke="red" stroke-width="2" fill="green" />
      </svg>
   
   </body>
</html>

Produzione

Apri textSVG.htm nel browser web Chrome. Puoi utilizzare Chrome / Firefox / Opera per visualizzare l'immagine SVG direttamente senza alcun plug-in. In Internet Explorer, sono necessari i controlli ActiveX per visualizzare le immagini SVG.

Come SVG si integra con HTML

  • L'elemento <svg> indica l'inizio dell'immagine SVG.

  • Gli attributi width e height dell'elemento <svg> definiscono l'altezza e la larghezza dell'immagine SVG.

  • Nell'esempio sopra, abbiamo usato un elemento <circle> per disegnare un cerchio.

  • Gli attributi cx e cy rappresentano il centro del cerchio. Il valore predefinito è (0,0). L'attributo r rappresenta il raggio del cerchio.

  • Altri attributi tratto e larghezza del tratto controllano il contorno del cerchio.

  • L'attributo fill definisce il colore di riempimento del cerchio.

  • Il tag </svg> di chiusura indica la fine dell'immagine SVG.