Utilia
Kategorier ▾
Språk: sv ▾

SVG-optimerare

Optimera och minimera SVG-filer online med SVGO, i webbläsaren. Välj en förinställning, jämför resultatet visuellt och se besparingen i storlek och gzip.

Insticksmoduler

Om du tar bort viewBox slutar teckningen att skalas, och om ID:n förkortas eller tas bort slutar CSS, JavaScript, <use> eller ankarlänkar som refererar till dem att fungera. Behåll förinställningen Säker för SVG-filer som används i kod, sprites eller animationer.

Så optimerar du en SVG

  1. Släpp en SVG-fil i släppytan eller klicka på den för att välja en. Du kan också klistra in koden i rutan SVG-kod.
  2. Välj en Förinställning: Säker, Balanserad (standard) eller Maximal. Listan Insticksmoduler nedanför visar exakt vilka steg varje förinställning slår på.
  3. Justera vid behov: Antal decimaler (0 till 8 siffror), Flera omgångar och Snygg formatering (indenterad utdata) om du vill ha läsbar kod. Så fort du ändrar en insticksmodul, antalet decimaler eller omgångarna byter förinställningen till Egen.
  4. Klicka på Optimera SVG. En släppt fil optimeras direkt, och när det väl finns ett resultat körs optimeringen om automatiskt vid varje ändring av inställningarna.
  5. Kontrollera siffrorna för Originalstorlek, Optimerad storlek, Besparing och Gzip-komprimerad och jämför sedan de två teckningarna sida vid sida.
  6. Klicka på Kopiera för att kopiera Optimerad SVG-kod, eller på Ladda ner optimerad SVG för att spara den som namn.min.svg.

Optimeringen görs av SVGO 4, den vanliga SVG-optimeraren med öppen källkod (MIT) som används i de flesta byggverktyg för webben. Webbläsarversionen läses in första gången du klickar och körs helt på din enhet: din SVG laddas aldrig upp.

Varför SVG-filer från designprogram är så tunga

En SVG som exporterats från Illustrator, Inkscape, Figma eller Sketch innehåller mycket mer än själva teckningen. Redigeringsprogram lägger till egna namnrymder och attribut (lagernamn, hjälplinjer, exportinställningar), ett <metadata>-block, kommentarer som ”Generator: Adobe Illustrator”, koordinater med sex eller fler decimaler, grupper som bara innehåller ett element och mångordiga färger som #ffffff. Inget av detta ändrar vad webbläsaren ritar. SVGO tar bort det, avrundar tal, skriver om banedata med kortare kommandon, förkortar färger och slår ihop eller packar upp överflödiga element. En minskning med 40–60 % är vanlig för exporterade ikoner och illustrationer.

