SVG-filen for stor? 8 tips for komprimering og optimalisering
Er SVG-filen din for stor? 8 optimaliseringsteknikker: færre ankerpunkter, sammenslåtte baner, ingen metadata, lavere presisjon, SVGO-komprimering, gjenbruk av symboler, færre lag og gzip.
En SVG som veier hundre kilo byte eller til og med flere megabyte skyldes som regel for mange ankerpunkter, overflødige baner, redigeringsmetadata og altfor høy decimalpresisjon. De åtte teknikkene nedenfor er sortert fra kilde til levering, og alle er praktiske å gjennomføre.
1. På banenivå: færre ankerpunkter, slå sammen baner
Tips 1: reduser ankerpunktene (forenkle banene)
Jo flere ankerpunkter en bane har, desto større blir filen og desto langsommere blir gjengivelsen. Øk jevnheten ved konverteringen for å redusere dem i kilden. For en eksisterende SVG bruker du Object → Path → Simplify i Illustrator eller Path → Simplify (Ctrl+L) i Inkscape for å fjerne overflødige ankerpunkter. Å justere jevnhet og antall farger i PolySVG-konverteringsverktøyet lar deg veie kvalitet mot filstørrelse i sanntid.
Tips 2: slå sammen baner og lag
Slå sammen flere baner med samme fylling til én for å fjerne gjentatte attributter, flatt meningsløs gruppenesting og slett skjulte lag og tomme elementer. I designprogrammer bruker du sammenslåingsfunksjonen for baner, eller slår sammen lagene før eksport.
2. Inne i filen: fjern metadata, senk presisjonen
Tips 3: fjern redigeringsmetadata
SVG-er eksportert fra Illustrator eller Inkscape inneholder ofte redigeringsnavnerom, <metadata>, kommentarer og eksportinnstillinger som ikke påvirker gjengivelsen, så de kan fjernes manuelt eller ryddes automatisk av SVGO. Behold derimot <title> og <desc> – de hjelper tilgjengeligheten.
Tips 4: senk decimalpresisjonen
Banekoordinater har ofte seks til åtte desimaler, mens gjengivelse på skjerm bare trenger én eller to. Å sette floatPrecision til 1 eller 2 i SVGO-konfigurasjonen krymper filen merkbart uten synlig forskjell. For svært små ikoner må du være forsiktig med å komprimere koordinatene for hardt, ellers forvrenges formen.
3. Automatisering: én kommando med SVGO
Tips 5: optimaliser automatisk med SVGO
SVGO er de facto standardverktøyet for SVG-optimalisering og kommer med dusinvis av utvidelser: å fjerne kommentarer og metadata, slå sammen baner, optimalisere banekommandoer og rydde opp i tall. Grunnleggende bruk:
npx svgo input.svg -o output.svg
Typiske filer krymper med 30–70 %. To forbehåll: ikke fjern attributtet viewBox, ellers brytes skaleringen; og for ikoner du vil farge med CSS, behold fyllingen som arvet i stedet for å hardkode fargen.
Sammenlign filstørrelse og faktisk overført størrelse i nettleserens utviklerverktøy før og etter optimaliseringen, slik at du kan bekrefte gevinsten. Endre bare én type parameter om gangen, da blir det lett å peke ut steget som skapte problemet.
4. Struktur og gjenbruk: symboler og fargelag
Tips 6: gjenbruk gjentatte former med defs og use
Når samme ikon dukker opp flere ganger på en side, definerer du den én gang med <defs> og viser til med <use>, eller lager et SVG-spriteark – både filstørrelse og antall forespørsler faller samtidig.
Tips 7: hold rede på fargelag og unngå innebygde rasterbilder
Senk antall farger ved vektoriseringen for å redusere antall lag, og bruk en ensartet farge der du kan i stedet for en kompleks gradient. Viktigst av alt: unngå å bygge inn base64-kodede rasterbilder i en SVG – det gjør en vektorfil til en rasterbærer, og størrelsen blir uhåndterlig. Gjenværende baner fra konverteringen kan klikkes bort i editoren på nett.
5. Levering: transportkomprimering og mellomlagring
Tips 8: slå på gzip/Brotli og cache
SVG er tekst, så å aktivere gzip eller Brotli på serveren korter vanligvis den overførte størrelsen med ytterligere 60–80 %; gi statiske SVG-filer langlivede cache-hoder. Svært små ikoner kan bygges inn direkte i HTML, noe som sparer en forespørsel helt. Prinsippene bak dette dekkes i Fordelene med SVG; for å styre størrelsen allerede i konverteringssteget, les Måter å konvertere et bilde til SVG.
Rekkefølgen betyr noe: styr ankerpunkter og fargelag i kilden, rydd metadata og presisjon inne i filen, kjør så SVGO, og slå til slutt på transportkomprimering. Med alle fire lagene på plass krymper SVG-filer vanligvis med en størrelsesorden.
Ofte stilte spørsmål
Endrer komprimering med SVGO hvordan illustrasjonen ser ut?
Med standardkonfigurasjonen er den visuelle forskjellen ubetydelig. Behold viewBox, ikke senk koordinatpresisjonen for mye på små ikoner, og slå av aggressive utvidelser én etter én ved behov.
Hvor mye kan en SVG vanligvis komprimeres?
Det avhenger av redundansen, men 30–70 % er vanlig; å legge til gzip eller Brotli på serversiden kan korte den overførte størrelsen med ytterligere 60–80 %.