SVG-optimoija

Pakkaa SVG-tiedostoja verkossa — poista metatiedot, kommentit ja tarpeettomat attribuutit tiedostokoon pienentämiseksi

Jakaa:

SVG-optimoija

Miksi optimoida SVG-tiedostoja?

Illustratorista, Figmasta ja Inkscapesta viedyt SVG-tiedostot sisältävät paljon tarpeetonta dataa — kommentteja, muokkausmetatietoja, redundantteja attribuutteja ja tyhjiä säiliöitä. Optimoinnin jälkeen tiedostokoko voi pienentyä 30-70 % ja lataus nopeutua.

🎯

8 optimointistrategiaa

Aktivoi/poista käytöstä kukin optimointivaihe itsenäisesti yksityiskohtaiseen hallintaan

📊

Kokosäästötilastot

Näe alkuperäinen koko, optimoitu koko ja säästöprosentti jokaisen optimoinnin jälkeen

✅

Häviötön optimointi

Kaikki optimoinnit säilyttävät SVG:n visuaalisen ulkoasun — poistaa vain näkymättömän metatiedon

Optimoi SVG 3 vaiheessa

1

Liitä SVG-koodi

Kopioi SVG-lähdekoodi suunnittelutyökalusta tai tiedostosta ja liitä se syötekenttään

2

Valitse optimoinnit

Merkitse haluamasi optimointiasetukset — oletusasetukset antavat maksimaalisen pienennyksen

3

Kopioi ja käytä

Kopioi optimoitu SVG ja korvaa alkuperäinen tiedosto tai upota se suoraan HTML:ään

SVG-optimoinnin käyttötapaukset

🎨

Ikonistot

Optimoi Figmasta tai Illustratorista viedyt ikonistot ennen niiden lisäämistä kirjastoon

🏢

Logot

Siisti SVG-logot verkkosivuston ylätunnisteita, favicon-kuvia ja brändiresursseja varten

✨

Animoidut SVG:t

Pienennä animoitujen SVG:iden peruskokoa, jotka ovat jo suuria animaatiodatan vuoksi

📱

PWA ja mobiili

Pienemmät SVG:t vähentävät mobiilissa kulutettavaa dataa ja parantavat Lighthouse-suorituskykyä

SVG-optimoinnin parhaat käytännöt

✓ Ole varovainen ID:iden poistamisessa CSS-animaatioiden kanssa

Jos SVG käyttää CSS- tai JS-animaatioita, jotka kohdistuvat ID-elementteihin, poista 'Poista ID:t' käytöstä, jotta animaatiot eivät rikkoudu.

✓ Säilytä viewBox, poista leveys/korkeus

Leveys/korkeus-attribuuttien poistaminen ja vain viewBox:n säilyttäminen mahdollistaa SVG:n reagoivan skaalauksen CSS:n kautta.

✓ Pyöristä luvut 2 desimaalin tarkkuuteen

Polun koordinaatit, joissa on yli 5 desimaalia, ovat visuaalisesti erottamattomia. Pyöristäminen 2:een pienentää tiedostoa ilman näkyviä eroja.

✓ Automatisoi SVGO CI/CD:ssä

Suurissa projekteissa integroi SVGO rakennusputkeen kaikkien SVG:iden automaattiseksi optimoinniksi.

❓ Usein kysytyt kysymykset

Kuinka paljon SVG-optimointi voi pienentää tiedostokokoa?

Tyypillisesti 30-70 % säästö lähteestä riippuen. Illustrator-SVG:t osoittavat usein suurimman säästön; Figma-viennit ovat jo suhteellisen puhtaita.

Muuttaako optimointi SVG:n ulkoasua?

Ei — kaikki tämän työkalun optimoinnit poistavat vain näkymätöntä dataa tai pyöristävät lukuja huomaamattomalla tarkkuudella. Visuaalinen tulos on identtinen alkuperäisen kanssa.

Miksi leveys- ja korkeus-attribuutit poistetaan?

Kovakoodatut leveys/korkeus-arvot estävät SVG:tä skaalautumasta reagoivasti CSS:n kautta. Niiden poistaminen ja vain viewBox:n säilyttäminen antaa täyden kokohallinnan CSS-ominaisuuksien kautta.

Mikä on ero tämän työkalun ja SVGO:n välillä?

SVGO on Node.js-komentorivityökalu, joka on standardi SVG-optimoinnille. Tämä työkalu tarjoaa kätevän selainkäyttöliittymän yleisimmille optimoinneille ilman Node.js:n asennusta.