SVGView

Correttore del viewBox SVG

Correggi valori viewBox mancanti o errati per evitare problemi di scalatura. Ideale per icone e layout responsive. Apri file SVG online e inizia subito a elaborarli.

Trascina il tuo file SVG

oppure clicca per sfogliare o incolla il codice SVG

Accetta solo file .svg
Incolla il codice SVG con Ctrl+V / Cmd+V

Perché usare il nostro correttore del viewBox SVG?

Correzione automatica del viewBox

Il correttore del viewBox SVG rileva gli attributi viewBox mancanti e genera automaticamente valori sicuri. Questo aiuta le icone a scalare in modo prevedibile nei contenitori responsive e nei design system. È particolarmente utile per asset esportati senza una tavola da disegno corretta. Quando il viewBox corrisponde all'artboard, la scalatura resta coerente su tutti i dispositivi.

Correggi le dimensioni

Il correttore del viewBox SVG sincronizza width e height con il sistema di coordinate interno, così gli asset vengono renderizzati in modo coerente. Questo evita ritagli o padding inattesi durante il ridimensionamento. Mantiene anche l'allineamento stabile quando gli SVG vengono usati come icone nei componenti UI. La coerenza è fondamentale nei layout basati su griglia.

Rispetta le proporzioni

Il correttore del viewBox SVG preserva le proporzioni mentre risolve i problemi di scalatura. La grafica resta proporzionata su breakpoint e dimensioni di schermo diverse. In questo modo eviti loghi allungati o icone deformate nei layout responsive.

Avvisi chiari

Il correttore del viewBox SVG evidenzia attributi mancanti o incoerenti prima dell'esportazione. Questi avvisi riducono i tentativi a vuoto e velocizzano i controlli QA. Usali per individuare i file che potrebbero rompersi quando vengono ridimensionati.

Esporta SVG puliti

Il correttore del viewBox SVG produce un file pulito con viewBox, width e height corretti. Il risultato è pronto per la produzione senza modifiche manuali. Riduce anche il rischio di dimensioni incoerenti tra icone dello stesso set.

Elaborazione locale

Il correttore del viewBox SVG funziona nel browser, quindi i file non vengono mai caricati. È sicuro per asset dei clienti, file di brand interni e flussi di lavoro offline. L'elaborazione locale evita limiti di upload o reti bloccate.

Come correggere il viewBox di un SVG

1

Carica il tuo SVG

Trascina un file, incolla il markup o selezionalo dal dispositivo. Il correttore del viewBox SVG carica il sorgente in locale e prepara un'anteprima per la review. Puoi controllare le dimensioni attuali prima di applicare le correzioni. Apri file SVG online e inizia subito a elaborarli.

2

Correggi il viewBox

Esegui il correttore del viewBox SVG per rilevare automaticamente e applicare il viewBox corretto. Controlla l'anteprima per confermare che la grafica sia inquadrata correttamente. Se necessario, modifica il file nel tuo tool di design e ripeti la correzione.

3

Esporta lo SVG

Scarica lo SVG corretto o continua a modificarlo. Il correttore del viewBox SVG mantiene invariati i nomi file per una sostituzione semplice nel repository. Conserva entrambe le versioni se vuoi una traccia chiara delle modifiche. Può essere utile anche annotare i valori viewBox corretti nella documentazione di design.

FAQ sul correttore del viewBox SVG

