Editor SVG
Forme e codice, fianco a fianco
Incolla codice SVG o parti da una forma. Questo editor SVG ti fa spostarla e cambiarne lo stile su una tela dal vivo, poi copiare o scaricare il codice pulito. Niente account, niente caricamenti, niente su un server.
- GratisPrezzo
- CinqueForme
- SVG pulitoRisultato
- NessunoCaricamenti
Editor SVG
Incolla o disegna forme, spostale e ridimensionale, poi salva codice pulito
Niente selezionato. Fai clic su una forma nella tela o nell’elenco dei livelli.
Pronto. È caricato un disegno di esempio. Incolla qui sotto il tuo codice SVG e premi Carica il codice.
Cosa fa un editor SVG
Questo editor SVG ti fa lavorare sulla grafica vettoriale nel browser. Incolli codice SVG o parti da una forma semplice. Poi sposti, ridimensioni e cambi lo stile delle parti su una tela dal vivo. Poiché tutto gira sul tuo dispositivo, il codice non lascia mai la pagina. Inoltre nessuna copia resta altrove.
Modificare il disegno richiede pochi passi. Prima incolla il codice SVG o aggiungi una forma, come un rettangolo, un cerchio, una linea o un testo. Poi fai clic su una parte per selezionarla e trascinala, oppure tira il punto nell’angolo per cambiarne la dimensione. Inoltre imposti riempimento e bordo, scrivi numeri esatti e riordini i livelli per mettere sopra la parte giusta.
Non serve un account e non c’è caricamento, quindi un disegno è pronto subito. Tutto si aggiorna mentre modifichi, cioè vedi il risultato finale prima di salvare. Quando va bene, copia il codice o scaricalo come file SVG. Poi mettilo in una pagina, un set di icone o un file di design.
Questo editor SVG serve a chi lavora con la grafica vettoriale. Per esempio, gli sviluppatori puliscono un’icona, i designer ritoccano il colore di un logo e chi scrive sistema un piccolo schema senza un programma pesante. Poiché il risultato è testo SVG, resta nitido a ogni dimensione. Inoltre resta leggibile quando lo incolli in un progetto.
Un disegno, forme e codice
L’immagine qui sotto mostra a sinistra la tela. A destra c’è il codice SVG pulito che l’editor tiene per lei.
Fai clic su una forma sulla tela, e un riquadro tratteggiato la segna. Spostala o cambiane lo stile, e il codice corrispondente si aggiorna subito. Così i due coincidono sempre.
Seleziona, trascina e rifinisci
Fai clic su una forma sulla tela o nell’elenco dei livelli. Un riquadro tratteggiato la segna, e il punto nell’angolo ridimensiona rettangolo, cerchio, ellisse, linea, testo o immagine. Tracciati e gruppi si spostano trascinando, e la loro dimensione si cambia nel codice.
Il pannello laterale imposta riempimento, bordo e opacità. Sotto, ogni attributo della forma ha il suo campo, quindi scrivi un numero esatto. Inoltre le frecce della tastiera spostano la forma selezionata, e Annulla ripercorre le modifiche recenti.
Video guida: Editor SVG
Un breve video mostra ogni passaggio. Poi scegli la tua lingua qui sotto e attiva i sottotitoli se vuoi.
Come modificare un SVG
Sei passi, e il codice non lascia mai la scheda.
- 1
Incolla il codice o aggiungi una forma
Incolla codice SVG e premi Carica il codice. Oppure parti da rettangolo, cerchio, ellisse, linea o testo se inizi da zero.
- 2
Seleziona una parte sulla tela
Fai clic su una forma per sceglierla. Compaiono un riquadro tratteggiato e un punto nell’angolo, così sai sempre quale parte è attiva.
- 3
Spostala e ridimensionala
Trascina la forma in un nuovo punto o tira il punto nell’angolo per cambiarne la dimensione. Tieni Maiusc per mantenere le proporzioni di un rettangolo, un’ellisse o un’immagine.
- 4
Cambia riempimento e bordo
Scegli un colore di riempimento, aggiungi un bordo, cambiane lo spessore e regola l’opacità. La tela si ridisegna a ogni valore.
- 5
Riordina i livelli
Usa Porta avanti e Manda indietro per spostare una forma su o giù nella pila dei livelli. Così il disegno si legge come vuoi.
- 6
Copia o scarica il risultato
Copia il codice pulito negli appunti o salvalo come file SVG. Niente va a un server, quindi il codice resta privato.
Perché modificare SVG nel browser
Tre motivi per cui un editor nel browser batte un programma di design pesante per questo lavoro.
Vedi forma e codice insieme
L’SVG è grafica vettoriale scritta come testo, quindi facile da modificare a mano ma difficile da immaginare. Poiché i numeri descrivono le forme, un piccolo cambio di valore sposta un’intera forma. In pratica questo editor mostra disegno e numeri insieme. Così cambi un valore e vedi subito il risultato.
Il tuo codice resta privato
Questo editor SVG salta il solito caricamento. Molti strumenti vettoriali inviano il file a un server e restituiscono un link. Qui invece il disegno nasce sul tuo dispositivo. Di conseguenza un’icona privata o un logo non ancora pubblicato restano privati, e modifichi una bozza per un cliente senza rischi.
Il risultato è SVG pulito e nitido
Il risultato conta quanto la modifica. Poiché è testo SVG, entra in una pagina web o in un programma di design senza plugin. Così ottieni un file nitido a ogni dimensione, veloce da caricare e chiaro da leggere per uno sviluppatore.
Come funziona l’editor
Tre cose decidono il risultato. Conviene conoscerle tutte prima di salvare.
- Ogni clic trova una forma L’editor legge il codice SVG, lo disegna e collega ogni clic alla forma sotto il cursore. Poiché il disegno è fatto di forme con coordinate, spostare una parte cambia solo i suoi numeri. Il resto non cambia. Inoltre il pannello elenca gli attributi della forma selezionata, quindi scrivi un valore esatto quando trascinare non basta.
- L’ordine dei livelli decide cosa si vede L’ordine dei livelli decide cosa sta sopra. L’SVG disegna le forme nell’ordine in cui appaiono, quindi una forma successiva copre le precedenti. Perciò spostare una parte su o giù cambia cosa si vede prima. Un piccolo riordino sistema un bordo nascosto o un testo coperto.
- L’export resta pulito e portabile L’export tiene pulito il codice. L’editor scrive codice ordinato mentre lavori, quindi la copia è SVG leggibile invece di una riga lunga. Inoltre il file contiene solo le tue forme, quindi si apre in ogni browser senza altro.
Errori comuni nel modificare SVG
Ognuno lascia il disegno giusto alla vista ma sbagliato nell’uso, e si nota tardi.
Perdere il viewBox
Senza viewBox, il disegno si taglia o si scala in modo strano in una pagina. Quindi tieni il viewBox e cambia larghezza e altezza solo per una dimensione fissa.
Allungare un solo asse
Una forma allungata da un lato sembra rotta. Poiché un vettore si allunga liberamente, tieni premuto Maiusc mentre ridimensioni, così la forma mantiene le proporzioni.
Lasciare il riempimento su un contorno
Una forma pensata come contorno riempie un’intera area se ha un riempimento. Quindi spunta Senza riempimento quando una forma deve restare un contorno.
Modificare una copia e perdere l’originale
L’editor lavora sul codice incollato, quindi il file originale resta al sicuro. Tieni comunque una copia per confrontare le due versioni.
Dimenticare lo spessore del bordo
Un bordo sottilissimo sparisce su uno schermo ad alta risoluzione. Poiché il vettore si ingrandisce, controlla lo spessore del bordo in grande prima di consegnare il file.
Dimenticare l’accessibilità
Un’immagine decorativa non ha bisogno di titolo, ma una con un significato sì. Quindi aggiungi un breve elemento title nel codice, e un lettore di schermo potrà nominare la grafica.
Domande frequenti sull’editor SVG
L’editor SVG carica il mio file?
No. Tutto il disegno resta nel tuo browser. Quindi il codice non arriva mai a un server, perché l’editor non ne ha bisogno per modificare il disegno.
Che cos’è l’SVG?
SVG sta per Scalable Vector Graphics, un formato di testo che descrive forme con numeri invece che con pixel. Essendo vettoriale, resta nitido a ogni dimensione. Inoltre si legge come codice, quindi è facile da modificare e leggero.
Devo caricare un file SVG?
No. L’editor usa codice incollato, quindi apri il file, copia il testo SVG e incollalo. Poi modifichi sulla tela, e il file sul disco resta com’è.
Quali forme posso aggiungere?
L’editor aggiunge rettangolo, cerchio, ellisse, linea e testo. Coprono la maggior parte di icone e schemi, quindi crei una grafica semplice senza un grande programma di design.
Posso modificare il tracciato di una forma complessa?
Sì. Il pannello mostra gli attributi grezzi, quindi puoi modificare un tracciato a mano. In pratica, usa la tela per gli spostamenti veloci e il campo attributo quando un valore deve essere esatto.
Posso cambiare riempimento e bordo?
Sì. L’editor scrive i colori nel codice, quindi imposti riempimento, colore e spessore del bordo per ogni forma. Inoltre puoi spuntare Senza riempimento, utile per un’icona a contorno.
L’editor tiene pulito il mio codice?
Sì. Scrive attributi ordinati mentre modifichi, quindi il codice copiato resta leggibile invece di una riga lunga. Tuttavia non carica file o script esterni, quindi l’export contiene solo ciò che hai disegnato.
L’editor SVG è gratis?
Sì, del tutto. Non c’è account, né prova, né filigrana. Inoltre il lavoro avviene nel tuo browser, quindi non ci sono costi di server. Ogni funzione resta gratis.
Funziona offline?
Sì. Una volta caricata la pagina, ogni modifica avviene in locale. Quindi puoi staccare la connessione e l’editor continua, perché non contatta mai un server.
Posso scaricare il risultato come file?
Sì. Il risultato è testo SVG, quindi lo copi negli appunti o lo salvi come file. Un file salvato si apre in ogni browser ed entra subito in un progetto web.
Posso convertire l’SVG in PNG?
Non in questa pagina. Questo strumento modifica codice vettoriale, mentre l’output in pixel spetta a un convertitore. Usa invece la pagina da SVG a PNG quando ti serve un’immagine di dimensione fissa.
Posso modificare un logo?
Sì, se hai il codice SVG. Un logo è fatto di forme, quindi puoi spostarle, ricolorarle e modificarne i numeri. Tuttavia questo editor non può cambiare un logo arrivato come immagine piatta, perché non ha dati di forma.
Posso impostare la dimensione della tavola?
Sì. I campi sotto la tela contengono larghezza, altezza e viewBox, quindi li cambi lì. In pratica, tieni il viewBox e cambia la dimensione solo quando ne serve una fissa.
L’editor salva il mio disegno?
No. Nessun server né memoria locale tiene nulla, quindi nessuna copia sopravvive alla sessione. Quando chiudi la scheda, il disegno sparisce. Perciò copia o scarica il risultato prima di uscire.
Posso usare l’editor sul telefono?
Sì. La pagina si adatta agli schermi piccoli, quindi modifichi su telefono o tablet. Tuttavia i trascinamenti precisi sono più facili al computer, quindi il telefono va bene per un cambio veloce di colore o dimensione.
Posso annullare una modifica?
Sì. L’editor tiene una breve cronologia, quindi Annulla torna indietro quando uno spostamento va male. La cronologia copre solo i passi recenti di questa sessione.
L’SVG è sicuro da incollare in una pagina?
Dipende dal file. Alcuni SVG contengono script, eventi o link esterni, quindi l’editor toglie quelle parti e tiene il disegno. Poi ti dice quante parti ha tolto.
Posso riordinare le forme?
Sì. L’SVG disegna le forme nel loro ordine, quindi spostare una parte su o giù nell’elenco dei livelli cambia cosa copre cosa. Metti lo sfondo per primo e i testi per ultimi, così tutto resta visibile.
L’editor aggiunge una filigrana?
No. L’export è una copia pulita del disegno in codice SVG. L’editor non aggiunge nulla né alcun marchio, perché scrive solo le forme, i colori e il testo che imposti.
Posso raggruppare le forme?
Un gruppo del tuo file resta un gruppo. Appare come un livello, quindi lo selezioni, lo sposti e lo ricolori come un pezzo solo. Tuttavia questo editor non crea nuovi gruppi, quindi racchiudi le forme in un tag g nel codice quando ti serve.
L’editor mi traccia o legge il mio codice?
No. Il tuo codice non viene mai inviato, e nessuno script di analisi lo legge. Così il disegno nasce sul tuo dispositivo, perché niente del file lascia la pagina.
Posso usare il risultato in un sito?
Sì. Il risultato è SVG puro, quindi entra in una pagina come immagine o come codice in linea. L’SVG in linea si stilizza e si anima con il CSS, mentre un tag immagine tiene la pagina più corta.
Altri strumenti per immagini e vettori
Alcune pagine a cui questo lavoro porta spesso.
Esporta il vettore finito come immagine di dimensione fissa.
Apri lo strumento →Converti tra PNG, JPG, WebP e altri.
Apri lo strumento →Convertitore da immagine a Base64
Inserisci una piccola immagine direttamente nel codice.
Apri lo strumento →Generatore di palette di colori
Crea una palette per riempimenti e bordi.
Apri lo strumento →Trasforma un’immagine in arte testuale fatta di caratteri.
Apri lo strumento →
Modifica subito il tuo primo SVG
Apri l’editor SVG, incolla il tuo codice o aggiungi una forma, poi spostala e cambiane lo stile sulla tela. Quando va bene, copia il codice pulito o scarica il file. Niente lascia il tuo dispositivo.