Visualizzatore ed editor SVG online: codice, anteprima, path | We.Inc
Incolla o apri un SVG per vederlo accanto al suo codice. Modificalo dal vivo, controllalo su sfondi chiari, scuri e a scacchiera, esamina i comandi dei path, puliscilo ed esportalo come PNG o come componente React.
Visualizzatore ed editor SVG
Incolla codice SVG o apri un file .svg e l'immagine compare accanto al suo codice. Modifica il codice e l'anteprima si ridisegna mentre scrivi. Cambia lo sfondo per controllare le aree trasparenti, ingrandisci, elenca ogni comando dei path, elimina il superfluo lasciato dagli editor, poi scarica il risultato come SVG, PNG o componente React.
Che cosa puoi esportare
Formato
Usalo per
SVG (pulito)
Siti web, icone, loghi; il file più leggero
PNG da 1x a 4x
Posti che non accettano SVG, come alcuni client email e i post social
Componente React (JSX)
Usare la grafica inline in un progetto React o Next.js
Una vista del codice e un'anteprima dal vivo fianco a fianco. Nulla viene caricato: il file è letto e disegnato dal tuo browser, e l'anteprima è mostrata come immagine così nessuno script dentro l'SVG può essere eseguito.
Incolla il markup SVG nel riquadro del codice, trascinaci sopra un file o usa Apri file. È già caricato un esempio così puoi provare subito gli strumenti.
Modifica il codice. L'anteprima si aggiorna mentre scrivi e ti avvisa quando il markup non è valido.
Cambia lo sfondo dell'anteprima in bianco, scuro o a scacchiera, e ingrandisci dal 25% all'800% per controllare i dettagli fini.
Apri l'ispettore dei path per vedere i comandi di ogni path in parole semplici, come Sposta a, Linea a e Curva cubica, con i loro numeri.
Clicca Pulisci per rimuovere commenti, metadati e attributi degli editor e arrotondare i decimali lunghi, poi scaricalo come SVG o PNG, oppure copialo come JSX.
Mantieni l'attributo viewBox e rimuovi width e height fissi se vuoi che l'SVG si adatti al suo contenitore nel CSS.
Imposta fill o stroke a currentColor nelle icone così prendono il colore del testo dell'elemento in cui si trovano.
Due cifre decimali bastano per quasi ogni icona disegnata su una griglia da 24 o 100 unità. Più precisione aggiunge soprattutto byte.
Non incollare mai un SVG da una fonte non affidabile direttamente nell'HTML della tua pagina. Un SVG inline può contenere script; caricalo con un tag img o puliscilo prima.
Domande frequenti
Come apro un file SVG?
Qualsiasi browser moderno apre direttamente i file SVG, ma mostra solo l'immagine. Per vedere insieme codice e immagine, apri il file in questo visualizzatore con il pulsante Apri file o trascinalo sul riquadro del codice.
Il mio SVG viene caricato da qualche parte?
No. Il file è letto dal tuo browser e disegnato in locale. Niente di ciò che apri o scrivi qui viene inviato a un server.
Perché il mio SVG non mostra nulla nell'anteprima?
Le cause più comuni sono un attributo xmlns="http://www.w3.org/2000/svg" mancante sull'elemento svg, un viewBox che punta lontano dal disegno, oppure forme bianche su sfondo bianco. Prova lo sfondo a scacchiera e controlla la riga di errore sotto l'anteprima.
Che cosa rimuove la pulizia?
Commenti, la dichiarazione XML, il doctype, i blocchi di metadati, gli attributi specifici di strumenti come Inkscape, Sketch e Serif, e i gruppi vuoti. Arrotonda anche i decimali alla precisione che scegli. Non unisce i path né cambia le forme, quindi il disegno dovrebbe apparire identico.
Come uso un SVG in React?
Copia l'output JSX. Converte gli attributi nei nomi React, come stroke-width in strokeWidth e class in className, trasforma le stringhe style in oggetti e passa all'elemento svg tutte le props che dai al componente.
Leggere il codice SVG
Un file SVG è testo che descrive forme. L'elemento svg definisce un sistema di coordinate con il suo viewBox: viewBox="0 0 24 24" significa che il disegno usa una griglia di 24 per 24 unità, qualunque sia la dimensione a cui viene mostrato. Al suo interno, elementi come rect, circle e path disegnano su quella griglia con riempimenti e contorni.
La maggior parte delle icone è fatta quasi interamente di elementi path. L'attributo d di un path è una lista di comandi di disegno: M sposta la penna, L traccia una linea retta, C traccia una curva cubica, A traccia un arco e Z chiude la forma. Le lettere maiuscole usano coordinate assolute; quelle minuscole sono relative all'ultimo punto. L'ispettore in questa pagina li spiega uno per uno.
Perché gli SVG esportati sono più pesanti del necessario
Gli strumenti di design salvano informazioni che li aiutano a riaprire il file: nomi dei livelli, impostazioni dell'editor, posizioni delle guide e coordinate con sei o più cifre decimali. I browser ignorano tutto questo. Rimuoverlo e arrotondare i numeri spesso riduce in modo evidente il peso del file, il che conta quando la stessa icona compare in ogni pagina.
Questa pagina esegue una pulizia prudente che non dovrebbe mai cambiare l'aspetto dell'immagine. Per modifiche più profonde, come unire i path, lo strumento di ottimizzazione SVG va oltre.
Sposta a
Linea a
Linea orizzontale
Linea verticale
Curva cubica
Cubica smussata
Curva quadratica
Quadratica smussata
Arco
Chiudi path
un elemento <script>
un attributo evento on…
un link javascript:
un <foreignObject> con HTML all'interno
Bianco
Scuro
Scacchiera
Il markup non è XML valido.
L'elemento radice non è <svg>.
Incolla un markup che inizia con <svg e finisce con </svg>.
Il file supera i 5 MB. Apri un SVG più piccolo.
Aperto {name}.
L'anteprima non è stata caricata, quindi non c'è ancora nulla da esportare.
Salvato un PNG di {w} × {h}.
Codice
Apri file
Esempio
Codice SVG
{bytes} byte · {n} path
{bytes} byte · {n} path
Questo SVG contiene {parts}. L'anteprima qui è sicura, ma non incollarlo in una pagina come HTML inline senza rimuoverlo.
Anteprima
Zoom
Anteprima del tuo SVG
Disegnato dal tuo browser. Gli script dentro l'SVG qui non vengono eseguiti.
Ispettore dei path
Nessun elemento path in questo SVG.
Path {n}
Comandi nel path {n}
Comando
Numeri
(relativo)
Scegli un path per evidenziarlo nell'anteprima ed elencarne i comandi.