SVG cheatsheet

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>

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>