Cos'è SVG?

SVG, o Grafica Vettoriale Scalabile, è un formato di immagine vettoriale basato su XML per la grafica bidimensionale.

Caratteristiche principali:

• Scalabilità: Le immagini rimangono nitide a qualsiasi scala, poiché sono descritte da formule matematiche, non da pixel.
• Formato XML: La struttura dei file SVG è descritta da tag, simile all'HTML. Questo li rende leggibili e modificabili in testo.
• Interattività: Possibilità di aggiungere elementi interattivi con JavaScript.
• Animazione: Supporto per l’animazione di elementi con CSS o JavaScript.
• Accessibilità: Capacità di descrivere il contenuto per le persone con disabilità.
• Leggerezza: I file SVG possono essere più piccoli rispetto alle immagini raster di stessa qualità.

Modi di usare SVG:

• Integrazione in HTML tramite il tag <svg>:

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

• Uso come immagine di sfondo in CSS:

  .element {
    background-image: url('image.svg');
  }
  

• Tramite il tag <img>:

  <img src="image.svg" alt="La mia immagine SVG">
  

• Tramite il tag <object> o <iframe>.

SVG è ideale per loghi, icone, illustrazioni, grafici e diagrammi, dove la nitidezza a diverse dimensioni e la possibilità di interattività sono importanti.