Tools 4 All
Home
Strumenti per immagini

Editor SVG online

Un editor vettoriale veloce e professionale nel browser: disegna con la penna, modifica i nodi, combina forme, applica sfumature, anima, poi esporta SVG ottimizzati o PNG. Non viene caricato nulla.

GratisNessuna registrazioneFunziona in locale: i file non lasciano mai il tuo dispositivo

Guida rapida e scorciatoie

Scegli uno strumento a sinistra (o premi il suo tasto), trascina sull'area di lavoro per disegnare e usa il pannello Design a destra per applicare stili alla selezione. Premi ? in qualsiasi momento per l'elenco completo delle scorciatoie.

  • Navigazione: scorri per spostare la vista, Ctrl/⌘ + scorrimento o pizzica per lo zoom, tieni premuto Space e trascina per spostare la vista. Shift+1 adatta lo zoom.
  • Seleziona: fai clic, Shift+clic o trascina un riquadro di selezione. Fai doppio clic su un gruppo per entrarvi, su un tracciato per modificarne i nodi o su un testo per scrivere.
  • Trasforma: trascina le maniglie per scalare (Shift mantiene le proporzioni, Alt scala dal centro), trascina la manopola rotonda per ruotare e Ctrl/⌘+trascina una maniglia laterale per inclinare.
  • Penna: fai clic per gli angoli, trascina per le curve, fai clic sul primo nodo per chiudere il tracciato e premi Enter per terminare.
  • File: trascina SVG o immagini in qualsiasi punto dell'editor, incolla codice SVG o screenshot, e il salvataggio automatico conserva il tuo lavoro.
Untitled
Guide, features and FAQ

Come usare l'editor SVG

  1. Apri o inizia a disegnare

    Trascina un SVG, PNG o JPEG sull'area di lavoro, apri un file o inizia con una pagina vuota. Non viene caricato nulla: l'editor funziona interamente nel browser.

  2. Disegna e modifica

    Usa gli strumenti penna, matita e forme, poi perfeziona i tracciati nodo per nodo, combina forme con le operazioni booleane e applica stili a riempimenti, tracce e sfumature.

  3. Organizza

    Raggruppa, riordina e blocca gli oggetti nel pannello Livelli, allineali e distribuiscili, riutilizza la grafica come simboli e modifica direttamente il codice SVG.

  4. Esporta

    Scarica SVG ottimizzati, PNG, JPEG o WebP a qualsiasi scala, oppure copia il risultato come codice SVG, data URI, componente React o SVG pronto per Tailwind che prende il colore dal CSS.

Un editor SVG professionale che funziona interamente nel browser

L'Editor SVG di Tools 4 All è un'applicazione completa di grafica vettoriale che si apre all'istante, senza download, account né caricamenti. Usalo per disegnare loghi, icone, illustrazioni, diagrammi ed elementi di interfaccia, o per ripulire e perfezionare file SVG che hai già. È costruito attorno al formato SVG stesso, quindi il file che esporti è lo stesso documento che hai modificato: nessun formato proprietario, nessuna conversione nascosta.

