SVG-optimerare

Ikoner och logotyper som exporteras från designverktyg som Illustrator, Figma eller Sketch släpar med sig en hel del barlast som inte har något med bildens utseende att göra: redigerarmetadata, XML-kommentarer, onödiga gruppomslag, koordinater skrivna med femton decimaler och id:n som ingen refererar till. Inget av detta påverkar renderingen, men det gör varje nedladdning större — och om din webbplats använder dussintals SVG-ikoner adderar den overheaden snabbt upp sig.

Det här verktyget kör svgo, samma optimeringsmotor som ligger bakom SVGOMG, helt inuti din webbläsare. Klistra in SVG-kod eller släpp en fil, så tar den bort kommentarer och redigerarskräp, slår ihop paths där det går, komprimerar onödiga grupper och avrundar koordinater till den precision du väljer — allt utan att någonsin lämna din enhet. Det finns inget uppladdningssteg och ingen server inblandad, så det fungerar lika bra för en privat kundlogotyp som för en offentlig ikon.

Standardinställningarna är medvetet konservativa: de bevarar viewBox (så att ikonen fortsätter skalas korrekt oavsett var den placeras) och lämnar width/height orört. Att slå på "Ta bort width/height" är användbart när du bäddar in SVG:n inline och styr storleken med CSS istället, eftersom fasta dimensioner på rotelementet annars kan krocka med ditt stilmall. Multipass kör optimeraren mer än en gång och fångar besparingar som bara dyker upp efter att den första omgången redan förenklat koden — det skadar sällan att låta den vara på.

Precision styr hur många decimaler som bevaras i path-koordinater; att sänka den krymper filen ytterligare men kan ge upphov till små visuella avvikelser i mycket detaljerad grafik, så det är värt att kontrollera förhandsvisningen live efter att ha justerat den. För de flesta ikoner och logotyper minskar standardinställningarna ensamma vanligtvis filstorleken med 40–60% utan någon synlig skillnad — använd förhandsvisningen och räknaren för storlek före/efter för att bekräfta det innan du laddar ner.