Ottimizzare un SVG
SVG Optimiser
Toglie i residui lasciati dagli editor, fonde le trasformazioni e arrotonda la precisione dei tracciati, mostrando il confronto disegnato.
Un SVG salvato da uno strumento di design porta con sé i metadati dell'editor, liste di trasformazioni che nessuno ha srotolato e coordinate scritte con sette cifre decimali. Toglierle tutte è facile; la parte difficile è sapere se la fotografia è cambiata, ed è per questo che qui c'è una vista delle differenze e non solo un conteggio di byte.
Trascina qui un SVG
Oppure modifica il markup qui sotto. Non viene caricato nulla.
Modifica il markup
Come si usa
Trascinare l'SVG, oppure incollare il markup
Ottimizza mentre si scrive, quindi funzionano sia incollare un file sia modificarlo lì dentro.
Impostare la precisione
Su un viewBox da 24 unità, due cifre decimali sono un centesimo di pixel a 100× di ingrandimento. Sotto una cifra le icone cominciano a spostarsi in modo visibile.
Guardare la vista delle differenze
Sovrappone il file ottimizzato all'originale in modalità differenza: nero pieno vuol dire che si disegnano identici, e tutto quello che si accende è un pixel che si è mosso.
Copiare l'SVG oppure il data URI
Il data URI di qui è codificato come URL e non in Base64, quindi cresce di circa il 10% sul file grezzo invece che del 33%.
Domande frequenti
Perché «togliere i titoli» è disattivato in partenza?
Perché `<title>` è il nome accessibile di un SVG in linea. Toglierlo fa risparmiare una trentina di byte e trasforma un'icona etichettata in una senza etichetta per chiunque usi uno screen reader.
Dopo l'ottimizzazione la mia icona si è spostata un poco.
La precisione è troppo bassa per il suo viewBox. Un viewBox piccolo vuol dire che ogni unità è una frazione grande della fotografia, quindi arrotondare a una cifra decimale sposta le cose in modo visibile. Basta alzare la precisione finché la vista delle differenze non diventa nera.
Minifica anche i dati dei tracciati?
Arrotonda i numeri e vi incorpora una traslazione pura, e riporta quanti byte ha risparmiato così. Non riscrive i comandi in equivalenti più corti: quello cambia la famiglia della curva ed è il punto in cui gli ottimizzatori di tracciati introducono bug veri.
Può ricevere da
Generatore di favicon
Favicon Generator
Produce l’intero corredo di favicon — ICO, PNG, icona per Apple touch, manifesto web — più l’HTML da incollare.
Da SVG a PNG
SVG to PNG
Disegna un SVG in PNG, JPEG o WebP a qualsiasi fattore di scala, con lo sfondo trasparente o pieno.
Da immagine a SVG
Image to SVG
Ricalca una bitmap in tracciati SVG, tarato su loghi e disegni al tratto più che sulle fotografie.
Generatore di codici QR
QR Code Generator
Crea un QR per un URL, un testo, una rete wi-fi, una vCard o una stringa di pagamento, con correzione d’errore, logo ed esportazione in SVG.
Dopo
Questi accettano ciò che produce questo strumento, così il risultato può passare direttamente.
Generatore di favicon
Favicon Generator
Produce l’intero corredo di favicon — ICO, PNG, icona per Apple touch, manifesto web — più l’HTML da incollare.
Da SVG a data URI per CSS
SVG to CSS Data URI
Codifica un SVG come data URI da usare come sfondo CSS, applicando l’escape solo dove serve per tenerlo corto.
Editor di tracciati SVG
SVG Path Editor
Converte i dati di un tracciato tra comandi assoluti e relativi, lo sposta, lo ridimensiona, lo ruota e ne inverte il verso, e mostra il riquadro di delimitazione con l’anteprima.
Da SVG a PNG
SVG to PNG
Disegna un SVG in PNG, JPEG o WebP a qualsiasi fattore di scala, con lo sfondo trasparente o pieno.
Togliere lo sfondo
Background Remover
Elimina uno sfondo piatto o di un colore solo lavorando in OKLab e restituisce un PNG trasparente, con un pennello per rifinire i bordi.
Togliere i dati EXIF
EXIF Remover
Elimina dalle foto i metadati di fotocamera, GPS e modifica, lasciando i pixel intatti.