Ottimizza un SVG nel tuo browser e copialo come file ottimizzato, come data URI o come sfondo CSS — basato su SVGO, senza alcun caricamento. Trascina o incolla un'icona, regola le impostazioni e ottieni la forma inline più piccola per CSS, HTML o il tuo design system.
Come funziona
Lo strumento carica SVGO — l'ottimizzatore SVG standard, lo stesso motore dietro SVGOMG — una sola volta da una CDN pubblica, poi viene eseguito interamente sul tuo dispositivo. Rimuove i metadati dell'editor, i commenti e i dati ridondanti, e arrotonda le coordinate a una precisione a tua scelta. Il codice ottimizzato viene quindi offerto in quattro forme pronte all'uso, affiancate da un'anteprima in tempo reale e dalla dimensione prima/dopo.
Passaggi
- Trascina un file
.svgsull'area di caricamento, oppure incolla il tuo codice SVG nella casella sorgente. - Regola le opzioni di ottimizzazione — abbassa la Precisione per file più piccoli, oppure lascia i valori predefiniti sicuri.
- Osserva l'anteprima e la riduzione della dimensione aggiornarsi in tempo reale.
- Copia la forma di cui hai bisogno (SVG, data URI o CSS) oppure scarica l'
.svgottimizzato.
Forme di output — quale copiare
Quando usare codificato in URL o Base64
L'SVG è testo, e Base64 gonfia il testo di circa un terzo. Per l'SVG in particolare il data URI codificato in URL è più piccolo e altrettanto valido in CSS e HTML, quindi è la scelta predefinita per uno sfondo CSS. Ricorri a Base64 solo quando uno strumento di build o una piattaforma altera i caratteri riservati in un URI codificato in URL.
Impostazioni di ottimizzazione
Esempio
Un'icona da 2,1 KB esportata da uno strumento di design — piena di metadati dell'editor, commenti e coordinate a 6 decimali — tipicamente scende ben al di sotto di 1 KB con le impostazioni predefinite, poi a una stringa inline data:image/svg+xml,... che puoi incollare direttamente in una regola CSS senza richieste aggiuntive.
Privato per progettazione
Il tuo SVG non lascia mai il tuo browser. Dalla CDN viene recuperato solo il codice di SVGO (una volta sola, poi in cache); il markup che incolli o trascini viene ottimizzato localmente, quindi è sicuro per icone interne e asset di brand non ancora pubblicati.
