SVG Optimizer — SVG-optimerare

Varför optimera SVG-filer

SVG-filer som exporteras från designverktyg som Illustrator, Figma, Sketch eller Inkscape innehåller mycket mer än de former du ser. Metadata från redigeraren, XML-kommentarer, dolda lager, standardvärden för attribut, oanvända definitioner, onödigt många decimaler och överflödiga grupper kan lätt utgöra halva filen. Det här verktyget kör SVGO – samma optimerare som används i de flesta byggpipelines och ikonbibliotek – för att ta bort den barlasten. Mindre SVG-filer laddas snabbare, gör inbäddade ikoner i din HTML lättare och håller ordning i dina repon.

Standardinställningen tillämpar dussintals säkra transformationer: den tar bort XML-deklarationen, kommentarer, metadata och redigerarnas namnrymder, städar upp ID:n, kortar ner färger, slår ihop banor, omvandlar grundformer till kompakta banor när det blir kortare och skriver om bandata med relativa kommandon och färre siffror. Multipass upprepar processen tills inga fler besparingar hittas, vilket ofta ger några procent extra.

Så väljer du alternativ

Precision (precision) styr hur många decimaler som behålls i tal; 2–3 passar ikoner, medan detaljerade illustrationer eller kartor kan behöva fler. Remove <title> sparar byte men tar bort det tillgängliga namnet, så behåll det för meningsbärande grafik. Remove viewBox bör normalt vara avstängt, eftersom det är viewBox som gör att en SVG kan skalas responsivt. Remove width/height är användbart när storleken styrs av CSS. Remove scripts & event handlers tar bort <script>-element, on*-attribut och javascript:-länkar, en bra vana för SVG-filer från okända källor. Pretty print indenterar resultatet för bättre läsbarhet, på bekostnad av några byte.

Privata, lokala och säkra förhandsvisningar

All bearbetning sker i din webbläsare; inga filer laddas upp. Båda förhandsvisningarna visas via ett bildelement som läser in en lokal blob-URL, och webbläsare kör aldrig skript i SVG-filer som visas på det sättet. Jämför alltid de två förhandsvisningarna innan du använder resultatet: för aggressiv precision eller borttagen viewBox kan ändra hur en bild återges. Storleksmärkena visar hur många byte som sparats, så att du kan väga filstorlek mot visuell återgivning.