SVG-vektorigraafikan 6 etua

Etu 1: loputtoman skaalautuminen ilman vääristymistä

SVG kuvaa muodot matemaattisilla poluilla, ja suurennettaessa selain vain piirtää sen uudelleen uuteen kokoon. Kuvakkeet pysyvät terävinä Retina-näytöillä ja mainostaulun kokoon skaalattu logo on edelleen terävä – eri resoluutioita ei tarvitse valmistaa kuten rastilla. Tämä on vektorigraafikan keskeisin etu ja syy, miksi logot ja kuvakkeet on vektoroitava. Vastaavissa sivuissa yksi SVG-kuvake kattaa kaikki tilanteet puhelimesta 4K-näyttöön, joten eri laitteille ei tarvitse tehdä omia kuvia.

Etu 2: pienet tiedostot ja nopea sivun lataus

Yksinkertaisen kuvakkeen SVG on usein vain muutaman kB – paljon pienempi kuin usean resoluution PNG-sarja. Ja koska SVG on tekstiä, gzip ja Brotli pakkaavat sitä poikkeuksellisen hyvin, joten siirrettävä koko pienenee vielä kuusikymmentä–kahdeksankymmentä prosenttia. Kuvakkeita runsaasti sisältävällä sivulla siirtyminen SVG:hen vähentää selvästi kaistanleveyttä. Monimutkaisissa piirroksissa polkujen määrää on silti pidettävä hallinnassa, ja tarkat ohjeet löytyvät SVG:n optimointivinkeistä. Kun kuvakejärjestelmä siirtyy SVG:hen, ensimmäisen näkymän kuvapyyntöjen kokonaiskoko putoaa usein yli puoleen, mikä on erityisen hyödyllistä hitailla yhteyksillä.

Etu 3: ohjelmoitavuus, vuorovaikutus ja animointi

SVG on osa DOM-ia: kuvakkeen täyttöväriä voi muuttaa CSS:llä, viivanpiirtotyylistä animaatiota voi ohjata JavaScriptillä ja klikkausta sekä hiiren ylitystä voidaan käsitellä. Kuvakkeen värin vaihto pimeässä tilassa, kaavion osien korostus hiirellä ja latausanimaatiot voidaan toteuttaa suoraan SVG:ssä – ei kuvan vaihtoa eikä ruutukohtaisia animaatiomateriaaleja. Rasterimuodot eivät pysty tähän lainkaan. Datavisualisointi hyötyy eniten: jokainen pyläs ja jokainen viivanpätkä kaaviossa on oma polkunsa, joten korostus ja porautuminen voidaan kytkeä suoraan tapahtumiin.

Etu 4: muokattava teksti, ystävällinen hakukoneille ja saavutettavuudelle

SVG:n sisällä oleva teksti on oikeaa tekstiä – sen voi valita, hakea ja kääntää. Kun lisät grafiikalle <title>- ja <desc>-kuvaukset, ruudunlukijat voivat sen lukea ääneen ja hakukoneet ymmärtävät graafikon merkityksen. Rasterin teksti on vain pikseleitä, näkymätön sekä hakukoneille että ruudunlukijan käyttäjille. Monikieliset sivustot voivat kääntää SVG:n sisällön tekstin suoraan ilman kuvan uudelleenpiirtämistä.

Etu 5: yksi lähdetiedosto, uudelleenkäyttö kaikkialla

Sama SVG toimii verkkosivulla, siitä voi viedä korkean resoluution PNG:n dokumenttiin ja sen voi antaa paino- ja laserkaiverruslaitteille. Kun brändiväri vaihtuu, muutat yhtä lähdetiedostoa ja kaikki käyttökohteet päivittyvät kerralla, sen sijaan että jokainen koko tehtäisiin uudelleen. Tiimille tämä tarkoittaa huomattavasti pienempiä ylläpitokustannuksia materiaaleille. Verkkokaupat ja brändiryhmät hyötyvät erityisesti: yksi vektorointi uudelleenkäyttää tuotesivulla, pakkauksessa ja messumateriaaleissa, ja värin muutos tarkoittaa yhden lähdetiedoston ylläpitoa.

Etu 6: avoin standardi ja vakiintunut ekosysteemi

SVG on W3C:n avoin standard, jota kaikki modernit selaimet tukevat natiivisti ja jota suunnitteluohjelmat kuten Illustrator, Figma ja Inkscape osaavat lukea ja kirjoittaa, joten toimittajakohtaisia sidoksia ei ole. Objektiivisesti arvioiden myös SVG:llä on rajoitteensa: se ei sovi valokuviin, renderöintinopeus laskee, kun polut muuttuvat liian monimutkaisiksi, ja valokuvat kannattaa jättää JPG- tai WEBP-muotoon. Myös avointyöyhteisö on rakentanut SVG:n ympärille vakiintuneen työkaluketjun – SVGO-pakkaus, kuvakekirjastot ja animaatiokirjastot ovat kaikki valmiina käytettäviksi.

Aloitatko SVG:tä? Muunnista olemassa olevat rasterisi Kuva → SVG -työkalulla tai selaa ja lataa ilmaisia vektorimateriaaleja PolySVG-galleriasta. Alkuun voit lukea Mikä on SVG ja PNG:n ja SVG:n ero.