Komprimer SVG-filer

SVG er kode, ikke pixels

En SVG-fil (Scalable Vector Graphics) er et tekstdokument i XML, der beskriver former: stier, cirkler, overgange, tekst. Fordi den indeholder instruktioner i stedet for pixels, forbliver den skarp i enhver størrelse, fra et favicon på 16 pixels til en reklametavle. Ikoner, logoer, illustrationer, diagrammer og kort på nettet er ofte SVG, og formatet har været en W3C-standard siden 2001.

At være tekst har en bivirkning: filstørrelsen afhænger af, hvor ordrigt tegneprogrammet skrev filen, ikke af hvor stort billedet vises. To SVG'er, der ser helt ens ud, kan have flere gange så stor forskel i størrelse.

Det gør SVG-filer tungere end nødvendigt

• Metadata fra tegneprogrammet. Illustrator, Inkscape, Figma og Sketch tilføjer deres egne navnerum, lagnavne, eksportkommentarer og nogle gange en indlejret kopi af det redigerbare dokument.
• Overdreven præcision. Koordinater som 12.483920174, hvor 12.48 vises præcis ens i enhver realistisk størrelse.
• Overflødig struktur. Tomme grupper, skjulte lag, standardværdier for attributter, ubrugte definitioner og stilarter, der kunne være kortere.
• Lang stisyntaks. Absolutte kommandoer, hvor relative er kortere, gentagne kommandobogstaver, unødvendige mellemrum.
• Indlejrede bitmaps. Et foto sat ind i en illustration gemmes som Base64-tekst i SVG'en, hvilket fylder omkring en tredjedel mere end den originale billedfil.

Sådan optimerer værktøjet SVG

Værktøjet kører SVGO, den udbredte open source-optimering af SVG, i din browser. Den fjerner metadata og kommentarer, slår unyttige grupper sammen, forkorter stidata, afrunder tal til 3 decimaler som standard (du kan vælge 0 til 6) og fletter stilarter, og den gentager gennemløbene, til intet ændrer sig længere. Resultatet er stadig en almindelig SVG, som du kan åbne i ethvert tegneprogram eller indsætte i HTML. I vores test på otte SVG'er, fra håndoptimerede ikoner til en Inkscape-eksport fuld af programdata, lå besparelsen mellem 8 % og 42 %.

Teknisk set er optimeringen med tab i snæver forstand: afrunding flytter koordinater en anelse, og data, der er specifikke for tegneprogrammet, forsvinder, så du kan ikke åbne filen igen med alle dens oprindelige lag. Behold kildefilen fra dit designprogram, og betragt den optimerede SVG som den udgivne version.

Servere sender som regel SVG med gzip- eller Brotli-komprimering, som gør teksten mindre igen på vej til browseren. Optimering og serverkomprimering lægges sammen, for data, der er fjernet, skal slet ikke komprimeres.

Når en optimeret SVG går i stykker

• CSS eller JavaScript kan ikke længere finde et element. Optimeringsværktøjer forkorter eller fjerner id'er og klassenavne, der ser ubrugte ud i filen. Hvis din sides stilarter eller scripts bruger dem, så tjek resultatet, før du udgiver.
• Ikonet skalerer ikke længere. En SVG skal have sin viewBox-attribut for at kunne skalere korrekt. Værktøjet beholder den, så tjek, om originalen havde en; en SVG med kun fast bredde og højde har aldrig skaleret godt.
• Små former ser forvrængede ud. Meget små ikoner tegnet på et stort lærred kan lide under afrundingen. Det er sjældent med standardpræcisionen.
• Filen er mest et indlejret foto. Eksportér fotoet som en separat JPG eller WebP, og link til det, eller konvertér hele grafikken til en bitmap.

Spørgsmål om SVG

Relaterede sider

Bitmapbilleder håndteres af billedkomprimeringen. Baggrunden for, hvad der kører lokalt og hvorfor, finder du under Sådan virker det.