Editor SVG online gratuito — Disegna forme e testo e scarica l'SVG
Disegna forme, frecce, linee a mano libera e testo su una tela, poi scarica un SVG pulito o un PNG. Gratis, nel browser, senza registrazione.
Fai clic su una forma per selezionarla, trascinala per spostarla, trascina una maniglia per ridimensionarla. I tasti freccia la spostano di poco (Shift per 10 px).
Scorciatoie da tastiera
- V Seleziona / sposta
- R Rettangolo
- E Ellisse
- G Triangolo
- S Stella
- L Linea
- A Freccia
- P Penna a mano libera
- T Testo
- Ctrl/⌘ Z annulla, Shift per ripetere
- Ctrl/⌘ D duplica
- Del elimina la selezione
- Frecce sposta di 1 px, Shift di 10 px
- Shift durante il disegno: quadrato, cerchio, linea a 45°
- Esc deseleziona o annulla un trascinamento
Tutto avviene nel browser: nulla viene caricato e il disegno viene salvato automaticamente in locale, così non lo perdi aggiornando la pagina. Ti serve un logo, un diagramma illustrato o un'identità di marca completa invece di uno schizzo veloce? Scopri altri strumenti gratuiti.
Hai trovato un problema o qualcosa che potrebbe andare meglio? Leggiamo ogni messaggio e sistemiamo le cose in fretta.
Questo editor SVG gratuito ti permette di disegnare una grafica vettoriale nel browser e scaricarla come SVG pulito o come PNG, senza account e senza caricare nulla. Scegli uno strumento forma, trascina sulla tela, imposta riempimento e contorno, aggiungi una freccia e un'etichetta, e il file è pronto. È fatto per i lavori da trenta secondi: uno schema per una slide, un'icona semplice, un logo provvisorio, un riquadro annotato per la documentazione.
Di proposito non è un clone di Illustrator. Non ci sono pannelli dei livelli, operazioni booleane né modifica dei nodi di Bézier, perché sono proprio queste funzioni a richiedere un pomeriggio intero per imparare le suite vettoriali complete. In cambio hai tutti gli strumenti che servono a un disegno veloce, scorciatoie da tastiera per ognuno, un annulla che funziona come ti aspetti e un'esportazione che contiene solo le tue forme: niente metadati dell'editor, niente font incorporati, nessuna sorpresa quando lo apri altrove.
Come si usa
- Scegli una dimensione della tela tra i formati predefiniti (icona, post quadrato, Full HD) o inserisci la tua, e scegli uno sfondo trasparente o colorato.
- Seleziona uno strumento: rettangolo (R), ellisse (E), triangolo, stella, linea (L), freccia (A), penna a mano libera (P) o testo (T). Trascina sulla tela per disegnare; tieni premuto Shift per un quadrato, un cerchio o una linea a 45° perfetti.
- Fai clic su una forma con lo strumento di selezione (V) per spostarla, trascina una maniglia per ridimensionarla e modificane riempimento, contorno, opacità o raggio degli angoli nel pannello. I tasti freccia la spostano di 1 px, con Shift di 10 px.
- Duplica con Ctrl/⌘ D, elimina con Canc, riordina con i pulsanti Avanti / Indietro e annulla qualsiasi cosa con Ctrl/⌘ Z.
- Scarica SVG per un file scalabile, Scarica PNG (da 1× a 3×) per una bitmap, oppure Copia il codice per incollare l'SVG direttamente in HTML. Il disegno viene salvato automaticamente in questo browser, se vuoi riprenderlo più tardi.
Domande frequenti
Questo editor SVG è davvero gratuito e senza registrazione?
Sì. Niente account, niente filigrane, nessun limite di esportazione e nessuna offerta a pagamento. L'editor funziona interamente nel browser; puoi scollegarti da internet dopo il caricamento della pagina e continua a funzionare. Creiamo questi strumenti perché portano persone sul sito, e alcune di loro in seguito hanno bisogno del lavoro di design, web o software che facciamo per i clienti.
Cosa posso disegnare?
Rettangoli (con angoli arrotondati), ellissi e cerchi, triangoli, stelle a cinque punte, linee rette, frecce, tratti a mano libera e testo in tre famiglie di font. Ogni forma ha il proprio riempimento, contorno, spessore e opacità, può essere spostata, ridimensionata, duplicata e riordinata, e si aggancia a una griglia di 10 px se vuoi. Copre schemi, icone semplici, annotazioni e loghi provvisori. Non copre la modifica dei nodi di Bézier, i gradienti, i livelli o le operazioni booleane; per quelli ti servono Inkscape o Figma.
Posso aprire e modificare un file SVG esistente?
In parte, e l'editor ti dice esattamente in che misura. Apri SVG importa rettangoli, cerchi, ellissi, linee, polilinee, poligoni, tracciati e testo, mantenendone colori e posizioni. Tutto ciò che non può rappresentare fedelmente viene saltato invece che stravolto, e un messaggio riporta cosa è stato saltato: elementi con attributo transform, gruppi con trasformazioni, riferimenti <use> e <image>, riempimenti a gradiente e fogli di stile CSS. Icone e schemi semplici si aprono senza problemi; un'illustrazione complessa esportata da Illustrator in genere no, e preferiamo dirlo piuttosto che far finta del contrario.
Meglio scaricare SVG o PNG?
SVG se la grafica verrà ridimensionata, modificata in seguito o usata su un sito web: resta nitida a qualsiasi dimensione, di solito è molto più leggera di un PNG e si può stilizzare con CSS. PNG se ti serve una bitmap fissa: da incollare in un documento o in una slide che gestisce male l'SVG, da caricare su una piattaforma che rifiuta l'SVG o da inviare a qualcuno che vuole solo un'immagine. Le opzioni 2× e 3× ti danno un PNG nitido per gli schermi ad alta densità. Nel dubbio, scaricali entrambi: sono gratis.
Il mio disegno viene caricato da qualche parte?
No. Disegno, modifica ed esportazione avvengono tutti nel browser con le API standard SVG e Canvas. Non viene inviato nulla al nostro server. Il disegno viene salvato automaticamente nella memoria locale del browser, così un aggiornamento della pagina o una scheda chiusa per sbaglio non lo fanno perdere; quella copia resta sul tuo dispositivo e viene cancellata quando premi Nuovo.
Posso usare i file SVG per scopi commerciali?
Sì. Ciò che disegni è tuo, senza licenze e senza obbligo di attribuzione, per uso personale o commerciale. Il file esportato contiene solo le tue forme e markup SVG standard, quindi non c'è nulla di nostro da concedere in licenza.
Perché l'esportazione appare leggermente diversa dalla tela?
L'editor disegna con lo stesso SVG che il browser visualizzerà, quindi le forme corrispondono esattamente. Due cose possono differire: la griglia, che esiste solo nell'editor e non viene mai esportata, e il testo, che usa famiglie di font generiche (Arial, Georgia, Courier New) perché il file venga visualizzato allo stesso modo su qualsiasi computer senza incorporare font. Se a un visualizzatore manca uno di questi font, lo sostituisce con uno simile, e la larghezza del testo può cambiare di qualche pixel.
SVG o PNG: cosa significa davvero la differenza
Un SVG è un file di testo che descrive forme: un rettangolo a queste coordinate, largo così, di questo colore. Un PNG è una griglia di pixel. Questa sola differenza spiega tutte le conseguenze pratiche. L'SVG si ridimensiona a qualsiasi misura senza sfocarsi, per uno schema semplice spesso pesa poche centinaia di byte, si può modificare in seguito e si può ricolorare con CSS in una pagina web. Il PNG resta fisso alla dimensione con cui l'hai esportato, diventa più pesante man mano che l'immagine cresce e si può modificare solo come pixel.
L'SVG è la scelta predefinita giusta per loghi, icone, schemi e qualsiasi cosa su un sito web. Il PNG è giusto quando la destinazione non gestisce l'SVG (molti client email, alcuni programmi per documenti, la maggior parte dei social) o quando chi lo riceve vuole solo un'immagine da mettere ovunque. L'editor esporta entrambi dallo stesso disegno, quindi la scelta non costa nulla.
Per cosa è adatto questo editor e per cosa no
• Schemi veloci: riquadri, frecce ed etichette per una slide, un README o un ticket di assistenza. Griglia e aggancio tengono tutto allineato senza fatica.
• Icone semplici e favicon: disegna a 256 × 256 o 512 × 512 con sfondo trasparente, scarica l'SVG, poi passalo nel generatore di favicon per ottenere tutte le dimensioni che servono a un sito.
• Loghi e marchi provvisori: una forma, una lettera, un colore. Abbastanza per far superare a un prototipo o a una presentazione la fase dello spazio vuoto.
• Annotazioni: apri un grafico o uno schema SVG semplice, aggiungi un cerchio e una freccia attorno alla parte di cui parli, esporta.
Non è lo strumento per illustrazioni, design ricchi di tipografia o qualsiasi cosa con curve da modellare punto per punto. I tratti a mano libera vengono ammorbiditi automaticamente ma non si possono modificare in seguito. Per questo tipo di lavoro Inkscape è gratuito ed eccellente, e il piano gratuito di Figma va bene per la grafica delle interfacce. Sapere quando passare a qualcosa di più grande fa parte del saper usare bene uno strumento piccolo.
Consigli per file SVG puliti
Disegna alla dimensione che ti serve. Un'icona disegnata su una tela di 1920 × 1080 viene esportata con quel viewBox e chiunque la usi dovrà ridimensionarla. Imposta prima la tela alle dimensioni previste; i formati predefiniti coprono quelle più comuni.
Per i disegni al tratto preferisci il contorno al riempimento e mantieni spessori coerenti: spessori misti sono il modo più rapido per dare a uno schema un'aria dilettantesca. Due o tre colori bastano quasi sempre, e i campioni nel pannello sono scelti per stare bene insieme.
Lascia il testo come testo. Questo editor esporta veri elementi <text> invece di convertirli in tracciati, il che mantiene il file leggerissimo e ricercabile e ti permette di cambiare le parole in seguito. Se uno strumento a valle pretende i contorni, fai la conversione lì, come ultimo passaggio.
Lascia lo sfondo trasparente, a meno che non ti serva proprio un colore. Un SVG trasparente si inserisce in qualsiasi pagina o slide; un rettangolo bianco dietro un logo no.
Strumenti gratuiti correlati
- Creatore di diagrammi ER — Scrivi lo schema del database come testo e guarda il diagramma entità-relazione prendere forma dal vivo; esporta in PDF o SVG.
- Creatore di mappe mentali — Scrivi una scaletta rientrata e ottieni subito una mappa mentale, da esportare in PDF o SVG. Niente account, niente trascinamenti.
- Generatore di favicon — Trasforma qualsiasi logo in un pacchetto favicon completo (favicon.ico, tutte le dimensioni PNG, Apple touch icon e webmanifest) con un clic.
- Convertitore di immagini — Converti tra AVIF, HEIC, TIFF, PNG, JPG, WebP, GIF, BMP e SVG. La maggior parte delle conversioni non esce mai dal browser.