Skaalautuva vektorigrafiikka (SVG) – mitä se on ja miten se toimii

Tutustu SVG:ään — skaalautuvat, tarkat ja kevyet vektorigrafiikat webiin ja printtiin. Opas: miten SVG toimii, sen edut, optimointi ja käytännön vinkit.

Skaalautuva vektorigrafiikka (SVG, Scalable Vector Graphics) on eräänlainen kaksiulotteinen kuva, joka toimii pikselien sijasta vektoreilla. Tämä tarkoittaa, että niitä voidaan helposti suurentaa tai pienentää ilman, että niiden laatu heikkenee tai niistä tulee epätarkkoja. SVG perustuu XML:ään, ja sen on luonut World Wide Web Consortium (W3C).

Miten SVG toimii

SVG-kuva ei ole bittikartta vaan joukko matemaattisia ohjeita: pisteitä, käyriä, muotoja ja tekstielementtejä. Näitä ohjeita (esimerkiksi path, rect, circle, text) kuvaillaan XML-rakenteessa. Selain tai muu renderöijä laskee näiden ohjeiden perusteella ruudulle piirrettävän kuvan, jolloin mittasuhteita voidaan muuttaa ilman laadun heikkenemistä. SVG-tiedostot ovat yleensä tekstitiedostoja, joiden tiedostopääte on .svg ja MIME-tyyppi image/svg+xml.

Keskeiset ominaisuudet

• Skaalautuvuus: säilyttää terävyyden kaikilla tarkkuuksilla ja zoom-tasoilla.
• Muokattavuus: koska SVG on tekstiä, muuttujaa voidaan muokata suoraan editorissa, automaattisesti skripteillä tai tyylittää CSS:llä.
• Interaktiivisuus ja animaatio: SVG tukee tapahtumakäsittelijöitä (esim. JavaScript), sekä animaatioita SMIL:llä tai CSS:llä.
• Pienempi koko yksinkertaisissa kuvissa: logot, ikonit ja yksinkertaiset grafiikat voivat olla paljon kevyempiä kuin vastaavat rasterikuvat.
• Hakukelpoisuus ja saavutettavuus: tekstinä esitetty sisältö on indeksoitavissa ja saavutettavissa ruudunlukijoilla, kun elementteihin lisätään sopivat ARIA- ja title/desc-tunnisteet.

Missä SVG:ää käytetään

SVG on yleinen valinta ikoneihin, logoihin, kaavioihin, karttoihin ja muihin vektoripohjaisiin grafiikoihin verkkosivuilla. SVG voidaan lisätä sivulle eri tavoilla: upotettuna HTML:ään (inline SVG), <img>-elementillä, <object>- tai <iframe>-kontekstissa tai CSS-taustakuvana. Inline-SVG:n etuna on suora pääsy DOM:iin ja mahdollisuus muokata elementtejä JavaScriptillä ja CSS:llä.

Esimerkki yksinkertaisesta SVG:stä

Alla on esimerkki inline-SVG:stä, joka piirtää ympyrän ja tekstiä. Tämä voidaan upottaa suoraan HTML-dokumenttiin.

Työkalut ja työnkulut

SVG-tiedostoja voi luoda ja muokata monilla ohjelmilla: vapailla työkaluilla kuten Inkscape ja maksullisilla kuten Adobe Illustrator sekä monilla käyttöliittymäsuunnittelutyökaluilla (esim. Figma). Kehityksessä SVG:ää kannattaa optimoida (esim. SVGO-työkalulla) poistamalla turhat metatiedot ja minimoimalla tiedoston koko.

Huomioitavaa ja parhaat käytännöt

• Turvallisuus: jos sallitaan käyttäjien lataamat SVG-tiedostot, ne pitää puhdistaa (sanitize), sillä SVG voi sisältää haitallista JavaScriptiä tai ulkoisia viittauksia.
• Suorituskyky: erittäin monimutkaiset vektorit voivat hidastaa renderöintiä — harkitse rasterikuvan käyttöä taustalle tai osittaista rasterointia, jos suorituskyky kärsii.
• Responsiivisuus: käytä viewBox-attribuuttia ja suhteellisia mittoja, jotta SVG mukautuu eri näyttökokoihin.
• Saavutettavuus: lisää <title> ja <desc>-elementit sekä tarvittaessa ARIA-attribuutit, jotta ruudunlukijat voivat tulkita kuvan sisällön.

Yhteenveto

SVG tarjoaa tehokkaan ja joustavan tavan esittää skaalautuvaa grafiikkaa verkkoympäristössä. Se soveltuu erityisesti logoihin, ikoneihin, kaavioihin ja muihin vektori-intensiivisiin kohteisiin, joissa korkea laatu ja muokattavuus ovat tärkeitä. Oikein käytettynä SVG parantaa sivuston ulkoasua, saavutettavuutta ja usein myös latausnopeutta.

Hae kirjaimella