Ingen uppladdning, 100% lokalt, inget konto

SVG-optimerare

Klistra in eller släpp en SVG och minska den med SVGO. Allt stannar i din webbläsare.

Så fungerar SVG-optimerare

SVG-optimeraren kör SVGO (SVG Optimizer) i en Web Worker inuti din webbläsare för att minimera och rensa dina SVG-filer utan att ladda upp dem. SVGO tillämpar en konfigurerbar uppsättning insticksprogram som tar bort kommentarer, komprimerar blanksteg, slår samman identiska banor, konverterar former till sin mest kompakta representation och tar bort attribut som inte har någon visuell effekt. Resultatet är en mindre SVG som renderas identiskt med originalet.

SVG-filer som produceras av designverktyg som Figma, Illustrator eller Inkscape innehåller ofta betydande overhead: redigeringsspecifik metadata, tomma grupper, överflödiga transformattribut och namnområdesdeklarationer som ingen webbläsare behöver. SVGO:s standarduppsättning av insticksprogram tar bort denna overhead tillförlitligt. Den optimerade filen erbjuds som en nedladdning och den procentuella storleksminskningen visas så att du kan bekräfta att optimeringen var värd mödan.

Skrivet av Bastien Sulyan

Så här använder du SVG-optimerare, steg för steg

  1. Släpp din SVG-fil i uppladdningsområdet eller klicka för att bläddra.
  2. SVGO Web Worker kör optimeringen omedelbart med standarduppsättningen av insticksprogram.
  3. Visa den procentuella minskningen och de ursprungliga kontra optimerade filstorlekarna.
  4. Klicka på Ladda ned för att spara den optimerade SVG till din enhet.
  5. Om specifika insticksprogram orsakar renderingsproblem, justera konfigurationen och omoptimera.

Vanliga användningsområden

  • En front-end-utvecklare optimerar ikoner exporterade från Figma innan de checkas in i en produktionstillgångspipeline, vilket minskar varje ikon från 4 KB till under 1 KB.
  • En webbdesigner rensar SVG-illustrationer exporterade från Illustrator som innehåller lager av redigeringsmetadata som är osynliga i webbläsaren men sväller filen.
  • En utvecklare som bygger ett ikonteckensnitt från SVG-glyfer säkerställer att varje käll-SVG är ren och konsekvent strukturerad innan teckensnittsbyggsteget.
  • En prestandaingenjör granskar inline SVG i HTML och ersätter varje uppsvällt original med en SVGO-optimerad version för att förbättra sidvikten.

Vanliga frågor

Kommer SVGO att ändra utseendet på min SVG?

SVGO:s standardinsticksprogram är valda för att vara visuellt förlustfria: den optimerade SVG renderas identiskt med originalet i alla standardwebbläsare. Vissa aggressiva insticksprogram (som de som avrundar bankoodinater mycket kraftigt) kan ge subtila renderingsskillnader. Om du märker en visuell förändring, jämför original- och optimerade filer i en webbläsare och inaktivera det specifika insticksprogram som orsakar problemet.

Skickas SVG-filen till en server för optimering?

Nej. SVGO körs i en Web Worker inuti din webbläsarflik. SVG-texten läses från din lokala disk, bearbetas i JavaScript-minnet och utdata returneras till sidan för nedladdning. Filinnehållet lämnar inte din enhet.

Hur mycket mindre blir min SVG?

Minskningen beror på källan. SVG:er exporterade från designverktyg med redigeringsmetadata krymper vanligtvis med 30 till 70 procent. Handskrivna SVG:er som redan är magra kan se bara 5 till 15 procent minskning. Verktyget visar exakta byteantal och procent så att du kan utvärdera varje fil individuellt.

Påverkar optimering SVG-animationer eller JavaScript inuti filen?

Konfigurationen bevarar animationselement och SMIL-attribut. Den tar bort script-element: verktyget lägger till pluginet removeScripts ovanpå SVGO:s standardpreset, eftersom en SVG du ska bädda in inte bör innehålla körbar kod. Vissa insticksprogram som rensar attribut kan interagera med animationer om animationen refererar till dessa attribut via ID; kontrollera det renderade resultatet efter optimering av filer som använder komplexa animationer.

Kan jag optimera flera SVG-filer på en gång?

Den aktuella versionen bearbetar en SVG-fil i taget. Släpp en fil, ladda ned resultatet och släpp sedan nästa fil. Batchbearbetning för flera filer i en enda session är inte tillgänglig i den här versionen.

Vilken version av SVGO använder verktyget?

Verktyget buntar SVGO som körs i en Web Worker. Den paketerade versionen anges i verktygets Om-information. SVGO underhålls aktivt och insticksprogram-API:et förändrades avsevärt mellan v1, v2 och v3; det aktuella verktyget använder v3-insticksprogramformatet.

Relaterade verktyg

Håll allt lokalt, utforska kompletterande verktyg.

Alla bildverktyg