SVG-tiedosto on liian suuri? 8 vinkkiä pakkaamiseen ja optimointiin

SVG, joka painaa satoja kB tai jopa useita megatavuja, johtuu yleensä liikaa pisteistä, turhista poluista, editorin metatiedoista ja liian suuresta desimaalitarkkuudesta. Alla olevat 8 vinkkiä on järjestetty järjestykseen ”lähteestä luovutukseen”, ja kaikki ovat toteutettavissa.

1. Polkujen tasolla: vähemmän pisteitä, yhdistetyt polut

Vinkki 1: vähennä pisteitä (yksinkertaista polut)

Mitä enemmän polussa on pisteitä, sitä suurempi tiedosto ja hitaampi renderöinti. Nosta muunnoksessa hieman pehmennystä ja vähennä pisteitä jo lähteestä; olemassa olevalle SVG:lle voit käyttää Illustratoria, jossa valinta on Objekti → Polku → Yksinkertaista, tai Inkscapeä, jossa se on Polku → Yksinkertaista (Ctrl+L), ja poistaa turhat pisteet. PolySVG:n muunnostyökalussa voit säätää pehmennystä ja värimäärää ja punnita laatua ja tiedostokokoa vastaan reaaliajassa.

Vinkki 2: yhdistä polut ja kerrokset

Yhdistä samalla täyttövärellä varustetut useat polut yhdeksi, jolloin toistuvat attribuutit vähenevät, litteistä tarpeettomat ryhmien sisäkkäisyydet ja poista piilotetut kerrokset sekä tyhjät elementit. Suunnitteluohjelmissa tähän sopii polkujen yhdistämistoiminto tai kerrosten yhdistäminen ennen vientiä.

2. Tiedoston sisältö: poista metatiedot, laske tarkkuutta

Vinkki 3: poista editorin metatiedot

Illustratorista tai Inkscapestä viedyt SVG:t sisältävät usein editorin nimiavaruuksia, <metadata>-elementin, kommentteja ja vientiasetuksia, jotka eivät vaikuta renderöintiin, joten ne voi poistaa käsin tai antaa SVGO:n siivota ne. Säilytä kuitenkin <title> ja <desc>, sillä ne auttavat saavutettavuudessa.

Vinkki 4: laske desimaalitarkkuutta

Polkujen koordinaateissa on usein kuusi–kahdeksaa desimaalia, vaikka näytön renderöintiin riittää yksi tai kaksi. Kun asetat SVGO:n asetuksissa arvojen tarkkuuden (floatPrecision) arvoksi 1–2, tiedosto pienenee selvästi ilman näkyvää eroa. Pienissä kuvakkeissa ole varovainen, ettei koordinaatteja pakata liikaa ja muoto vääristy.

3. Automatisoiminen: pakkaus yhdellä komennolla SVGO:lla

Vinkki 5: optimoi automaattisesti SVGO:lla

SVGO on SVG:n optimoinnin de facto -standardi, ja siinä on valmiiksi kymmeniä lisäosia: kommenttien ja metatietojen poisto, polkujen yhdistäminen, polkukäskyjen optimointi ja lukujen siivous. Peruskäyttö:

npx svgo input.svg -o output.svg

Tavalliset tiedostot pienenevät 30–70 %. Kahteen asiaan on kiinnitettävä huomiota: älä poista viewBox-attribuuttia, muuten skaalautuminen rikkoutuu; ja kuvakkeissa, joita haluat värjätä CSS:llä, jätä väri periytymään äläkä kirjoita sitä kiinteäksi.

Vertaa tiedoston kokoa ja selaimen kehittäjätyökaluissa näkyvää todellista siirrettyä kokoa optimoinnin jälkeen ja ennen sitä, jotta varmistut hyödyn määrästä; muuta kerralla vain yhdenlaisia parametreja, jolloin ongelman aiheuttaja on helppo paikantaa.

4. Rakenne ja uudelleenkäyttö: symbolit ja värikerrokset

Vinkki 6: käytä toistuvia muotoja uudelleen defs- ja use-elementillä

Kun sama kuvake toistuu sivulla useita kerroja, määritä se kerran <defs>-elementtiin ja viittaa siihen <use>-elementillä, tai koosta SVG-spritelehti – tiedoston koko ja pyyntöjen määrä pienentyvät yhdessä.

Vinkki 7: hallitse värikerroksia ja vältä upotettuja kuvia

Laske vektoroinnissa värimäärää kerrosten määrän pienentääksesi ja käytä yksiväristä täyttöä monimutkaisen liukuvärin sijaan missä vain mahdollista. Ennen kaikkea vältä base64-kuvien upottamista SVG:hen – se muuttaisi vektoritiedoston kuvankantajaksi ja koko karkaaisi käsistä. Muunnoksesta jääneet turhat polut voi poistaa napsautuksella verkkopohjaisessa editorissa.

5. Luovutus: siirron pakkaus ja välimuisti

Vinkki 8: ota gzip/Brotli ja välimuisti käyttöön

SVG on tekstiä, joten gzip- tai Brotli-pakkaus pienentää siirrettyä kokoa yleensä vielä 60–80 %; staattisille SVG-tiedostoille kannattaa antaa pitkä välimuistiaikaus. Todella pienet kuvakkeet voi upottaa suoraan HTML:ään, jolloin säästyy yksi pyyntö. Periaatteet on kuvattu artikkelissa SVG:n eduista; jos haluat hallita kokoa jo muunnusvaiheessa, lue Kuvan muuntaminen SVG:ksi.

Järjestys on tärkeä: hallitse ensin pisteitä ja värikerroksia lähteessä, siivoa sitten metatiedot ja tarkkuus tiedostosta, aja sen jälkeen SVGO ja lopuksi ota siirron pakkaus käyttöön. Näillä neljällä kerroksella SVG:n koko pienenee yleensä kymmenkertaisesti.