Privacy e memoria

Usiamo memoria del browser necessaria per lingua, accesso e flusso dell editor. Font e simboli recenti vengono salvati solo se consenti la memoria di comodita.

Nessun tracciamento marketing e nessun cookie pubblicitario.

Che cos'è SVG? — Il formato vettoriale spiegato in modo semplice

Scalable Vector Graphics dalla A alla Z

SVG e grafica vettoriale

SVG significa Scalable Vector Graphics: un formato di immagine basato su XML che descrive la grafica non come pixel, ma come forme matematiche. Questo permette di ridimensionare un SVG a qualsiasi dimensione senza perdita di qualità. In questo articolo spieghiamo tutto ciò che devi sapere su SVG.

Grafica generata per l’articolo Che cos'è SVG? — Il formato vettoriale spiegato in modo semplice

SVG: la definizione tecnica

SVG è uno standard aperto del W3C, pubblicato per la prima volta nel 2001. Descrive grafica vettoriale bidimensionale tramite sintassi XML:

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" fill="#4F46E5" />
</svg>

Questo semplice esempio disegna un cerchio viola. Il browser interpreta le istruzioni XML e rende il grafico a qualsiasi risoluzione.

Perché SVG è così speciale

SVG offre vantaggi unici rispetto ai formati raster:

  • Scalabilità infinita — Da 16×16 px fino a un banner enorme senza perdita di qualità
  • Dimensioni ridotte — Un logo in SVG pesa spesso pochissimo
  • Basato su testo — Può essere modificato con qualsiasi editor di testo
  • Indicizzabile — Il testo nei file SVG può essere letto dai motori di ricerca
  • Animabile — Gli elementi SVG possono essere animati con CSS o JavaScript
  • Accessibile — Supporta attributi ARIA e tag <title> e <desc>

Panoramica degli elementi SVG

Gli elementi SVG più importanti sono:

  • <rect> — Rettangolo
  • <circle> — Cerchio
  • <ellipse> — Ellisse
  • <line> — Linea
  • <polyline> — Polilinea
  • <polygon> — Poligono
  • <path> — Tracciati liberi, l'elemento più potente
  • <text> — Testo
  • <g> — Gruppo di elementi

Dove si usa SVG?

SVG è ovunque nel mondo digitale:

  • Loghi e icone — Il caso d'uso principale
  • Infografiche — Visualizzazioni dati interattive e scalabili
  • Elementi UI — Pulsanti, illustrazioni e sfondi
  • Mappe — Mappe e planimetrie interattive
  • Animazioni — Da effetti hover discreti a motion design complesso
  • Stampa — Base per modelli ad alta risoluzione

Supporto browser

SVG è pienamente supportato da tutti i browser moderni:

  • Chrome, Firefox, Safari ed Edge: supporto completo da anni
  • Safari su iOS e Chrome su Android: rendering mobile perfetto
  • IE 11: supporto di base con alcune limitazioni CSS

Oggi puoi usare SVG con tranquillità in qualsiasi progetto web.

SVG è il formato perfetto per i loghi: scalabile, leggero, modificabile e universalmente supportato. Il nostro editor di loghi esporta il tuo logo direttamente in SVG, pronto per web, stampa e ogni altro utilizzo.

Pronto a creare il tuo logo?

Editor visuale gratuito con export SVG.

Articoli correlati