Editor SVG con spiegazioni
SVG Editor and Explainer
Modifica un SVG accanto alla sua resa dal vivo e spiega il file: viewBox e scalatura, trasformazioni, ogni comando di tracciato, il colore ereditato, i byte sprecati e che cosa si rompe dentro un <img>, in un data URI o in linea.
Permette di modificare un SVG con il risultato accanto e di leggere un pannello che dice che cosa sia davvero il file: se si ridimensiona, che cosa fa ogni trasformazione lungo la discesa fino a una forma, che cosa esprime l’attributo d comando per comando, come si risolve un riempimento attraverso l’ereditarietà, quanto costano in byte gli avanzi dell’editor e che cosa si rompe quando lo stesso file viene usato come <img>, come sfondo CSS o incollato in linea. Ogni segnalazione punta esattamente all’attributo di cui parla. È un insieme di regole applicate al file analizzato, non un modello: riporta quello che c’è e non tira mai a indovinare a che cosa serva il file.
Sorgente dell’SVG
Trascina qui un file .svg
Letto in questa scheda. Non viene caricato niente.
Scrivi qui e l’anteprima ti segue. Clicca una forma nell’anteprima e la sorgente salta al suo elemento.
Anteprima
I contorni cliccabili coprono le forme il cui riquadro si ricava dal file. <text>, <use> e un <image> senza misure hanno bisogno di un motore di rendering, quindi quelli si selezionano dalla sorgente.
Disegnato in un riquadro isolato a partire dal markup ricostruito dall’albero analizzato, mai dai tuoi byte. Il riquadro è una scatola di dimensione fissa e al file viene data tutta intera: è così che si vede quando un documento che non sa scalare si rifiuta di riempirla.
Byte
395
Elementi
5
Forme
3
Comandi di tracciato
10
Annidamento più profondo
1
Che cos’è questo file
- notaCornice
Ha una dimensione, e scala
width="24" e height="24" gli danno una dimensione intrinseca, e viewBox="0 0 24 24" fa di quella dimensione un punto di partenza anziché un limite. Dagli una larghezza diversa nel CSS e tutto quello che c’è dentro viene riscalato di conseguenza. È quello che vuoi per un’icona.
- notaCoordinate
Un’unità utente, e quanto vale
Le coordinate all’interno vanno da 0 a 24 in orizzontale e da 0 a 24 in verticale. Alla larghezza dichiarata di 24, un’unità utente disegna 1 pixel CSS, e quel numero cambia con la dimensione che il file riceve davvero.
- notaTracciati
Comandi assoluti e relativi mescolati
3 comandi assoluti e 6 relativi nello stesso tracciato. Sono leciti entrambi e disegnano la stessa forma; la differenza pratica è che un tracciato tutto relativo si sposta modificando solo la prima M, e questo no.
- notaColore
currentColor: il colore lo decide la pagina
1 attributo colora con currentColor, che si risolve nella proprietà CSS `color` ereditata nel punto in cui si trova l’SVG. Inserito in una pagina è proprio quello che vuoi da un’icona: prende il colore del testo intorno e segue un cambio di tema senza sforzo. Usato come <img> o come background-image del CSS non si risolve contro niente e viene nero, perché non c’è nessun elemento da cui ereditare.
- notaAccessibilità
Nome: «보관함에 저장»
<title> è il nome accessibile della grafica, e la maggior parte dei visualizzatori lo mostra anche come tooltip al passaggio del mouse: per questo un <title> scritto come un nome di file è peggio di nessuno. Questo dice «보관함에 저장».
- notaAccessibilità
Nessun <desc>
<title> è il nome breve; <desc> è la descrizione più lunga per una grafica il cui contenuto conta: un grafico, un diagramma, una mappa. Un’icona non ne ha bisogno, e aggiungerne una vuota è peggio che lasciarla fuori.
Elemento selezionato
Clicca una forma nell’anteprima, oppure metti il cursore dentro un elemento nella sorgente.
Togliere il superfluo con l’ottimizzatore di SVG · Farne un data URI per il CSS · Lavorare un solo tracciato a parte
Come si usa
Incollare l’SVG oppure trascinare il file
Il riquadro del sorgente accetta un incolla, l’area di rilascio accetta un .svg. Tutto viene letto in questa scheda. I quattro esempi sopra i pannelli meritano un clic prima di ogni altra cosa: ognuno è un file reale di forma diversa e il rapporto dice qualcosa di diverso su ciascuno.
Leggere prima la sezione sulla cornice
Dice quale delle quattro forme ha questo documento, e da lì dipende quasi tutto il resto. Un viewBox con width e height si ridimensiona e ha una dimensione propria; il solo viewBox riempie qualunque riquadro gli venga dato; width e height senza viewBox non si ridimensionano affatto, ed è per questo che un’icona copiata da uno strumento di design tanto spesso si rifiuta di cambiare dimensione. L’anteprima dà al file un riquadro fisso, così si vede di quale caso si tratta.
Fare clic su una forma per allineare i due pannelli
Un clic su un contorno nell’anteprima porta il cursore su quell’elemento nel sorgente e riempie il pannello dell’elemento: la catena di trasformazioni dall’elemento più esterno in giù, che cosa fa la matrice accumulata, il colore come si risolve attraverso l’ereditarietà e, per un tracciato, ogni comando spiegato a parole. Spostare il cursore nel sorgente seleziona nella direzione opposta.
Usare i pulsanti «mostrami» invece di cercare
Ogni segnalazione porta con sé l’intervallo di sorgente di cui parla, quindi il pulsante seleziona esattamente quei caratteri: il secondo gradiente con l’id duplicato, non il primo, e quel singolo attributo invece del tag che lo contiene.
Portare all’ottimizzatore le segnalazioni sul peso
La sezione sul peso conta i byte e dice che cosa sono: metadati dell’editor, un gradiente inutilizzato, sette cifre decimali che nessuno ha scelto. Questo strumento però non riscrive il file. Quella passata la fa l’ottimizzatore SVG su tutto il documento in una volta, e mostra la differenza prima/dopo così si può verificare che non si sia spostato nulla.
Domande frequenti
Perché la mia icona non si ingrandisce se imposto una larghezza in CSS?
Quasi sempre perché il file ha width e height ma non ha un viewBox. Senza viewBox le unità utente sono pixel CSS e non c’è alcuna corrispondenza da cui il browser possa ricalcolare la scala: il riquadro cresce e il disegno resta dov’è. La sezione sulla cornice lo dice e propone il viewBox esatto da aggiungere, che di solito è "0 0 <width> <height>" con i numeri già presenti nel file.
Ho messo in linea due icone e la seconda ha perso il gradiente. Perché?
Gli id sono entrati in conflitto. Gli strumenti di design generano nomi come a, Layer_1 e SVGID_1_, e quando i due file finiscono nella stessa pagina ogni url(#a) si risolve su quello che viene prima nel documento: così la seconda icona prende in prestito in silenzio il gradiente o il tracciato di ritaglio della prima. La sezione sulla portabilità segnala gli id generati dagli esportatori proprio per questo. Prima di mettere un file in linea, anteporre a ogni id qualcosa di unico per quel file.
Il file funziona nella mia pagina e come sfondo CSS resta vuoto. Che cosa è cambiato?
Le differenze sono tre e il rapporto indica quella che si applica. Un xmlns mancante viene perdonato dal parser HTML ed è fatale ovunque altro. currentColor fuori da una pagina non ha nulla da cui ereditare, quindi esce nero. I riferimenti esterni non vengono recuperati affatto dentro un <img> o un background-image, quindi l’elemento che ne ha bisogno non disegna niente. E un # in un colore esadecimale tronca un data URI, a meno che non sia scritto come %23.
Un foro nel mio tracciato si riempie di colore pieno. Devo spostarlo?
No: va invertito. Con il fill-rule="nonzero" predefinito un anello interno è un foro soltanto se gira nel verso opposto rispetto all’anello che lo contiene, quindi un foro che si riempie è un problema di verso, non di posizione. La sezione sui tracciati dice quanti sottotracciati ci sono e quale regola sta decidendo. Invertire un sottotracciato è quello che fa l’editor di tracciati SVG.
Ha trovato uno <script> in un file che mi hanno mandato. È pericoloso?
Dipende interamente da dove finisce il file, e il rapporto dice quale sia il caso. Incollato in linea dentro una pagina, lo script di un SVG viene eseguito con l’origine di quella pagina: i suoi cookie, la sua memoria, il suo DOM. Caricato come <img> o come sfondo CSS non viene eseguito mai. L’anteprima qui lo ha rimosso prima di disegnare, e il frame in cui disegna non può in ogni caso eseguire script, quindi guardare il file con questo strumento è comunque sicuro.
Perché il pannello dei colori non concorda con quello che vedo?
Perché il file ha un blocco <style> e questo rapporto non lo applica. Risolvere i selettori CSS richiede un motore CSS; ogni valore riportato qui viene soltanto dagli attributi di presentazione e dagli stili in linea. Dove esiste un blocco <style> il rapporto lo dichiara, invece di mostrare in silenzio un valore che il foglio di stile ha sovrascritto.
Può ricevere da
Selettore di colore
Colour Picker
Sceglie un colore su un campo OKLCH, con il contagocce sullo schermo o da un’immagine caricata, e lo copia nella notazione che vuoi.
Convertitore di codici colore
Colour Format Converter
Converte un colore tra HEX, RGB, HSL, HWB, LAB, LCH e OKLCH e dice qual è il colore con nome più vicino.
Generatore di gradienti CSS
CSS Gradient Builder
Costruisce gradienti lineari, radiali e conici trascinando i punti di arresto ed esporta il CSS in sRGB o in OKLCH.
Generatore di ombre CSS
Box Shadow Generator
Compone ombre di riquadro e di testo su più livelli con anteprima dal vivo e restituisce il CSS.
Dopo
Questi accettano ciò che produce questo strumento, così il risultato può passare direttamente.
Da SVG a data URI per CSS
SVG to CSS Data URI
Codifica un SVG come data URI da usare come sfondo CSS, applicando l’escape solo dove serve per tenerlo corto.
Ottimizzare un SVG
SVG Optimiser
Toglie i residui lasciati dagli editor, fonde le trasformazioni e arrotonda la precisione dei tracciati, mostrando il confronto disegnato.
Editor di tracciati SVG
SVG Path Editor
Converte i dati di un tracciato tra comandi assoluti e relativi, lo sposta, lo ridimensiona, lo ruota e ne inverte il verso, e mostra il riquadro di delimitazione con l’anteprima.
Da SVG a PNG
SVG to PNG
Disegna un SVG in PNG, JPEG o WebP a qualsiasi fattore di scala, con lo sfondo trasparente o pieno.
Convertitore di codici colore
Colour Format Converter
Converte un colore tra HEX, RGB, HSL, HWB, LAB, LCH e OKLCH e dice qual è il colore con nome più vicino.
Selettore di colore
Colour Picker
Sceglie un colore su un campo OKLCH, con il contagocce sullo schermo o da un’immagine caricata, e lo copia nella notazione che vuoi.