Utilia
Kategorier ▾
Språk: nb ▾

SVG-optimalisering

Optimaliser og minifiser SVG-filer på nett med SVGO, i nettleseren din. Velg et forhåndsvalg, sammenlign visuelt og se besparelsen i størrelse og gzip.

Programtillegg

Hvis du fjerner viewBox, slutter tegningen å skalere, og hvis du forkorter eller fjerner ID-er, brytes CSS, JavaScript, <use> eller ankerlenker som refererer til dem. Behold forhåndsvalget Trygt for SVG-er som brukes i kode, sprites eller animasjoner.

Slik optimaliserer du en SVG

  1. Slipp en SVG-fil i dropsonen, eller klikk på den for å velge en. Du kan også lime inn koden i boksen SVG-kode.
  2. Velg et Forhåndsvalg: Trygt, Balansert (standard) eller Maksimalt. Listen Programtillegg nedenfor viser nøyaktig hvilke trinn hvert forhåndsvalg slår på.
  3. Juster ved behov: Desimalpresisjon (0 til 8 sifre), Flere gjennomganger og Pen formatering (innrykket utdata) hvis du vil ha lesbar kode. Så snart du endrer et programtillegg, presisjonen eller gjennomgangene, bytter forhåndsvalget til Egendefinert.
  4. Klikk på Optimaliser SVG. En fil du har sluppet, optimaliseres med en gang, og når det finnes et resultat, kjører hver endring av innstillingene optimaliseringen på nytt automatisk.
  5. Sjekk tallene for Opprinnelig størrelse, Optimalisert størrelse, Besparelse og Gzip-komprimert, og sammenlign deretter de to tegningene side ved side.
  6. Klikk på Kopier for å kopiere Optimalisert SVG-kode, eller Last ned optimalisert SVG for å lagre den som navn.min.svg.

Optimaliseringen gjøres av SVGO 4, den vanlige SVG-optimalisereren med åpen kildekode (MIT) som brukes i de fleste byggverktøy for nett. Nettleserversjonen lastes første gang du klikker, og den kjører helt og holdent på enheten din: SVG-en din lastes aldri opp.

Hvorfor SVG-filer fra designverktøy er så tunge

En SVG som er eksportert fra Illustrator, Inkscape, Figma eller Sketch, har med mye mer enn selve tegningen. Redigeringsprogrammer legger til egne navnerom og attributter (lagnavn, hjelpelinjer, eksportinnstillinger), en <metadata>-blokk, kommentarer som «Generator: Adobe Illustrator», koordinater med seks eller flere desimaler, grupper som bare inneholder ett element, og omstendelige farger som #ffffff. Ingenting av dette endrer hva nettleseren tegner. SVGO fjerner det, runder av tall, skriver om banedata med kortere kommandoer, forkorter farger og slår sammen eller pakker ut overflødige elementer. En reduksjon på 40–60 % er vanlig for eksporterte ikoner og illustrasjoner.

