Utilia
Kategorier ▾
Sprog: da ▾

SVG-optimering

Optimér og minimér SVG-filer online med SVGO i din browser. Vælg en forudindstilling, sammenlign resultatet visuelt, og se besparelsen i størrelse og gzip.

Plugins

Hvis du fjerner viewBox, kan tegningen ikke længere skaleres, og hvis du forkorter eller fjerner ID'er, ødelægges CSS, JavaScript, <use> eller ankerlinks, der henviser til dem. Behold forudindstillingen Sikker til SVG'er, der bruges i kode, sprites eller animationer.

Sådan optimerer du en SVG

  1. Slip en SVG-fil i dropzonen, eller klik på den for at vælge en. Du kan også indsætte koden i feltet SVG-kode.
  2. Vælg en Forudindstilling: Sikker, Afbalanceret (standard) eller Maksimal. Listen Plugins nedenfor viser præcis, hvilke trin hver forudindstilling slår til.
  3. Justér om nødvendigt: Decimalpræcision (0 til 8 cifre), Flere gennemløb og Pæn formatering (indrykket output), hvis du vil have læsbar kode. Så snart du ændrer et plugin, præcisionen eller gennemløbene, skifter forudindstillingen til Egen.
  4. Klik på Optimér SVG. En fil, du slipper, optimeres med det samme, og når der er et resultat, kører optimeringen automatisk igen ved hver ændring af indstillingerne.
  5. Tjek tallene for Oprindelig størrelse, Optimeret størrelse, Besparelse og Gzip-komprimeret, og sammenlign derefter de to tegninger side om side.
  6. Klik på Kopiér for at kopiere den Optimerede SVG-kode, eller på Download optimeret SVG for at gemme den som navn.min.svg.

Optimeringen udføres af SVGO 4, den almindelige open source-SVG-optimering (MIT), som bruges i de fleste webbyggeværktøjer. Dens browserversion indlæses første gang, du klikker, og kører helt på din enhed: din SVG uploades aldrig.

Hvorfor SVG-filer fra designværktøjer er så tunge

En SVG, der er eksporteret fra Illustrator, Inkscape, Figma eller Sketch, indeholder meget mere end selve tegningen. Editorer tilføjer deres egne navnerum og attributter (lagnavne, hjælpelinjer, eksportindstillinger), en <metadata>-blok, kommentarer som »Generator: Adobe Illustrator«, koordinater med seks eller flere decimaler, grupper med kun ét element og omstændelige farver som #ffffff. Intet af det ændrer, hvad browseren tegner. SVGO fjerner det, afrunder tal, omskriver stidata med kortere kommandoer, forkorter farver og slår overflødige elementer sammen eller pakker dem ud. En reduktion på 40–60 % er almindelig for eksporterede ikoner og illustrationer.

