SVG-optimerare

Komprimera SVG-filer online — ta bort metadata, kommentarer och onödiga attribut för att minska filstorleken

Dela:

SVG-optimerare

Varför optimera SVG-filer?

SVG-filer exporterade från Illustrator, Figma och Inkscape innehåller mycket onödig data — kommentarer, redigeringsmetadata, redundanta attribut, alltför hög decimalprécision och tomma behållare. Efter optimering kan filstorleken minska med 30-70 % och laddningen bli snabbare.

🎯

8 optimeringsstrategier

Aktivera/inaktivera varje optimeringspassage oberoende för detaljkontroll

📊

Statistik för storleksminskning

Se ursprunglig storlek, optimerad storlek och besparingsprocent efter varje optimering

✅

Förlustfri optimering

Alla optimeringar bevarar SVG:ns visuella utseende — tar bara bort osynlig metadata

Optimera SVG i 3 steg

1

Klistra in SVG-kod

Kopiera SVG-källkoden från ett designverktyg eller en fil och klistra in den i inmatningsfältet

2

Välj optimeringar

Markera de optimeringsalternativ du vill tillämpa — standardinställningarna ger maximal minskning

3

Kopiera och använd

Kopiera den optimerade SVG:n och ersätt originalfilen eller bädda in den direkt i HTML

Användningsområden för SVG-optimering

🎨

Ikonbibliotek

Optimera ikonuppsättningar exporterade från Figma eller Illustrator innan de läggs till i biblioteket

🏢

Logotyper

Rensa SVG-logotyper för webbplatsheaders, favicons och varumärkestillgångar

✨

Animerade SVG:er

Minska basstorleken på animerade SVG:er som redan är stora på grund av animationsdata

📱

PWA och mobila enheter

Mindre SVG:er minskar mobil dataförbrukning och förbättrar Lighthouse-prestanda

Bästa praxis för SVG-optimering

✓ Var försiktig med att ta bort ID:n med CSS-animationer

Om SVG:n använder CSS- eller JS-animationer med ID-element som mål, avmarkera 'Ta bort ID:n' så att animationerna inte bryts.

✓ Behåll viewBox, ta bort bredd/höjd

Att ta bort bredd/höjd-attributen och bara behålla viewBox gör att SVG:n kan skalas responsivt via CSS.

✓ Runda siffror till 2 decimaler

Vägkoordinater med fler än 5 decimaler är visuellt oskiljbara. Att runda till 2 gör filen mindre utan synlig skillnad.

✓ Automatisera SVGO i CI/CD

I stora projekt, integrera SVGO i byggpipeline för att automatiskt optimera alla SVG:er. Använd det här verktyget för snabb manuell kontroll.

❓ Vanliga frågor

Hur mycket kan SVG-optimering minska filstorleken?

Vanligtvis 30-70 % besparing beroende på källan. Illustrator-SVG:er uppvisar ofta störst besparing; Figma-exporter är redan relativt rena.

Ändrar optimering SVG:ns utseende?

Nej — alla optimeringar i det här verktyget tar bara bort osynlig data eller rundar siffror med omärklig precision. Det visuella resultatet är identiskt med originalet.

Varför tar man bort bredd- och höjdattributen?

Hårdkodade bredd/höjd-värden hindrar SVG:n från att skalas responsivt via CSS. Att ta bort dem och bara behålla viewBox ger full storlekskontroll via CSS-egenskaper.

Vad är skillnaden mellan det här verktyget och SVGO?

SVGO är ett Node.js-kommandoradsverktyg som är standard för SVG-optimering. Det här verktyget ger ett bekvämt webbläsargränssnitt för de vanligaste optimeringarna utan att installera Node.js.