MoreOnlineTools
ESC

Workflow SVG

Visualizza, ottimizza ed esporta file SVG in 5 passaggi

Workflow SVG

Lavorare con gli SVG comporta diverse attività distinte: ispezionare il codice grezzo, rimuovere il gonfiore degli strumenti di design, esportare in formati raster, preparare immagini di anteprima e incorporare per il web. Questo workflow copre tutto in ordine.

5 passaggi ~20 min 5 strumenti
01

Ispezionare il codice sorgente SVG

Prima di modificare un SVG, devi capire la sua struttura — quali elementi sono presenti, se usa ID o classi, e quali metadati lo strumento di esportazione ha incluso.

Visualizzatore SVG
Incolla o carica il tuo SVG per vedere la sorgente XML formattata con un'anteprima live fianco a fianco.
Apri strumento
02

Ottimizzare e ridurre la dimensione del file

Gli SVG esportati da Illustrator o Figma contengono metadati non necessari, commenti dell'editor e attributi ridondanti che possono raddoppiare la dimensione del file.

Ottimizzatore SVG
Carica il tuo SVG per rimuovere automaticamente i dati non necessari e ottenere una versione pulita e minimizzata.
Apri strumento
03

Esportare come immagine raster

Alcuni contesti richiedono PNG o JPEG — i client email, certi CMS e le piattaforme di social media non renderizzano SVG in modo affidabile.

SVG in Immagine
Converti il tuo SVG ottimizzato in PNG o JPEG alla risoluzione scelta per i contesti in cui sono richieste immagini raster.
Apri strumento
04

Abbellire per presentazioni o documenti

Le semplici screenshot di SVG su sfondi bianchi sembrano incompiute. Aggiungere uno sfondo, padding e ombra le rende pronte per la presentazione.

Abbellitore Screenshot
Carica l'immagine esportata, aggiungi uno sfondo e una cornice con stile, poi scarica la versione curata.
Apri strumento
05

Codificare in Base64 per l'incorporamento inline

Incorporare SVG come URI di dati Base64 in CSS o HTML elimina una richiesta HTTP, utile per piccole icone in contesti critici per le prestazioni.

Immagine in Base64
Carica il tuo SVG o PNG esportato per ottenere la stringa URI di dati codificata in Base64 pronta per l'incorporamento.
Apri strumento

Consigli Pro

  • Ispeziona sempre prima il codice sorgente SVG — gli strumenti di ottimizzazione possono a volte rompere SVG con struttura o animazioni insolite.
  • Esporta a risoluzione 2x o 3x quando converti SVG in PNG per mantenerlo nitido su schermi ad alta densità.
  • La codifica Base64 aumenta la dimensione del file di circa il 33%, quindi usala solo per icone piccole dove eliminare la richiesta HTTP vale il compromesso.

Domande Frequenti

Può accadere. Controlla l'output ottimizzato nel visualizzatore di codice dopo l'ottimizzazione per confermare che gli attributi di animazione e i hook JavaScript siano intatti.

Per l'uso web, il doppio della dimensione di visualizzazione (es. 800px di larghezza per uno slot da 400px) dà risultati nitidi su schermi retina.

Sì. Il formato è: background-image: url("data:image/svg+xml;base64,..."). Lo strumento Immagine in Base64 genera la stringa URI di dati completa.

Le differenze di rendering dei font e i web font mancanti sono la causa più comune. Incorpora o converti in outline i font nel tuo SVG prima di esportare per evitarlo.

Sicurezza e Privacy

La sicurezza dei vostri dati è la nostra priorità

Elaborazione Locale

Tutta l'elaborazione avviene nel vostro browser

Nessun Trasferimento Dati

I vostri dati non vengono inviati ai nostri server

Nessun Archiviazione Dati

Nessun dato viene memorizzato o condiviso

Crittografia SSL

Crittografia SSL per connessione sicura