Categoria: Sviluppo
Editor viewBox SVG
Leggi e riscrivi a mano il viewBox di un SVG
Incolla un markup SVG, carica il suo viewBox attuale (o la sua larghezza e altezza se non ne ha uno), poi regola min-x, min-y, larghezza e altezza per ritagliare, aggiungere spazio o ri-ancorare il disegno, e copia l'SVG riscritto.
<svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <rect width="120" height="120" rx="16" fill="#0f766e" /> <circle cx="60" cy="60" r="34" fill="#f4d35e" /> </svg>
Non viene caricato nulla. Il markup viene analizzato e riscritto solo in questa pagina.
Tutto ciò che c'è in questa pagina viene elaborato nel tuo browser. Niente viene caricato.
A cosa serve
L'attributo viewBox è ciò che mappa il sistema di coordinate interno di un SVG sullo spazio in cui viene renderizzato, quindi cambiarlo è il modo per ritagliare parte di un'icona, aggiungerle spazio intorno, o spostarne l'origine senza toccare un singolo path. Modificare a mano quattro numeri in un editor di testo è macchinoso e facile da sbagliare; questo strumento analizza l'SVG che incolli, precompila i quattro campi del viewBox con ciò che trova, e riscrive il markup dal vivo mentre li cambi, con un'anteprima per vedere il ritaglio prima di copiare.
Come si usa
- Incolla un markup SVG che includa un tag <svg>.
- Clicca su "Carica il viewBox attuale" per precompilare i quattro campi, oppure inserisci tu stesso min-x, min-y, larghezza e altezza.
- Controlla l'anteprima, poi copia il markup SVG riscritto.
Privacy
Questo strumento funziona interamente nel tuo browser. Quello che inserisci non viene mai caricato, salvato o condiviso: chiudendo la scheda sparisce.
Domande frequenti
- Il mio SVG viene caricato da qualche parte?
- No. Il markup viene analizzato e riscritto con semplice corrispondenza di stringhe nella scheda del tuo browser; nulla viene inviato a un server.
- Cosa succede agli attributi width e height?
- Restano esattamente come sono. Cambiare il viewBox riscala ciò che viene disegnato all'interno del viewport esistente, allo stesso modo in cui lo applica un browser, invece di ridimensionare l'elemento stesso.
- Perché a volte l'anteprima appare vuota?
- Una larghezza o un'altezza pari a zero, o un viewBox che non si sovrappone al disegno, lo riducono fino a farlo sparire. Allarga il riquadro o controlla i valori di min-x/min-y.