Cos’è SVG
Scalable Vector Graphics (SVG) è un formato di immagine basato su XML per rappresentare grafica vettoriale bidimensionale. A differenza dei formati raster, come JPEG o PNG, SVG utilizza una descrizione testuale con i dati geometrici dell’immagine, rendendola scalabile senza perdita di qualità.
Struttura di un file SVG
Un file SVG è composto da un elemento <svg> che contiene tutti gli altri elementi.
Questo elemento può contenere attributi per definire le dimensioni dell’immagine, il colore di sfondo e altre proprietà.
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<!-- Elementi grafici -->
</svg>Ricettario
Disegnare un rettangolo
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="80" height="80" fill="red" />
</svg>Disegnare un cerchio
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" fill="blue" />
</svg>Disegnare un poligono
<svg width="200" height="100"
viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
<polygon points="0,100 50,25 50,75 100,0" />
<polygon points="100,100 150,25 150,75 200,0" fill="none" stroke="black" />
</svg>Tracciare una linea
<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<path
fill="none"
stroke="red"
d="M 10,30
A 20,20 0,0,1 50,30
A 20,20 0,0,1 90,30
Q 90,60 50,90
Q 10,60 10,30 z" />
</svg>L’attributo d della <path> definisce il percorso da tracciare.
Vi sono diversi comandi che si possono utilizzare:
| Comando | Lettera | Descrizione |
|---|---|---|
| MoveTo | M m | Sposta il punto corrente a una nuova posizione |
| LineTo | L l | Disegna una linea fino a una nuova posizione |
| Horizontal LineTo | H h | Disegna una linea orizzontale |
| Vertical LineTo | V v | Disegna una linea verticale |
| Cubic Bézier curve | C c | Disegna una curva Bézier cubica |
| Smooth Cubic Bézier curve | S s | Disegna una curva Bézier cubica liscia |
| Quadratic Bézier curve | Q q | Disegna una curva Bézier quadratica |
| Smooth Quadratic Bézier curve | T t | Disegna una curva Bézier quadratica liscia |
| Elliptical arc curve | A a | Disegna un arco ellittico |
| ClosePath | Z z | Chiude il percorso corrente |
Le lettere maiuscole indicano coordinate assolute, mentre le minuscole indicano il movimento relativo rispetto alla posizione corrente.
Scrivere un testo
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<text x="10" y="50" font-family="Arial" font-size="16" fill="black">Hello, world!</text>
</svg>Gestire light e dark mode
<svg id="logo" width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<style>
#logo * {
fill: #000;
}
@media (prefers-color-scheme: dark) {
#logo * {
fill: #fff;
}
}
</style>
<rect x="0" y="0" width="100" height="100" />
</svg>Gradiente lineare
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="background" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:white" />
<stop offset="100%" style="stop-color:black" />
</linearGradient>
</defs>
<rect x="10" y="10" width="80" height="80" fill="url(#background)" />
</svg>Animazione di caricamento
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 20" style="width: 100%; height: 30px">
<style>
@keyframes loading-animation {
to {
stroke-dashoffset: 0;
}
}
</style>
<rect stroke-width="1" stroke="rgb(106, 164, 68)" fill="none" x="2" y="2" width="296" height="16" rx="7" ry="7" />
<path d="M 10 10 L 290 10" stroke-linecap="round" fill="none" stroke="rgb(156, 204, 108)" stroke-width="16"
stroke-dasharray="280" style="
animation: 5s cubic-bezier(0,.26,.24,1) 0s infinite normal none running loading-animation;
stroke-dashoffset: 279;
" />
</svg>Frecce e linee ondulate
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600"
viewBox="0 0 202.006 110.386">
<style>
line {
stroke: white;
stroke-width: 1;
}
#wiggle>* {
stroke: white;
fill: none;
}
.dashed {
stroke-dasharray: 5, 5;
}
</style>
<defs>
<marker id='head' orient="auto" markerWidth='6' markerHeight='4' refX='0.1' refY='2'>
<polygon points="0,0 0,4 6,2" fill="black" />
</marker>
<pattern id="wiggle" viewBox="0 0 8 6" height="8" width="8" patternUnits="userSpaceOnUse">
<path d="M 0 4 Q 2 8, 4 4 T 8 4" />
</pattern>
</defs>
<g>
<rect fill="url(#wiggle)" x="0" y="0" width="40" height="8" transform="
translate(58 28)
rotate(90)
" />
<rect fill="url(#wiggle)" x="0" y="0" width="68" height="8" transform="
translate(164 30)
rotate(90)
" />
<line x1="60" y1="24" x2="125" y2="24" marker-end='url(#head)' />
<line x1="73" y1="79" x2="130" y2="101" marker-end='url(#head)' />
<line class="dashed" x1="60" y1="32" x2="150" y2="95" marker-end='url(#head)' />
</g>
</svg>