SVG Inline HTML5

HTML5 supporta l'SVG inline

Cos'è l'SVG?

  • SVG sta per Scalable Vector Graphics (Grafici Vettoriali Scalabili)
  • SVG viene utilizzato per definire grafici vettoriali basati su reti
  • L'SVG utilizza il formato XML per definire i grafici
  • Le immagini SVG non perdono qualità grafica quando ingrandite o ridotte di dimensione
  • L'SVG è uno standard del World Wide Web Consortium

Vantaggi dell'SVG

Confrontati con altri formati di immagini (ad esempio JPEG e GIF), gli vantaggi dell'SVG sono:

  • Le immagini SVG possono essere create e modificate tramite un editor di testo
  • Le immagini SVG possono essere cercate, indicizzate, scriptate o compressate
  • 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.

Incorporare SVG direttamente nelle pagine HTML

In HTML5, è possibile incorporare 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:

Tutorial SVG

Per ulteriori informazioni sull'SVG, visitare il nostro Tutorial SVG.