Forhåndsvalg og risikable programtillegg

  • Trygt kjører SVGOs standardoppsett, men beholder ID-er, <desc>, separate baner og <style>-regler, med 3 desimaler og én gjennomgang. Bruk det for SVG-er som refereres fra CSS eller JavaScript, sprites og animasjoner.
  • Balansert er SVGOs standardoppsett, 3 desimaler, flere gjennomganger. Det passer for de fleste ikoner og illustrasjoner som vises som bilder.
  • Maksimalt legger til Fjern </strong>, <strong>Fjern skript og hendelsesattributter</strong>, <strong>Fjern width/height (behold viewBox)</strong> og <strong>Erstatt xlink:href med href</strong>, med 2 desimaler og flere gjennomganger.</li> </ul> <p>Ingen forhåndsvalg fjerner viewBox. <strong>Fjern viewBox</strong> finnes bare for spesielle tilfeller: uten den kan ikke tegningen lenger skaleres til størrelsen du gir den i CSS.</p> <p>Vit hva de andre programtilleggene kan ødelegge:</p> <ul> <li><strong>Forkort og fjern ubrukte ID-er</strong> gir nytt navn til ID-er som <code>#icon-home</code>, for eksempel <code>a</code>. Alle CSS-velgere, JavaScript-spørringer, <code><use href="#…"></code>-sprite-referanser, sideankre og SMIL/CSS-animasjoner som peker på det gamle navnet, slutter å virke.</li> <li><strong>Fjern <title></strong> og <strong>Fjern <desc></strong> sletter det tilgjengelige navnet og beskrivelsen. Behold dem på meningsbærende ikoner og diagrammer som skjermlesere skal opplyse om.</li> <li>En lav <strong>Desimalpresisjon</strong> kan deformere små ikoner: kurver vingler og kanter forskyver seg. Sjekk alltid den visuelle sammenligningen. 3 er en trygg standard.</li> <li><strong>Slå sammen baner</strong> slår sammen tilstøtende baner til én, så en hover-effekt eller animasjon som pekte på én enkelt bane, mister målet sitt.</li> </ul> <h2>Tips</h2> <ul> <li>Ta vare på en uoptimalisert hovedkopi for redigering, og behandle <code>.min.svg</code> som kompilert kode.</li> <li>Slå på gzip eller brotli på serveren din: tekstformater som SVG komprimeres svært godt, og tallet <strong>Gzip-komprimert</strong> viser hva besøkende faktisk laster ned (vises når nettleseren din støtter <code>CompressionStream</code>).</li> <li>Innebygd SVG kan stiles med CSS og animeres, men bufres ikke separat. En SVG i <code><img></code> bufres, men kan ikke stiles fra siden.</li> </ul></div> <section class="mt-10" aria-labelledby="faq"> <h2 id="faq" class="text-2xl font-semibold">Ofte stilte spørsmål</h2> <div class="mt-4 divide-y divide-line rounded-xl border border-line bg-surface"> <details class="faq group"> <summary>Lastes SVG-en min opp til en server?</summary> <div class="prose px-5 pb-5"><p>Nei. SVGO kjører i nettleseren din. Det eneste som lastes ned, er selve optimaliseringskoden første gang du optimaliserer.</p></div> </details> <details class="faq group"> <summary>Hvorfor vises forhåndsvisningen som bilder?</summary> <div class="prose px-5 pb-5"><p>SVG er et dokumentformat som kan inneholde JavaScript og laste eksterne filer. Begge forhåndsvisningene vises som <code><img></code> fra lokale blob-adresser, og i den modusen kjører nettlesere aldri skript og henter aldri eksterne ressurser, så det er trygt å forhåndsvise en SVG du ikke stoler på, her. Selve den optimaliserte koden inneholder fortsatt eventuelle skript med mindre <strong>Fjern skript og hendelsesattributter</strong> er på (det er det i <strong>Maksimalt</strong>).</p></div> </details> <details class="faq group"> <summary>Den optimaliserte SVG-en min skalerer ikke lenger. Hva skjedde?</summary> <div class="prose px-5 pb-5"><p>viewBox ble trolig fjernet, enten av <strong>Fjern viewBox</strong> eller tidligere av et annet verktøy. Optimaliser originalen på nytt med det programtillegget av.</p></div> </details> <details class="faq group"> <summary>Hvorfor sluttet ikon-spriten eller animasjonen min å fungere?</summary> <div class="prose px-5 pb-5"><p><strong>Forkort og fjern ubrukte ID-er</strong> eller <strong>Slå sammen baner</strong> endret elementene koden din refererer til. Bruk forhåndsvalget <strong>Trygt</strong>, som beholder begge.</p></div> </details> <details class="faq group"> <summary>Den optimaliserte filen er ikke mindre. Hvorfor?</summary> <div class="prose px-5 pb-5"><p>SVG-en er trolig allerede minifisert. Prøv <strong>Maksimalt</strong> eller en lavere <strong>Desimalpresisjon</strong>, og slå av <strong>Pen formatering (innrykket utdata)</strong>.</p></div> </details> </div> </section> <section class="mt-10" aria-labelledby="related"> <h2 id="related" class="text-2xl font-semibold">Relaterte verktøy</h2> <ul class="card-grid mt-4"><li><a class="card" href="/nb/svg-til-png/"> <span class="card-title">SVG til PNG</span> <span class="card-text">Konverter SVG til PNG, JPG eller WebP i nettleseren din med valgfri bredde, høyde, skala eller DPI og gjennomsiktig eller farget bakgrunn. Flere filer og ZIP.</span> </a></li> <li><a class="card" href="/nb/bilde-til-svg/"> <span class="card-title">Bilde til SVG – vektorisering</span> <span class="card-text">Konverter en PNG- eller JPG-logo eller tegning til SVG-vektorbaner i nettleseren din. Forhåndsvalg, antall farger og flekkfilter, uten opplasting.</span> </a></li> <li><a class="card" href="/nb/komprimer-bilde/"> <span class="card-title">Bildekomprimering</span> <span class="card-text">Komprimer JPG-, PNG- og WebP-bilder med en kvalitetsglidebryter, sammenlign størrelsen før og etter, og behandle mange foto samtidig uten å laste dem opp.</span> </a></li> <li><a class="card" href="/nb/css-formatering/"> <span class="card-title">CSS-formaterer og -minifiserer</span> <span class="card-text">Gjør rotete CSS ryddig med riktig innrykk, eller minifiser den med csso, og se størrelsen før og etter. Kjører i nettleseren din, ingenting lastes opp.</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="Annonse"><span class="ad-label">Annonse</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 nettverktøy som kjører i nettleseren din. Dataene dine blir på enheten din.</p> </div> <nav aria-label="Kategorier"> <p class="font-semibold">Verktøy</p> <ul class="mt-2 space-y-1"><li><a class="link-muted" href="/nb/tekstverktoy/">Tekstverktøy</a></li><li><a class="link-muted" href="/nb/utviklerverktoy/">Utviklerverktøy</a></li><li><a class="link-muted" href="/nb/web-seo-markedsforing/">Web, SEO og markedsføring</a></li><li><a class="link-muted" href="/nb/farger-og-design/">Farger og design</a></li><li><a class="link-muted" href="/nb/bilder-og-foto/">Bilder og foto</a></li><li><a class="link-muted" href="/nb/pdf-og-dokumenter/">PDF og dokumenter</a></li><li><a class="link-muted" href="/nb/matematikk-kalkulatorer/">Matematikkalkulatorer</a></li><li><a class="link-muted" href="/nb/finanskalkulatorer/">Finanskalkulatorer</a></li><li><a class="link-muted" href="/nb/dato-og-tid/">Dato og tid</a></li><li><a class="link-muted" href="/nb/enhetsomregning/">Enhetsomregning</a></li><li><a class="link-muted" href="/nb/helse-og-trening/">Helse og trening</a></li><li><a class="link-muted" href="/nb/hjem-kjokken-bil/">Hjem, kjøkken og bil</a></li><li><a class="link-muted" href="/nb/generatorer/">Generatorer</a></li><li><a class="link-muted" href="/nb/enhets-og-nettlesertester/">Enhets- og nettlesertester</a></li><li><a class="link-muted" href="/nb/lyd-og-video/">Lyd og video</a></li><li><a class="link-muted" href="/nb/utdanning-og-sprak/">Utdanning og språk</a></li><li><a class="link-muted" href="/nb/spill/">Spill</a></li></ul> </nav> <nav aria-label="Informasjon"> <p class="font-semibold">Informasjon</p> <ul class="mt-2 space-y-1"> <li><a class="link-muted" href="/nb/om-oss/">Om oss</a></li> <li><a class="link-muted" href="/nb/kontakt/">Kontakt</a></li> <li><a class="link-muted" href="/nb/personvern/">Personvernerklæring</a></li> <li><a class="link-muted" href="/nb/vilkar/">Bruksvilkår</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>