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
| Output | Ideale per | Note |
|---|---|---|
| SVG ottimizzato | Commit in un repository, sistemi di icone, <img src> | Sorgente più pulita; scarica o copia |
| Data URI (codificato in URL) | background-image CSS, HTML inline | Il data URI più piccolo per SVG (~20–30% sotto Base64) |
| Data URI (Base64) | Massima compatibilità, strumenti più vecchi | Più grande, ma non richiede mai escaping |
| Snippet CSS | Da incollare direttamente in un foglio di stile | Racchiude il data URI codificato in URL in background-image |
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
| Impostazione | Predefinito | Cosa fa |
|---|---|---|
| Precisione | 3 | Precisione di coordinate/numeri (0–8). La leva di dimensione più efficace; troppo bassa distorce le curve |
| Multipass | Attivo | Riesegue le passate finché l'output smette di ridursi |
| Rimuovi commenti / metadati | Attivo | Elimina <!-- --> e <metadata> / dati dell'editor |
| Ripulisci gli ID | Attivo | Minimizza e rimuove gli id inutilizzati |
| Rimuovi viewBox | Disattivo | Rimuoverlo rompe lo scaling responsive — il classico autogol di SVGO |
| Rimuovi width/height | Disattivo | Lascia che il CSS dimensioni l'icona tramite viewBox |
Rimuovi <title> / <desc> | Disattivo | Mantenuti di default per l'accessibilità |
| Ordina attributi | Disattivo | Ordine degli attributi deterministico per una migliore compressione gzip e migliori diff |
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.