Forudindstillinger og risikable plugins

  • Sikker kører SVGO’s standardforudindstilling, men beholder ID’er, <desc>, separate stier og <style>-regler med 3 decimaler og ét gennemløb. Brug den til SVG’er, der refereres fra CSS eller JavaScript, sprites og animationer.
  • Afbalanceret er SVGO’s standardforudindstilling, 3 decimaler, flere gennemløb. Den passer til de fleste ikoner og illustrationer, der vises som billeder.
  • Maksimal tilføjer Fjern </strong>, <strong>Fjern scripts og hændelsesattributter</strong>, <strong>Fjern width/height (behold viewBox)</strong> og <strong>Erstat xlink:href med href</strong> med 2 decimaler og flere gennemløb.</li> </ul> <p>Ingen forudindstilling fjerner viewBox. <strong>Fjern viewBox</strong> findes kun til særlige tilfælde: uden den kan tegningen ikke længere skaleres til den størrelse, du angiver i CSS.</p> <p>Vid, hvad de andre plugins kan ødelægge:</p> <ul> <li><strong>Forkort og fjern ubrugte ID’er</strong> omdøber ID’er som <code>#icon-home</code> til <code>a</code>. Alle CSS-vælgere, JavaScript-forespørgsler, <code><use href="#…"></code>-referencer til sprites, sideankre eller SMIL/CSS-animationer, der peger på det gamle navn, holder op med at virke.</li> <li><strong>Fjern <title></strong> og <strong>Fjern <desc></strong> sletter det tilgængelige navn og den tilgængelige beskrivelse. Behold dem på ikoner og diagrammer med betydning, som skærmlæsere skal oplæse.</li> <li>En lav <strong>Decimalpræcision</strong> kan deformere små ikoner: kurver vakler, og kanter forskydes. Tjek altid den visuelle sammenligning; 3 er en sikker standard.</li> <li><strong>Slå stier sammen</strong> forener tilstødende stier til én, så en hover-effekt eller animation, der pegede på en enkelt sti, mister sit mål.</li> </ul> <h2>Tips</h2> <ul> <li>Gem en uoptimeret masterkopi til redigering; behandl <code>.min.svg</code> som kompileret kode.</li> <li>Slå gzip eller brotli til på din server: tekstformater som SVG komprimeres meget godt, og tallet for <strong>Gzip-komprimeret</strong> viser, hvad besøgende faktisk downloader (vises, når din browser understøtter <code>CompressionStream</code>).</li> <li>Indlejret SVG kan formateres med CSS og animeres, men caches ikke for sig; en SVG i <code><img></code> caches, men kan ikke formateres fra siden.</li> </ul></div> <section class="mt-10" aria-labelledby="faq"> <h2 id="faq" class="text-2xl font-semibold">Ofte stillede spørgsmål</h2> <div class="mt-4 divide-y divide-line rounded-xl border border-line bg-surface"> <details class="faq group"> <summary>Bliver min SVG uploadet til en server?</summary> <div class="prose px-5 pb-5"><p>Nej. SVGO kører i din browser. Det eneste, der downloades, er selve optimeringskoden, første gang du optimerer.</p></div> </details> <details class="faq group"> <summary>Hvorfor vises eksemplet som billeder?</summary> <div class="prose px-5 pb-5"><p>SVG er et dokumentformat, der kan indeholde JavaScript og indlæse eksterne filer. Begge eksempler vises som <code><img></code> fra lokale blob-adresser, og i den tilstand kører browsere aldrig scripts og henter ikke eksterne ressourcer, så det er sikkert at få vist en SVG, du ikke stoler på, her. Selve den optimerede kode indeholder stadig eventuelle scripts, medmindre <strong>Fjern scripts og hændelsesattributter</strong> er slået til (det er den i <strong>Maksimal</strong>).</p></div> </details> <details class="faq group"> <summary>Min optimerede SVG kan ikke længere skaleres. Hvad skete der?</summary> <div class="prose px-5 pb-5"><p>viewBox er sandsynligvis blevet fjernet, enten af <strong>Fjern viewBox</strong> eller tidligere af et andet værktøj. Optimér originalen igen med det plugin slået fra.</p></div> </details> <details class="faq group"> <summary>Hvorfor holdt mit ikon-sprite eller min animation op med at virke?</summary> <div class="prose px-5 pb-5"><p><strong>Forkort og fjern ubrugte ID’er</strong> eller <strong>Slå stier sammen</strong> ændrede de elementer, som din kode henviser til. Brug forudindstillingen <strong>Sikker</strong>, som beholder begge.</p></div> </details> <details class="faq group"> <summary>Den optimerede fil er ikke mindre. Hvorfor?</summary> <div class="prose px-5 pb-5"><p>SVG’en er sandsynligvis allerede minimeret. Prøv <strong>Maksimal</strong> eller en lavere <strong>Decimalpræcision</strong>, og slå <strong>Pæn formatering (indrykket output)</strong> fra.</p></div> </details> </div> </section> <section class="mt-10" aria-labelledby="related"> <h2 id="related" class="text-2xl font-semibold">Relaterede værktøjer</h2> <ul class="card-grid mt-4"><li><a class="card" href="/da/svg-til-png/"> <span class="card-title">SVG til PNG</span> <span class="card-text">Konvertér SVG til PNG, JPG eller WebP i din browser i enhver bredde, højde, skala eller DPI med gennemsigtig eller farvet baggrund. Batch og ZIP, uden upload.</span> </a></li> <li><a class="card" href="/da/billede-til-svg/"> <span class="card-title">Billede til SVG – vektorisering</span> <span class="card-text">Konvertér et PNG- eller JPG-logo eller en tegning til SVG-vektorstier i din browser. Forudindstillinger, antal farver og pletfilter uden upload.</span> </a></li> <li><a class="card" href="/da/komprimer-billede/"> <span class="card-title">Billedkomprimering</span> <span class="card-text">Komprimer JPG-, PNG- og WebP-billeder med en kvalitetsskyder, sammenlign størrelser før og efter, og behandl flere fotos ad gangen uden at uploade dem.</span> </a></li> <li><a class="card" href="/da/css-formatering/"> <span class="card-title">CSS-formatering og -minificering</span> <span class="card-text">Gør rodet CSS læsbar med ren indrykning, eller minificér det med csso, og se størrelsen før og efter. Kører i din browser, intet uploades.</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="Annonce"><span class="ad-label">Annonce</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 onlineværktøjer, der kører i din browser. Dine data bliver på din enhed.</p> </div> <nav aria-label="Kategorier"> <p class="font-semibold">Værktøjer</p> <ul class="mt-2 space-y-1"><li><a class="link-muted" href="/da/tekstvaerktoejer/">Tekstværktøjer</a></li><li><a class="link-muted" href="/da/udviklervaerktoejer/">Udviklerværktøjer</a></li><li><a class="link-muted" href="/da/web-seo-marketing/">Web, SEO og marketing</a></li><li><a class="link-muted" href="/da/farver-design/">Farver og design</a></li><li><a class="link-muted" href="/da/billedredigering/">Billedredigering</a></li><li><a class="link-muted" href="/da/pdf-dokumenter/">PDF og dokumenter</a></li><li><a class="link-muted" href="/da/regning-matematik/">Regning og matematik</a></li><li><a class="link-muted" href="/da/finansberegnere/">Finansberegnere</a></li><li><a class="link-muted" href="/da/dato-tid/">Dato og tid</a></li><li><a class="link-muted" href="/da/enhedsomregner/">Omregning af enheder</a></li><li><a class="link-muted" href="/da/sundhed-fitness/">Sundhed og fitness</a></li><li><a class="link-muted" href="/da/hjem-koekken-bil/">Hjem, køkken og bil</a></li><li><a class="link-muted" href="/da/generatorer/">Generatorer</a></li><li><a class="link-muted" href="/da/enheds-browsertest/">Enheds- og browsertest</a></li><li><a class="link-muted" href="/da/lyd-video/">Lyd og video</a></li><li><a class="link-muted" href="/da/uddannelse-sprog/">Uddannelse og sprog</a></li><li><a class="link-muted" href="/da/spil/">Spil</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="/da/om-os/">Om os</a></li> <li><a class="link-muted" href="/da/kontakt/">Kontakt</a></li> <li><a class="link-muted" href="/da/privatlivspolitik/">Privatlivspolitik</a></li> <li><a class="link-muted" href="/da/vilkaar/">Vilkår for brug</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>