Förinställningar och riskfyllda insticksmoduler

  • Säker kör SVGO:s standardförinställning men behåller ID:n, <desc>, separata banor och <style>-regler, med 3 decimaler och en omgång. Använd den för SVG-filer som refereras från CSS eller JavaScript, sprites och animationer.
  • Balanserad är SVGO:s standardförinställning, 3 decimaler, flera omgångar. Den passar de flesta ikoner och illustrationer som visas som bilder.
  • Maximal lägger till Ta bort </strong>, <strong>Ta bort skript och händelseattribut</strong>, <strong>Ta bort width/height (behåll viewBox)</strong> och <strong>Ersätt xlink:href med href</strong>, med 2 decimaler och flera omgångar.</li> </ul> <p>Ingen förinställning tar bort viewBox. <strong>Ta bort viewBox</strong> finns bara för specialfall: utan den kan teckningen inte längre skalas till den storlek du anger i CSS.</p> <p>Vet vad de andra insticksmodulerna kan förstöra:</p> <ul> <li><strong>Förkorta och ta bort oanvända ID:n</strong> byter namn på ID:n som <code>#icon-home</code> till <code>a</code>. Alla CSS-väljare, JavaScript-frågor, <code><use href="#…"></code>-referenser till sprites, sidankare eller SMIL/CSS-animationer som pekar på det gamla namnet slutar fungera.</li> <li><strong>Ta bort <title></strong> och <strong>Ta bort <desc></strong> raderar det tillgängliga namnet och den tillgängliga beskrivningen. Behåll dem på meningsfulla ikoner och diagram som skärmläsare måste läsa upp.</li> <li>Ett lågt <strong>Antal decimaler</strong> kan deformera små ikoner: kurvor skakar och kanter förskjuts. Kontrollera alltid den visuella jämförelsen; 3 är ett säkert standardvärde.</li> <li><strong>Slå ihop banor</strong> förenar angränsande banor till en, så en hovringseffekt eller animation som riktade sig mot en enskild bana förlorar sitt mål.</li> </ul> <h2>Tips</h2> <ul> <li>Behåll en ooptimerad huvudkopia för redigering; behandla <code>.min.svg</code> som kompilerad kod.</li> <li>Aktivera gzip eller brotli på din server: textformat som SVG komprimeras mycket bra, och siffran för <strong>Gzip-komprimerad</strong> visar vad besökarna faktiskt laddar ner (visas när din webbläsare stöder <code>CompressionStream</code>).</li> <li>Inbäddad SVG kan formateras med CSS och animeras men cachas inte separat; en SVG i <code><img></code> cachas men kan inte formateras från sidan.</li> </ul></div> <section class="mt-10" aria-labelledby="faq"> <h2 id="faq" class="text-2xl font-semibold">Vanliga frågor</h2> <div class="mt-4 divide-y divide-line rounded-xl border border-line bg-surface"> <details class="faq group"> <summary>Laddas min SVG upp till en server?</summary> <div class="prose px-5 pb-5"><p>Nej. SVGO körs i din webbläsare. Det enda som laddas ner är själva optimerarkoden, första gången du optimerar.</p></div> </details> <details class="faq group"> <summary>Varför visas förhandsvisningen som bilder?</summary> <div class="prose px-5 pb-5"><p>SVG är ett dokumentformat som kan innehålla JavaScript och läsa in externa filer. Båda förhandsvisningarna renderas som <code><img></code> från lokala blob-adresser, och i det läget kör webbläsare aldrig skript och hämtar aldrig externa resurser, så det är säkert att förhandsgranska en SVG från okänd källa här. Själva den optimerade koden innehåller fortfarande eventuella skript om inte <strong>Ta bort skript och händelseattribut</strong> är på (det är det i <strong>Maximal</strong>).</p></div> </details> <details class="faq group"> <summary>Min optimerade SVG skalas inte längre. Vad hände?</summary> <div class="prose px-5 pb-5"><p>viewBox har troligen tagits bort, antingen av <strong>Ta bort viewBox</strong> eller tidigare av ett annat verktyg. Optimera originalet igen med den insticksmodulen avstängd.</p></div> </details> <details class="faq group"> <summary>Varför slutade min ikonsprite eller animation fungera?</summary> <div class="prose px-5 pb-5"><p><strong>Förkorta och ta bort oanvända ID:n</strong> eller <strong>Slå ihop banor</strong> ändrade de element som din kod refererar till. Använd förinställningen <strong>Säker</strong>, som behåller båda.</p></div> </details> <details class="faq group"> <summary>Den optimerade filen är inte mindre. Varför?</summary> <div class="prose px-5 pb-5"><p>SVG-filen är troligen redan minimerad. Prova <strong>Maximal</strong> eller färre <strong>Antal decimaler</strong> och stäng av <strong>Snygg formatering (indenterad utdata)</strong>.</p></div> </details> </div> </section> <section class="mt-10" aria-labelledby="related"> <h2 id="related" class="text-2xl font-semibold">Relaterade verktyg</h2> <ul class="card-grid mt-4"><li><a class="card" href="/sv/svg-till-png/"> <span class="card-title">SVG till PNG</span> <span class="card-text">Konvertera SVG till PNG, JPG eller WebP i webbläsaren med valfri bredd, höjd, skala eller DPI och med transparent eller färgad bakgrund. Utan uppladdning.</span> </a></li> <li><a class="card" href="/sv/bild-till-svg/"> <span class="card-title">Bild till SVG</span> <span class="card-text">Konvertera en PNG- eller JPG-logotyp eller teckning till SVG-vektorbanor i webbläsaren. Förinställningar, antal färger och fläckfilter, utan uppladdning.</span> </a></li> <li><a class="card" href="/sv/komprimera-bild/"> <span class="card-title">Bildkomprimerare</span> <span class="card-text">Komprimera JPG-, PNG- och WebP-bilder med ett kvalitetsreglage, jämför storlekar före och efter och bearbeta flera foton utan att ladda upp dem.</span> </a></li> <li><a class="card" href="/sv/css-formaterare/"> <span class="card-title">CSS-formaterare och minifierare</span> <span class="card-text">Snygga till rörig CSS med rena indrag eller minifiera den med csso, och se storleken före och efter. Körs i din webbläsare, inget laddas upp.</span> </a></li> </ul> </section> </article> <div class="hidden lg:block"> <div class="sticky top-24"><aside class="ad-slot ad-slot-sidebar" data-ad-slot="sidebar" aria-label="Annons"><span class="ad-label">Annons</span></aside> </div> </div> </div> </main> <footer class="mt-16 border-t border-line bg-surface"> <div class="mx-auto grid max-w-6xl gap-8 px-4 py-10 sm:grid-cols-3 text-sm"> <div> <p class="font-semibold">Utilia</p> <p class="mt-2 text-muted">Gratis onlineverktyg som körs i din webbläsare. Dina data stannar på din enhet.</p> </div> <nav aria-label="Kategorier"> <p class="font-semibold">Verktyg</p> <ul class="mt-2 space-y-1"><li><a class="link-muted" href="/sv/textverktyg/">Textverktyg</a></li><li><a class="link-muted" href="/sv/utvecklarverktyg/">Utvecklarverktyg</a></li><li><a class="link-muted" href="/sv/webb-seo-marknadsforing/">Webb, SEO och marknadsföring</a></li><li><a class="link-muted" href="/sv/farger-design/">Färger och design</a></li><li><a class="link-muted" href="/sv/bildredigering/">Bildredigering</a></li><li><a class="link-muted" href="/sv/pdf-dokument/">PDF och dokument</a></li><li><a class="link-muted" href="/sv/matematik/">Matematik och räkning</a></li><li><a class="link-muted" href="/sv/ekonomiska-kalkylatorer/">Ekonomiska kalkylatorer</a></li><li><a class="link-muted" href="/sv/datum-tid/">Datum och tid</a></li><li><a class="link-muted" href="/sv/omvandla-enheter/">Omvandla enheter</a></li><li><a class="link-muted" href="/sv/halsa-traning/">Hälsa och träning</a></li><li><a class="link-muted" href="/sv/hem-bygg-kok-bil/">Hem, bygg, kök och bil</a></li><li><a class="link-muted" href="/sv/generatorer/">Generatorer</a></li><li><a class="link-muted" href="/sv/testa-enhet-webblasare/">Testa enhet och webbläsare</a></li><li><a class="link-muted" href="/sv/ljud-video/">Ljud och video</a></li><li><a class="link-muted" href="/sv/utbildning-sprak/">Utbildning och språk</a></li><li><a class="link-muted" href="/sv/spel/">Spel</a></li></ul> </nav> <nav aria-label="Information"> <p class="font-semibold">Information</p> <ul class="mt-2 space-y-1"> <li><a class="link-muted" href="/sv/om-oss/">Om oss</a></li> <li><a class="link-muted" href="/sv/kontakt/">Kontakt</a></li> <li><a class="link-muted" href="/sv/integritetspolicy/">Integritetspolicy</a></li> <li><a class="link-muted" href="/sv/anvandarvillkor/">Användarvillkor</a></li> </ul> </nav> </div> <p class="border-t border-line py-4 text-center text-xs text-muted">© 2026 Utilia</p> </footer> </body> </html>