SVG-filen för stor? 8 tips för komprimering och optimering
Är din SVG för stor? 8 optimeringstekniker: färre ankarpunkter, sammanslagna sökvägar, ingen metadata, lägre precision, SVGO-komprimering, återanvändning av symboler, färre lager och gzip.
En SVG som väger hundratals kB eller till och med flera MB beror oftast på för många ankarpunkter, överflödiga sökvägar, redigeringsmetadata och alltför hög decimalprecision. De åtta tekniker nedan är ordnade från källa till leverans, och alla går att tillämpa i praktiken.
1. På sökvägsnivå: färre ankarpunkter, sammanslagna sökvägar
Tips 1: minska antalet ankarpunkter (förenkla sökvägar)
Ju fler ankarpunkter en sökväg har, desto större blir filen och desto långsammare blir renderingen. Öka jämnheten vid konverteringen så att antalet minskas redan i källan. För en befintlig SVG använder du Object → Path → Simplify i Illustrator eller Path → Simplify (Ctrl+L) i Inkscape för att ta bort överflödiga ankarpunkter. Att justera jämnhet och antal färger i PolySVG-konverteringsverktyget låter dig väga kvalitet mot filstorlek i realtid.
Tips 2: slå samman sökvägar och lager
Slå ihop flera sökvägar med samma fyllning till en för att ta bort upprepade attribut, flata meningslösa gruppnestingar och ta bort dolda lager och tomma element. I designprogram använder du sökvägssammanfogningen eller slår ihop lagren före export.
2. Inuti filen: ta bort metadata, sänk precisionen
Tips 3: ta bort redigeringsmetadata
SVG:er som exporterats från Illustrator eller Inkscape innehåller ofta redigeringsnamnrymder, <metadata>, kommentarer och exportinställningar som inte påverkar renderingen, så de kan tas bort manuellt eller rensas automatiskt av SVGO. Behåll däremot <title> och <desc> — de hjälper tillgängligheten.
Tips 4: sänk decimalprecisionen
Sökvägskoordinater har ofta sex till åtta decimaler, medan rendering på skärmen bara behöver en eller två. Att sätta floatPrecision till 1 eller 2 i SVGO-konfigurationen krymper filen märkbart utan synlig skillnad. För mycket små ikoner, var försiktig så att koordinaterna inte komprimeras för hårt — då förvrängs formen.
3. Automatisering: ett kommando med SVGO
Tips 5: optimera automatiskt med SVGO
SVGO är de facto standardverktyget för SVG-optimering och levererar med dussintals tillägg: att ta bort kommentarer och metadata, slå samman sökvägar, optimera sökvägskommandon och städa siffror. Grundläggande användning:
npx svgo input.svg -o output.svg
Typiska filer krymper med 30–70 %. Två förbehåll: ta inte bort attributet viewBox, annars bryts skalningen; och för ikoner som du vill färga om med CSS behåll fyllningen som ärvd i stället för att hårdkoda färgen.
Jämför filstorlek och faktisk överförd storlek i webbläsarens utvecklarverktyg före och efter optimeringen, så att du kan bekräfta vinsten. Ändra bara en typ av parameter åt gången, då blir det lätt att peka ut steget som orsakade problemet.
4. Struktur och återanvändning: symboler och färglager
Tips 6: återanvänd upprepade former med defs och use
När samma ikon syns flera gånger på en sida, definiera den en gång med <defs> och referera till den med <use>, eller bygg ett SVG-spriteark — filstorlek och antal anrop faller båda samtidigt.
Tips 7: håll koll på färglager och undvik inbäddade bitmaps
Sänk antalet färger vid vektoriseringen för att minska antalet lager, och använd en enhetlig färg i stället för en komplex gradient där du kan. Framför allt: undvik att bädda in base64-kodade bitmaps i en SVG — det gör en vektorfil till en rasterbärare och storleken blir omätbar. Kvarvarande sökvägar från konverteringen kan klickas bort i online-editorn.
5. Leverans: transportkomprimering och cache
Tips 8: slå på gzip/Brotli och cache
SVG är text, så att aktivera gzip eller Brotli på servern kortar vanligtvis den överförda storleken med ytterligare 60–80 %; ge statiska SVG-filer långlivade cache-huvud. Mycket små ikoner kan bäddas in direkt i HTML, vilket sparar ett anrop helt. Principerna bakom detta behandlas i Fördelarna med SVG; för att styra storleken redan i konverteringssteget, läs Sätt att konvertera en bild till SVG.
Ordningen spelar roll: styr antalet ankarpunkter och färglager i källan, rensa metadata och precision inuti filen, kör sedan SVGO och aktivera till sist transportkomprimering. Med alla fyra lager på plats krymper SVG-filer typiskt med en storleksordning.
Vanliga frågor
Ändrar komprimering med SVGO hur bilden ser ut?
Med standardkonfigurationen är den visuella skillnaden försumbar. Behåll viewBox, sänk inte koordinatprecisionen för mycket på små ikoner, och stäng av aggressiva tillägg en i taget vid behov.
Hur mycket kan en SVG normalt komprimeras?
Det beror på redundansen, men 30–70 % är vanligt; att lägga till gzip eller Brotli på servern kan korta den överförda storleken med ytterligare 60–80 %.