Riparare la viewBox di un SVG
Aggiunge la viewBox mancante da width e height, così l'SVG finalmente si ridimensiona – nel browser.
Funziona nel tuo browser – il file non viene caricato
Domande frequenti
Il mio file viene caricato?
No. La conversione avviene interamente nel tuo browser. Il file non lascia mai il tuo dispositivo – non c'è alcun server che possa vederlo. Una volta caricata la pagina, lo strumento funziona persino offline.
A cosa serve la viewBox e perché manca?
La viewBox dice al browser quale porzione del disegno mostra il file e permette all'SVG di scalare a qualsiasi dimensione. Alcuni esportatori scrivono solo width e height; un file così viene sempre mostrato a quella dimensione fissa – un'icona da 24 px resta 24 px per quanto la ingrandisci, oppure viene tagliata. Una viewBox coerente con width e height risolve il problema senza modificare il disegno.
Cosa viene modificato esattamente?
Solo il tag radice <svg>: la viewBox viene aggiunta se manca o riscritta se è malformata (numero di valori sbagliato, dimensione zero o negativa). width e height in pt, mm, cm o in vengono convertiti in pixel a 96 dpi, come definito dal CSS. Tutto il resto del file resta identico byte per byte – una viewBox valida non viene mai toccata.
Quando devo rimuovere width e height?
Quando l'SVG deve adattarsi al suo contenitore: icone inline, loghi responsive, sfondi CSS. Senza width e height il browser usa le dimensioni del CSS o del tag <img>, mantenendo le proporzioni della viewBox. Tienili per un file che deve avere una dimensione naturale fissa, come un'esportazione per la stampa.
Perché dice che la dimensione è sconosciuta?
width e height in percentuale, em o ex dipendono dal contesto, quindi non se ne ricava una dimensione in pixel. Apri il file nel tuo editor, imposta una dimensione assoluta (ad esempio 64 × 48 px) e riprova.
Strumenti correlati
Ottimizzare un SVG
Riduce i file SVG senza cambiarne l'aspetto – nel browser.
● Nel browser
Sostituire i colori in un SVG
Sostituisce un colore con un altro in tutto l'SVG – riempimenti, contorni, gradienti e stili – nel browser.
● Nel browser
Convertire SVG in data URI
Trasforma un SVG in un URL data: compatto per CSS e HTML – nel browser, senza caricamento.
● Nel browser
Convertire SVG in sfondo CSS
Scrive una regola CSS pronta da incollare con l'SVG incorporato come sfondo o maschera – nel browser.
● Nel browser
Unire file SVG
Combina più SVG in uno solo – affiancati, impilati o come sprite di icone – nel browser.
● Nel browser