Cosa puoi fare

  • Disegna con precisione: strumento penna con curve di Bézier, matita a mano libera con smussatura, rettangoli con angoli arrotondati, smussati o invertiti indipendenti, ellissi, linee, un pennello blob, una gomma, un coltello e una forbice, e forme modificabili: poligoni, stelle, triangoli, croci, cornici, anelli, settori, mezzelune, frecce, fumetti, ingranaggi, cuori, nuvole, fiori e spirali, e testo.
  • Modifica i tracciati nodo per nodo: sposta nodi e maniglie, converti tra nodi angolari, smussati e simmetrici, aggiungi ed elimina nodi, unisci e spezza tracciati, piega direttamente i segmenti e aggancia le maniglie alle tangenti.
  • Combina forme: unione, sottrazione, intersezione, esclusione e divisione, più contorno della traccia, offset del tracciato, semplificazione e inversione, tutto calcolato dal nostro motore geometrico che preserva le curve in un worker in background.
  • Applica stili a tutto: colori pieni, sfumature lineari e radiali con maniglie sull'area di lavoro, motivi, opacità per riempimento e per traccia, tratteggi, terminazioni, giunzioni, punte di freccia, metodi di fusione, effetti di sfocatura e ombra esterna, tracciati di ritaglio e maschere.
  • Resta organizzato: un pannello dei livelli con riordino tramite trascinamento, rinomina e annidamento, blocco e nascondi, raggruppa e separa, allinea e distribuisci rispetto alla selezione, alla tavola da disegno o a un oggetto chiave, campioni del documento e simboli riutilizzabili.
  • Lavora come un professionista: guide smart con etichette di distanza e indicazioni di spaziatura uguale, aggancio alla griglia, ai pixel, alle guide dei righelli, ai nodi e ai tracciati, campi numerici X/Y/L/A/rotazione, annullamento illimitato e scorciatoie in stile Figma e Illustrator.
  • Codice ed esportazione: una vista del codice SVG bidirezionale, un'esportazione SVG ottimizzata con indicazione delle dimensioni, PNG/JPEG/WebP a qualsiasi scala e copia come SVG, data URI, React (JSX o TSX), SVG per Tailwind o sfondo CSS.
  • Pensato per la produzione web: colori del documento con sostituzione in un clic e Converti in currentColor, testo in contorni, contorno della traccia, appiattimento delle trasformazioni e separazione dei gruppi, adattamento dell'area di lavoro al contenuto e semplificazione dei tracciati irregolari.
  • Un vero spazio di lavoro: più disegni in schede, ognuno con la propria cronologia di annullamento, menu brevi con sottomenu, un pannello laterale che si richiude (Ctrl/⌘+B) e modifica a schermo intero su telefoni e desktop.

Perché conta un editor nativo SVG

Molti strumenti di design trattano l'SVG come un formato di esportazione: disegni nel loro modello e l'SVG viene generato alla fine. Funziona per icone semplici. Non funziona più quando devi modificare un file esistente, mantenere gli id da cui dipendono il tuo CSS o JavaScript, o capire perché un file è dieci volte più grande del dovuto. Questo editor lavora direttamente sul documento SVG. I gruppi restano gruppi, le sfumature restano sfumature e un <symbol> usato cinque volte resta un solo simbolo. Quando rinomini un livello, stai impostando l'id dell'elemento.

Veloce anche con file grandi

La velocità è stata un obiettivo di progettazione fin dalla prima riga di codice. Il disegno viene reso nativamente dal browser all'interno di un livello isolato. Le maniglie di selezione, i contorni al passaggio del mouse e le guide sono disegnati su una sovrapposizione separata, così muovere il mouse non tocca mai il documento. Un indice spaziale (un R-tree) trova ciò che si trova sotto il puntatore in microsecondi, anche con decine di migliaia di forme. Nei documenti pesanti, lo spostamento della vista e lo zoom vengono affidati al compositore della GPU e i vettori vengono ridisegnati nitidi quando ti fermi. Le operazioni onerose, come le operazioni booleane, l'offset dei tracciati e l'ottimizzazione SVG, vengono eseguite in un Web Worker, così l'interfaccia resta reattiva.

Strumenti di precisione per il lavoro vettoriale

Usa lo strumento penna per fare clic sugli angoli e trascinare curve morbide. Tieni premuto Shift per mantenere angoli di 45° e Alt per spezzare una maniglia. Con lo strumento nodo puoi trascinare un segmento per piegarlo, fare doppio clic per aggiungere un nodo o selezionare più nodi e allinearli. Le guide smart indicano quando un oggetto è allineato ai bordi o ai centri degli oggetti vicini e quando la spaziatura tra gli oggetti è uguale. Puoi anche trascinare guide fuori dai righelli. Per valori esatti, digita X, Y, larghezza, altezza e rotazione nel pannello Design. I campi accettano espressioni aritmetiche come 120+16 o 200/3.

Esportazioni pulite e leggere

