Editor SVG
Modifica file SVG nel browser. Incolla il codice, anteprima dal vivo, cambia dimensioni e colori, scarica SVG modificato.
Funzionalita principali
- Anteprima live del codice SVG
- Modifica di larghezza, altezza e viewBox
- Trova e sostituisci colori
- Scarica o copia l'SVG modificato
Guide
SVG (Scalable Vector Graphics) e un formato di immagine basato su XML che descrive forme, percorsi e testo utilizzando coordinate matematiche anziche griglie di pixel. A differenza dei formati raster (PNG, JPEG, WebP), le immagini SVG si ridimensionano a qualsiasi dimensione senza perdere qualita. Un'icona da 24px e un logo grande quanto un cartellone pubblicitario possono usare lo stesso file SVG. Questo rende SVG il formato standard per icone, loghi, illustrazioni, grafici e qualsiasi elemento grafico che debba essere riprodotto nitidamente a dimensioni diverse. Questa guida tratta la struttura SVG, le tecniche di modifica, le strategie di ottimizzazione e l'uso pratico nello sviluppo web. Un file SVG e un documento di testo. Puoi aprirlo in qualsiasi editor di codice e leggerlo. L'elemento radice e <svg> con attributi per width, height e viewBox. Il viewBox definisce il sistema di coordinate: viewBox="0 0 100 100" significa che l'area di disegno si estende da (0,0) a (100,100). All'interno dell'elemento <svg> trovi elementi di forma come <rect>, <circle>, <ellipse>, <line>, <polyline>, <polygon> e <path>. Ogni elemento ha attributi che definiscono la geometria, il colore di riempimento, il colore del contorno, lo spessore del tratto e altre proprieta visive. Comprendere questa struttura e essenziale per modificare efficacemente i file SVG perche ogni cambiamento visivo apportato in un editor grafico corrisponde a una modifica in questo markup XML. L'elemento <path> e l'elemento SVG piu potente e piu complesso. Usa una stringa compatta di comandi nel suo attributo d per descrivere qualsiasi forma arbitraria. I comandi sono: M (sposta in), L (linea fino a), H (linea orizzontale), V (linea verticale), C (curva Bezier cubica), S (Bezier cubica smussata), Q (curva Bezier quadratica), T (Bezier quadratica smussata), A (arco ellittico) e Z (chiudi percorso). Le lettere maiuscole usano coordinate assolute. Le lettere minuscole usano coordinate relative. Un percorso tipico appare come d="M10 10 L90 10 L90 90 L10 90 Z\
Domande frequenti
I miei dati SVG sono al sicuro?
Sì, tutta l'elaborazione avviene nel tuo browser. Nessun dato viene caricato su alcun server.
Posso modificare SVG complessi?
Sì, puoi modificare qualsiasi codice SVG valido. Lo strumento supporta tutti gli elementi e attributi SVG standard.
