Hoppa till innehållet

Komprimera SVG-filer

Ta bort skräp från redigeringsprogram och korta ner bandata med SVGO, direkt i webbläsaren.

Släpp filer här

eller

Välj filer

SVG · JPG · PNG · GIF · TIFF · WebP

Filerna lämnar aldrig din enhet

Laddar komprimeraren…

Komprimera SVG i tre steg

  1. Lägg till dina filer

    Släpp filerna i rutan, klistra in dem eller välj dem från din enhet. Inget laddas upp.

  2. Kontrollera inställningarna

    Standardnivån passar de flesta filer. Ändra kvalitet, storlek eller format om du behöver en mindre fil.

  3. Ladda ner resultatet

    Spara varje fil för sig eller alla som en ZIP-fil. Om en fil inte kan bli mindre behåller du originalet.

SVG är kod, inte pixlar

En SVG-fil (Scalable Vector Graphics) är ett textdokument i XML som beskriver former: banor, cirklar, övergångar, text. Eftersom filen innehåller instruktioner i stället för pixlar förblir den skarp i alla storlekar, från en favicon på 16 pixlar till en reklamskylt. Ikoner, logotyper, illustrationer, diagram och kartor på webben är ofta SVG, och formatet har varit en W3C-standard sedan 2001.

Att formatet är text har en bieffekt: filstorleken beror på hur ordrikt programmet skrev filen, inte på hur stor bilden visas. Två SVG-filer som ser identiska ut kan skilja sig flera gånger om i storlek.

Vad som gör SVG-filer tyngre än nödvändigt

  • Metadata från programmet. Illustrator, Inkscape, Figma och Sketch lägger till egna namnrymder, lagernamn, exportkommentarer och ibland en inbäddad kopia av det redigerbara dokumentet.
  • Överdriven precision. Koordinater som 12.483920174 där 12.48 ser exakt likadant ut i alla rimliga storlekar.
  • Överflödig struktur. Tomma grupper, dolda lager, standardvärden för attribut, oanvända definitioner och stilar som kunde vara kortare.
  • Lång syntax för banor. Absoluta kommandon där relativa är kortare, upprepade kommandobokstäver, onödiga mellanslag.
  • Inbäddade rasterbilder. Ett foto som klistrats in i en illustration lagras som Base64-text i SVG-filen, vilket är ungefär en tredjedel större än den ursprungliga bildfilen.

Så optimerar verktyget SVG

Verktyget kör SVGO, den välkända SVG-optimeraren med öppen källkod, i din webbläsare. Den tar bort metadata och kommentarer, slår ihop onödiga grupper, kortar ner bandata, avrundar tal till 3 decimaler som standard (du kan välja 0 till 6) och slår ihop stilar, och upprepar genomgångarna tills inget längre ändras. Resultatet är fortfarande en vanlig SVG som du kan öppna i vilket program som helst eller klistra in i HTML. I våra tester på åtta SVG-filer, från handoptimerade ikoner till en Inkscape-export full av programdata, låg besparingen mellan 8 % och 42 %.

Optimeringen är tekniskt sett destruktiv i snäv mening: avrundningen ändrar koordinaterna en aning, och programspecifik data försvinner, så du kan inte öppna filen igen med alla ursprungliga lager. Spara källfilen från ditt designprogram och se den optimerade SVG-filen som den publicerade versionen.

Servrar skickar oftast SVG med gzip- eller Brotli-komprimering, som krymper texten ytterligare på vägen till webbläsaren. Optimering och serverkomprimering förstärker varandra, eftersom borttagen data aldrig behöver komprimeras alls.

När en optimerad SVG går sönder

  • CSS eller JavaScript hittar inte längre ett element. Optimerare kortar ner eller tar bort id:n och klassnamn som ser oanvända ut i filen. Om sidans stilar eller skript pekar på dem bör du kontrollera resultatet innan du publicerar.
  • Ikonen skalas inte längre. En SVG behöver attributet viewBox för att kunna ändra storlek ordentligt. Verktyget behåller det, så kontrollera om originalet hade något; en SVG med bara fast bredd och höjd har aldrig skalats bra.
  • Små former ser förvrängda ut. Mycket små ikoner som ritats på en stor yta kan påverkas av avrundningen. Det är ovanligt med standardprecisionen.
  • Filen är mest ett inbäddat foto. Exportera fotot som en separat JPG eller WebP och länka till det, eller konvertera hela grafiken till en rasterbild.

Frågor om SVG

Ser den optimerade SVG-filen annorlunda ut?

I normala storlekar nej. Former, färger och text återges likadant. Använd vyn före och efter för att kontrollera detaljer som tunna linjer om du är osäker.

Kan jag fortfarande redigera filen efteråt?

Ja, alla vektorprogram kan öppna den. Det som går förlorat är programspecifik information som lagernamn och ritytor, så spara originalet för framtida designarbete.

Ska jag konvertera SVG till PNG för att göra den mindre?

Oftast inte. En ren ikon i SVG är ofta bara några kilobyte och förblir skarp på alla skärmar. Konvertera till PNG bara när mottagaren inte tar emot SVG, vilket många e-postprogram och vissa sociala nätverk inte gör.

Är det säkert att optimera en SVG med animationer?

SMIL- och CSS-animationer i filen behålls, men animationer som styrs av externa skript kan vara beroende av id:n. Testa den optimerade filen på sidan där den används.

Relaterade sidor

Rasterbilder hanteras av bildkomprimeraren. Bakgrund om vad som körs lokalt och varför finns i Så fungerar det.