Gli editor lasciano spesso nei file che salvano metadati, definizioni inutilizzate, gruppi ridondanti e numeri troppo precisi. La finestra di esportazione esegue in background un ottimizzatore in stile SVGO. Arrotonda i numeri alla precisione che scegli, converte i dati dei tracciati nella forma più breve, rimuove i metadati dell'editor e le definizioni inutilizzate, accorcia id e colori e scioglie i gruppi inutili. Ogni ottimizzazione può essere disattivata e la finestra mostra le dimensioni del file prima e dopo. Per l'output raster, scegli PNG, JPEG o WebP a 1×, 2×, 4× o a dimensioni esatte in pixel, con o senza sfondo trasparente.

Pensato per la produzione web

Gli SVG destinati a siti web e app hanno esigenze diverse dalla grafica per la stampa. L'elenco Colori del documento mostra ogni colore usato nel file: cambiane uno e tutto ciò che lo condivide si adegua, oppure convertilo in currentColor perché un'icona React o Tailwind prenda il colore dal CSS. I file importati hanno spesso gruppi annidati e trasformazioni che rendono i tracciati difficili da modificare: Appiattisci trasformazioni e separa li incorpora nelle coordinate in un solo passaggio, e Adatta al contenuto ritaglia il viewBox sulla grafica, tracce comprese. Testo in contorni e Contorno della traccia trasformano testi e spessori delle linee in semplici tracciati che appaiono uguali ovunque, e Semplifica elimina le centinaia di punti di una forma vettorializzata o disegnata a mano libera.

I tuoi file restano sul tuo dispositivo

Dietro l'editor non c'è alcun server. Aprire un file lo legge dal tuo disco nella pagina, ed esportare genera il file sul tuo dispositivo. Il salvataggio automatico scrive nell'archivio privato IndexedDB del browser, che conserva anche l'elenco dei file recenti. Se chiudi la scheda per sbaglio, l'ultimo documento viene ripristinato alla visita successiva.

Scopri altri strumenti per immagini

Domande frequenti

