Introduzione a SVG
SVG (Scalable Vector Graphics) è un formato per la rappresentazione di grafica vettoriale che utilizza XML per descrivere immagini bidimensionali. A differenza delle immagini raster, come JPEG o PNG, SVG permette di mantenere la qualità inalterata a qualsiasi risoluzione, ideale per il web design moderno e responsive.
In frontend development, conoscere e padroneggiare SVG significa ampliare gli strumenti a disposizione per creare interfacce grafiche ricche e scalabili, facilmente animabili e manipolabili via CSS e JavaScript.
Che cosa sono i path?
I path in SVG sono elementi fondamentali utilizzati per disegnare forme complesse. Sono definiti tramite una serie di comandi e coordinate che descrivono segmenti di linea, curve e movimenti all’interno di un piano cartesiano.
<path> è l’elemento SVG più versatile per realizzare qualsiasi forma, dai semplici poligoni fino a oggetti estremamente dettagliati.
Comandi base dei path
- M (moveto)
- sposta il punto di disegno senza tracciare una linea
- L (lineto)
- disegna una linea retta tra il punto attuale e la nuova posizione
- C (curveto)
- disegna una curva di Bézier cubica con due punti di controllo
- Z (closepath)
- chiude il path collegando l’ultimo punto con il primo
Esempio semplice di path:
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<path d="M10 10 L100 10 L100 100 L10 100 Z" fill="lightblue" stroke="navy" stroke-width="2" />
</svg>Creare forme base
SVG offre anche elementi dedicati per forme geometriche semplici, che sono più immediati rispetto ai path quando si disegnano rettangoli, cerchi, ellissi, linee e poligoni.
<rect>: rettangoli con angoli arrotondati opzionali<circle>: cerchi definiti da un centro e un raggio<ellipse>: ellissi con raggi indipendenti su x e y<line>: segmenti di linea semplici<polygon>e<polyline>: poligoni chiusi o aperti definiti da una lista di punti
Esempio di forme base con SVG:
<svg width="250" height="150" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="80" height="50" fill="#8BC34A" rx="10" />
<circle cx="150" cy="50" r="30" fill="#2196F3" />
<ellipse cx="200" cy="100" rx="50" ry="20" fill="#FFC107" />
<line x1="10" y1="100" x2="100" y2="130" stroke="#FF5722" stroke-width="3" />
<polygon points="150,110 180,140 120,140" fill="#9C27B0" />
</svg>Animazioni in SVG
SVG supporta animazioni native tramite SMIL (<animate>, <animateTransform>), ma oggi è comune animare SVG usando CSS e JavaScript per avere maggior controllo e compatibilità, specialmente in progetti frontend moderni.
Utilizzare animazioni CSS per modificare attributi come stroke-dasharray e stroke-dashoffset consente di creare effetti di disegno in tempo reale su path.
Esempio di animazione stroke-dasharray con CSS:
path {
stroke: #007BFF;
stroke-width: 4;
fill: none;
stroke-dasharray: 300;
stroke-dashoffset: 300;
animation: draw 2s forwards;
}
@keyframes draw {
to {
stroke-dashoffset: 0;
}
}Esempio HTML per animazione sul path:
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
<path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" />
</svg>Utilizzare SVG con CSS
Il grande vantaggio di SVG è la sua integrabilità con CSS: è possibile selezionare singoli elementi e modificarne lo stile, animarli o modificarne le proprietà dinamicamente in risposta a eventi utente.
Inoltre, le variabili CSS sono perfettamente utilizzabili per parametrizzare colori e dimensioni rendendo il design scalabile e personalizzabile attraverso le proprietà personalizzate (--variabile).
Esempio di utilizzo CSS con variabili:
:root {
--main-color: #4CAF50;
--hover-color: #81C784;
}
circle {
fill: var(--main-color);
transition: fill 0.3s ease;
}
circle:hover {
fill: var(--hover-color);
}Markup SVG con cerchio interattivo:
<svg width="150" height="150" xmlns="http://www.w3.org/2000/svg">
<circle cx="75" cy="75" r="50" />
</svg>Esempi pratici
Vediamo ora come combinare path, forme e animazioni per realizzare un’icona animata semplice e scalabile:
<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="#333" stroke-width="3" fill="none"/>
</svg>Animiamo il path simulando un disegno a mano:
path {
stroke-dasharray: 300;
stroke-dashoffset: 300;
animation: draw 3s ease forwards;
}
@keyframes draw {
to {
stroke-dashoffset: 0;
}
}Questa tecnica è molto utilizzata in web design per introdurre icone e elementi grafici con un effetto dinamico che coinvolge l’utente.
Inoltre, è possibile arricchire la grafica con performance budget e caching strategico per mantenere la pagina veloce senza sacrificare le animazioni e la qualità visiva (Service Worker Caching Strategico).
Best practices
- Preferisci sempre forme e path semplici per migliorare performance e manutenzione.
- Ottimizza SVG riducendo attributi inutili e usando strumenti di compressione dedicati.
- Utilizza CSS per le animazioni semplici, affidati a JavaScript solo se serve complessità o interattività avanzata (Testing frontend moderno può aiutare a mantenere stabile l’integrazione).
- Assicurati che SVG sia accessibile, aggiungendo descrizioni con
<title>e<desc>, soprattutto per icone e elementi interattivi (Accessibilità web 2025). - Carica gli SVG in modo efficiente, inline o come risorse esterne a seconda del contesto (Hook wp_enqueue_script è utile per caricare asset nel contesto WordPress modernamente).
Conclusione
SVG rappresenta uno strumento potente e versatile per frontend developer che desiderano creare grafica vettoriale nitida, scalabile e interattiva. La conoscenza approfondita dei path e delle forme di base, unita all’uso intelligente di CSS e JavaScript per animazioni, consente di realizzare design moderni e performanti.
Integrare SVG nei tuoi progetti web significa non solo migliorare la qualità visiva e l’esperienza utente, ma anche ottimizzare il caricamento e la manutenzione del codice grafico. Ti invito a esplorare anche altre guide per ottimizzare le performance e la sicurezza dei tuoi progetti frontend, e adeguarti agli standard 2025 di accessibilità e prestazioni web.
