Esercitazione SVG

SVG sta per Scalable Vector Graphics.

SVG definisce la grafica vettoriale in formato XML.


Esempi in ogni capitolo

Con il nostro editor "Provalo da solo", puoi modificare l'SVG e fare clic su un pulsante per visualizzare il risultato.

Esempio SVG

<html>
<body>

<h1>My first SVG</h1>

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

</body>
</html>

Quello che dovresti già sapere

Prima di continuare, dovresti avere una conoscenza di base di quanto segue:

  • HTML
  • XML di base

Se vuoi studiare prima queste materie, trova i tutorial nella nostra Home page .


Cos'è SVG?

  • SVG sta per Scalable Vector Graphics
  • SVG viene utilizzato per definire la grafica vettoriale per il Web
  • SVG definisce la grafica in formato XML
  • Ogni elemento e ogni attributo nei file SVG possono essere animati
  • SVG è una raccomandazione del W3C
  • SVG si integra con altri standard W3C come DOM e XSL


SVG è una raccomandazione del W3C

SVG 1.0 è diventata una raccomandazione del W3C il 4 settembre 2001.

SVG 1.1 è diventata una raccomandazione del W3C il 14 gennaio 2003.

SVG 1.1 (seconda edizione) è diventata una raccomandazione del W3C il 16 agosto 2011.


Vantaggi SVG

I vantaggi dell'utilizzo di SVG rispetto ad altri formati di immagine (come JPEG e GIF) sono:

  • Le immagini SVG possono essere create e modificate con qualsiasi editor di testo
  • Le immagini SVG possono essere cercate, indicizzate, sottoposte a script e compresse
  • Le immagini SVG sono scalabili
  • Le immagini SVG possono essere stampate con alta qualità a qualsiasi risoluzione
  • Le immagini SVG sono ingrandibili
  • La grafica SVG NON ​​perde alcuna qualità se viene ingrandita o ridimensionata
  • SVG è uno standard aperto
  • I file SVG sono puro XML

Creazione di immagini SVG

Le immagini SVG possono essere create con qualsiasi editor di testo, ma spesso è più conveniente creare immagini SVG con un programma di disegno, come Inkscape .