SVG-optimerer

Komprimer SVG-filer nettbasert — fjern metadata, kommentarer og unødvendige attributter for å redusere filstørrelse

Dele:

SVG-optimerer

Hvorfor optimere SVG-filer?

SVG-filer eksportert fra Illustrator, Figma og Inkscape inneholder mye unødvendig data — kommentarer, redigeringsmetadata, redundante attributter og tomme beholdere. Etter optimering kan filstørrelsen reduseres med 30-70 % og lasting bli raskere.

🎯

8 optimaliseringsstrategier

Aktiver/deaktiver hvert optimaliseringspass uavhengig for presis kontroll

📊

Størrelsesreduksjonsstatistikk

Se original størrelse, optimert størrelse og besparelsesprosent etter hver optimering

✅

Tapsfri optimering

Alle optimeringer bevarer SVG-ens visuelle utseende — fjerner bare usynlig metadata

Optimaliser SVG i 3 trinn

1

Lim inn SVG-kode

Kopier SVG-kildekoden fra et designverktøy eller en fil og lim den inn i inndatafeltet

2

Velg optimeringer

Merk optimaliseringsinnstillingene du vil bruke — standardinnstillingene gir maksimal reduksjon

3

Kopier og bruk

Kopier den optimerte SVG-en og erstatt originalfilen eller bygg den direkte inn i HTML

Bruksområder for SVG-optimering

🎨

Ikonbiblioteker

Optimaliser ikonsett eksportert fra Figma eller Illustrator før de legges til biblioteket

🏢

Logoer

Rens SVG-logoer for nettsideoverskrifter, favikoner og merkevaremidler

✨

Animerte SVG-er

Reduser basisstørrelsen på animerte SVG-er som allerede er store på grunn av animasjonsdata

📱

PWA og mobil

Mindre SVG-er reduserer mobilforbruk og forbedrer Lighthouse-ytelse

Beste praksis for SVG-optimering

✓ Vær forsiktig med å fjerne ID-er med CSS-animasjoner

Hvis SVG-en bruker CSS- eller JS-animasjoner som retter seg mot ID-elementer, deaktiver 'Fjern ID-er' slik at animasjonene ikke brytes.

✓ Behold viewBox, fjern bredde/høyde

Å fjerne bredde/høyde-attributtene og bare beholde viewBox lar SVG-en skalere responsivt via CSS.

✓ Rund av tall til 2 desimaler

Stikoordinater med mer enn 5 desimaler er visuelt uadskillelige. Avrunding til 2 gjør filen mindre.

✓ Automatiser SVGO i CI/CD

I store prosjekter integrer SVGO i byggepipeline for automatisk å optimere alle SVG-er.

❓ Ofte stilte spørsmål

Hvor mye kan SVG-optimering redusere filstørrelsen?

Vanligvis 30-70 % besparelse avhengig av kilden. Illustrator-SVG-er viser oftest størst besparelse; Figma-eksporter er allerede relativt rene.

Endrer optimering SVG-ens utseende?

Nei — alle optimeringer i dette verktøyet fjerner bare usynlige data eller runder av tall med umerkelig presisjon. Det visuelle resultatet er identisk med originalen.

Hvorfor fjerner man bredde- og høydeattributtene?

Hardkodede bredde/høyde-verdier hindrer SVG-en fra å skalere responsivt via CSS. Å fjerne dem og bare beholde viewBox gir full størelseskontroll via CSS-egenskaper.

Hva er forskjellen mellom dette verktøyet og SVGO?

SVGO er et Node.js-kommandolinjeverktøy som er standard for SVG-optimering. Dette verktøyet tilbyr et brukervennlig nettlesergrensesnitt for de vanligste optimeringene uten å installere Node.js.