SVG-optimeringsværktøj

Komprimer SVG-filer online — fjern metadata, kommentarer og unødvendige attributter for at reducere filstørrelsen

Dele:

SVG-optimeringsværktøj

Hvorfor optimere SVG-filer?

SVG-filer eksporteret fra Illustrator, Figma og Inkscape indeholder meget unødvendige data — kommentarer, redigeringsmetadata, redundante attributter og tomme beholdere. Efter optimering kan filstørrelsen reduceres med 30-70 % og indlæsningen bliver hurtigere.

🎯

8 optimeringsstrategier

Aktivér/deaktivér hvert optimeringspas uafhængigt for præcis kontrol

📊

Størrelsesreduktionsstatistik

Se original størrelse, optimeret størrelse og besparelsesprocent efter hver optimering

✅

Tabsfri optimering

Alle optimeringer bevarer SVG'ens visuelle udseende — fjerner kun usynlige metadata

Optimér SVG i 3 trin

1

Indsæt SVG-kode

Kopiér SVG-kildekoden fra et designværktøj eller en fil og indsæt den i inputfeltet

2

Vælg optimeringer

Markér de optimeringsindstillinger du vil anvende — standardindstillingerne giver maksimal reduktion

3

Kopiér og brug

Kopiér den optimerede SVG og erstat originalfilen eller indlejr den direkte i HTML

Anvendelsesområder for SVG-optimering

🎨

Ikonbiblioteker

Optimér ikonsæt eksporteret fra Figma eller Illustrator inden de tilføjes til biblioteket

🏢

Logoer

Rens SVG-logoer til webstedshoveder, favicons og brandaktiver

✨

Animerede SVG'er

Reducer basisstørrelsen på animerede SVG'er der allerede er store på grund af animationsdata

📱

PWA og mobil

Mindre SVG'er reducerer mobilforbrug og forbedrer Lighthouse-ydeevne

Bedste praksis for SVG-optimering

✓ Vær forsigtig med at fjerne ID'er med CSS-animationer

Hvis SVG'en bruger CSS- eller JS-animationer der målretter ID-elementer, deaktivér 'Fjern ID'er' så animationerne ikke brydes.

✓ Behold viewBox, fjern bredde/højde

At fjerne bredde/højde-attributterne og kun beholde viewBox lader SVG'en skalere responsivt via CSS.

✓ Afrund tal til 2 decimaler

Stikoordinater med mere end 5 decimaler er visuelt uadskillelige. Afrunding til 2 gør filen mindre.

✓ Automatisér SVGO i CI/CD

I store projekter, integrér SVGO i byggepipeline for automatisk at optimere alle SVG'er.

❓ Ofte stillede spørgsmål

Hvor meget kan SVG-optimering reducere filstørrelsen?

Typisk 30-70 % besparelse afhængigt af kilden. Illustrator-SVG'er viser oftest den største besparelse; Figma-eksporter er allerede relativt rene.

Ændrer optimering SVG'ens udseende?

Nej — alle optimeringer i dette værktøj fjerner kun usynlige data eller afrunder tal med umærkelig nøjagtighed. Det visuelle resultat er identisk med originalen.

Hvorfor fjerner man bredde- og højdeattributterne?

Hårdkodede bredde/højde-værdier forhindrer SVG'en i at skalere responsivt via CSS. At fjerne dem og kun beholde viewBox giver fuld størrelseskontrol via CSS-egenskaber.

Hvad er forskellen mellem dette værktøj og SVGO?

SVGO er et Node.js-kommandolinjeværktøj der er standard for SVG-optimering. Dette værktøj tilbyder en brugervenlig browserbrugerflade til de mest almindelige optimeringer uden at installere Node.js.