SVG Inline HTML5

HTML5 supporta SVG inline.

Cos'è SVG?

  • SVG sta per Scalable Vector Graphics (Grafica Vettoriale Scalabile)
  • SVG viene utilizzato per definire grafica vettoriale basata su rete
  • L'SVG utilizza il formato XML per definire i grafici
  • Le immagini SVG non perdono qualità grafica quando vengono ingrandite o ridotte di dimensioni
  • L'SVG è uno standard del World Wide Web Consortium

Vantaggi dell'SVG

In confronto ad altri formati di immagine (ad esempio JPEG e GIF), l'uso dell'SVG offre i seguenti vantaggi:

  • Le immagini SVG possono essere create e modificate tramite editor di testo
  • Le immagini SVG possono essere cercate, indicizzate, scriptate o compresse
  • L'SVG è scalabile
  • Le immagini SVG possono essere stampate a alta qualità in qualsiasi risoluzione
  • L'SVG può essere ingrandito senza perdere qualità dell'immagine

Supporto del browser

Internet Explorer 9, Firefox, Opera, Chrome e Safari supportano SVG inline.

Inserire SVG direttamente nelle pagine HTML

In HTML5, è possibile inserire direttamente gli elementi SVG nelle pagine HTML:

Esempio

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

</body>
</html>

Prova da solo

Risultato:

Corso SVG

Per imparare di più sull'SVG, visita il nostro Corso SVG.