Perché il viewBox è importante per la scalatura degli SVG?
Il viewBox definisce il sistema di coordinate interno, così gli SVG possono scalare correttamente. Il correttore del viewBox SVG assicura che questo attributo esista e corrisponda ai limiti della grafica per evitare ritagli o distorsioni. Senza viewBox, il ridimensionamento via CSS può allungare o tagliare le icone.
Correggere il viewBox cambierà l'aspetto dello SVG?
Il correttore del viewBox SVG punta a mantenere invariato l'output visivo migliorando al tempo stesso la scalatura. Se lo SVG originale si basava su dimensioni errate, correggere il viewBox può ripristinare l'allineamento previsto. Controlla sempre l'anteprima a più dimensioni per confermare il risultato.
Cosa succede se il mio SVG ha solo width o height?
Il correttore del viewBox SVG deduce i valori mancanti a partire dalle dimensioni disponibili e applica un viewBox sicuro. Così puoi ridimensionare il file senza distorsioni nei layout responsive. Evita anche il problema comune degli SVG che scalano a partire dall'origine sbagliata.
Posso ancora ridimensionare lo SVG dopo?
Sì. Dopo che il correttore del viewBox SVG ha impostato un viewBox corretto, puoi ridimensionare con CSS o attributi senza rompere le proporzioni. È fondamentale per set di icone e componenti UI. Puoi anche usare width: 100% con un'altezza fissa mantenendo il corretto rapporto di aspetto.
Lo SVG viene caricato da qualche parte?
No. Il correttore del viewBox SVG funziona in locale nel browser, quindi i file non lasciano mai il tuo dispositivo. È sicuro per asset di brand riservati e lavori per clienti. Inoltre riduce la latenza sui file più grandi.
Dovrei ottimizzare dopo aver corretto il viewBox?
Sì. Il correttore del viewBox SVG corregge la scalatura, poi l'ottimizzazione riduce la dimensione del file. Molti team correggono prima il viewBox e poi eseguono un ottimizzatore prima del rilascio. Questa sequenza mantiene stabili gli elementi visivi riducendo al contempo i byte.
Funziona anche per sprite o librerie di icone?
Il correttore del viewBox SVG funziona sia per singole icone sia per elementi destinati agli sprite. Nei flussi con sprite, correggi il viewBox di ogni icona prima di combinarle, così le dimensioni restano coerenti. In questo modo eviti misure miste nello sprite finale.
Come verifico che la correzione sia giusta?
Usa l'anteprima e controlla i valori di width, height e viewBox. L'output del correttore del viewBox SVG dovrebbe scalare in modo fluido a dimensioni diverse, senza ritagli o spaziature inattese. Un test in un contenitore responsive è un buon controllo finale. Puoi anche ispezionare l'SVG nei devtools del browser per verificare il riquadro calcolato.
Il correttore del viewBox SVG è gratuito e utilizzabile senza download?
Sì. Il correttore del viewBox SVG è gratuito e utilizzabile nel browser. Non sono necessari download né installazione.
Serve un account per usare il correttore del viewBox SVG?
No. Il correttore del viewBox SVG funziona subito nel browser senza registrazione e i file restano in locale.

Strumenti SVG correlati

Dopo il correttore del viewBox SVG, usa questi strumenti per ridimensionare, ottimizzare o combinare gli asset. Ti aiutano a mantenere dimensioni coerenti tra repository e design system.

Strumento di ridimensionamento SVG

Ridimensiona gli SVG dopo il correttore del viewBox SVG per creare icone con dimensioni coerenti. È utile quando vuoi standardizzare un set di icone provenienti da fornitori diversi.

Apri strumento

Visualizzatore SVG

Controlla rapidamente viewBox e dimensioni dopo l'intervento del correttore del viewBox SVG. Un rapido check aiuta a individuare eventuali problemi di spaziatura rimasti.

Apri strumento

Ottimizzatore SVG

Comprimi gli SVG dopo il correttore del viewBox SVG per ridurre la dimensione del file in produzione. File più piccoli si caricano anche più velocemente quando vengono usati inline.

Apri strumento

Generatore di sprite SVG

Unisci le icone in uno sprite dopo che il correttore del viewBox SVG ha uniformato la scalatura. Dimensioni coerenti rendono l'allineamento dello sprite più affidabile nei vari browser.

Apri strumento

Blog SVG correlato

Scopri altri contenuti pratici su flussi SVG, risoluzione dei problemi e produzione.