Ridimensiona SVG

Dimensione di visualizzazione e viewBox

Un SVG ha una dimensione di visualizzazione (width/height) e un proprio sistema di coordinate (viewBox).

<svg width="200" height="200" viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="40" />
</svg>

Questo SVG è largo 200 x 200 pixel sullo schermo, mentre le sue coordinate interne vanno da 0 a 100. Il cerchio con r="40" riempie circa l’80% del viewBox, quindi viene reso largo circa 160 px. Questo strumento cambia soltanto il width e l’height, cioè la dimensione di visualizzazione dichiarata. Non tocca il viewBox né le coordinate, ed è proprio per questo che il disegno mantiene le proporzioni e resta nitido: stai dicendo al browser di disegnare la stessa immagine a una dimensione diversa, non di ridisegnarla.

Perché un SVG può sembrare uguale dopo aver cambiato la dimensione

Se l’SVG è inserito con qualcosa come <img src="icona.svg" width="500"> o dimensionato tramite CSS, è la pagina circostante a controllare la dimensione di visualizzazione e a sovrascrivere il width/height del file. In quel caso, cambia la dimensione dove l’SVG viene usato (l’<img>, il CSS o il contenitore), non solo dentro il markup.

Tratti e testo restano nitidi

Poiché nulla viene rasterizzato, il testo resta vero testo vettoriale e le linee restano lisce a qualsiasi dimensione. Lo spessore dei tratti è definito nel sistema di coordinate, quindi scala insieme al disegno. Per mantenere un tratto con lo stesso spessore visivo a prescindere dalla dimensione, aggiungi vector-effect="non-scaling-stroke" a quell’elemento nella tua sorgente prima di ridimensionare.

Tieni il markup pulito

Gli SVG esportati da Figma, Illustrator o Sketch spesso portano peso superfluo: spazi dei nomi dell’editor (sodipodi:, inkscape:), metadati nascosti e <defs> inutilizzati. Questo strumento lascia il tuo markup così com’è a parte la dimensione. Per rimuovere il superfluo, passa il file in un ottimizzatore come SVGO prima o dopo il ridimensionamento.