Questo editor SVG è davvero gratuito e privato?
Sì. È gratuito, non richiede account e funziona al 100% nel browser. I tuoi disegni non vengono mai caricati: i file vengono letti in locale, il salvataggio automatico va nell'archivio del browser (IndexedDB) e le esportazioni vengono generate sul tuo dispositivo.
Può aprire file SVG da Illustrator, Inkscape, Figma o librerie di icone?
Sì. L'editor lavora direttamente sul documento SVG, quindi i file reali mantengono struttura, id, stili, sfumature, simboli, tracciati di ritaglio e maschere. I file disordinati o non validi vengono riparati all'apertura, gli script sono disattivati durante la modifica e i file .svgz vengono decompressi automaticamente.
Ha uno strumento penna e operazioni booleane come Illustrator?
Sì. Lo strumento penna disegna tracciati di Bézier con nodi angolari, smussati e simmetrici, e lo strumento nodo ti permette di aggiungere, eliminare, convertire, unire, spezzare e allineare i nodi. Unione, sottrazione, intersezione, esclusione e divisione lavorano sulle curve e le mantengono curve, e puoi anche convertire le tracce in contorni, applicare offset e semplificare i tracciati.
Posso animare un SVG?
Sì. Apri lo spazio di lavoro Animazione, sposta l'indicatore di riproduzione e modifica posizione, rotazione, scala, opacità o colori di un oggetto: ogni modifica diventa un fotogramma chiave con una curva di andamento, e le proprietà già animate ricevono automaticamente un nuovo fotogramma chiave. Le animazioni vengono salvate come SVG standard (SMIL), quindi si riproducono in ogni browser senza alcuno script.
Posso modificare direttamente il codice SVG?
Sì. Il pannello Codice mostra il sorgente SVG in tempo reale con evidenziazione della sintassi. Modificare il codice aggiorna il disegno, e modificare il disegno aggiorna il codice. Ogni modifica, da entrambi i lati, può essere annullata.
Quali formati di esportazione sono supportati?
Un SVG ottimizzato, prodotto da un ottimizzatore integrato in stile SVGO con indicazione delle dimensioni prima e dopo, e PNG, JPEG e WebP a 1×, 2×, 4× o a dimensioni personalizzate, con trasparenza facoltativa. Puoi anche copiare la selezione come codice SVG, come data URI o come JSX per React.
Perderò il mio lavoro se il browser si chiude?
No. Il documento viene salvato automaticamente nell'archivio locale del browser un attimo dopo ogni modifica. La volta successiva che apri l'editor, ripristina l'ultima sessione, e i documenti precedenti restano disponibili in File → File recenti.
Posso far usare currentColor a un'icona per React o Tailwind?
Sì. La sezione Colori del documento elenca ogni colore del disegno (ogni scrittura di un colore conta una volta). Fai clic su un campione per selezionare tutto ciò che lo usa e cambiarlo ovunque in una volta, oppure scegli Converti in currentColor: l'icona prende allora il colore dal CSS, ad esempio da una classe text-… di Tailwind, mantenendo il suo aspetto nell'editor. Copiala come componente React o SVG per Tailwind dal menu Modifica o dal menu contestuale.
Come converto il testo in tracciati o una traccia in una forma piena?
Seleziona il testo e scegli Testo in contorni (Ctrl/⌘+Shift+O): ogni glifo diventa un tracciato esattamente dove il browser l'ha disegnato, compresi il testo su tracciato e gli span con stili. Per le tracce, Contorno della traccia trasforma la traccia in una forma piena che ne rispetta spessore, terminazioni, giunzioni e tratteggi, così un logo mantiene il suo peso a qualsiasi dimensione.
Può ripulire SVG importati con trasformazioni e gruppi annidati?
Sì. Appiattisci trasformazioni e separa scrive ogni trasformazione nelle coordinate dei tracciati e scioglie i gruppi in un unico passaggio annullabile, mantenendo solo ciò che altrimenti cambierebbe l'aspetto (gruppi ritagliati, mascherati o referenziati). Adatta al contenuto ritaglia l'area di lavoro (viewBox, larghezza e altezza) sulla grafica, tracce comprese, con margine facoltativo, e Semplifica riduce il numero di punti dei tracciati irregolari.
Posso lavorare su più disegni contemporaneamente?
Sì. Ogni disegno si apre in una propria scheda sopra l'area di lavoro, con la propria cronologia di annullamento, selezione e zoom. Passa liberamente dall'uno all'altro; chiudendo una scheda il file resta in File → File recenti, e le schede aperte tornano alla visita successiva.
Dove sono tutti i comandi? I menu sono brevi.
I comandi correlati si trovano nei sottomenu (Disponi, Trasforma, Tracciato, Ritaglio e maschera, Copia come, Allinea e distribuisci…). Passaci sopra con il mouse o toccali, oppure usa i tasti freccia. Ogni comando ha anche una scorciatoia: premi ? per l'elenco completo. Su desktop puoi richiudere il pannello laterale con Ctrl/⌘+B per dare più spazio all'area di lavoro.
Funziona su telefoni e tablet?
Sì. Sugli schermi piccoli gli strumenti passano a una barra in basso e i pannelli si aprono come fogli. Pizzica per lo zoom, trascina con due dita per spostare la vista e tieni premuto per il menu contestuale.
Quanto possono essere grandi i miei disegni?
L'editor è pensato per i file pesanti. Usa un indice spaziale per il rilevamento dei clic e la selezione, un livello di sovrapposizione separato per maniglie e guide, spostamento della vista e zoom gestiti solo dal compositore nei documenti grandi e Web Worker per geometria e ottimizzazione. I documenti con decine di migliaia di elementi restano reattivi.
Tutti gli strumenti per immagini →
Compressore di immagini Riduci le dimensioni dei file immagine mantenendo la qualità visiva. Convertitore di immagini Converti immagini tra PNG, JPEG, WebP, GIF, BMP, ICO, TIFF e altri formati. Ridimensiona immagini Ridimensiona le immagini a dimensioni esatte: perfetto per le foto tessera. Da immagine a PDF Unisci una o più immagini in un unico documento PDF.