SVG (Scalable Vector Graphics) eli skaalautuva vektorigrafiikka on XML-pohjainen kuvaformaatti, joka määrittelee kuvat matemaattisilla kaavoilla pisteiden, viivojen ja muotojen avulla pikseleiden sijaan. Tämä tekee SVG:stä täydellisesti skaalautuvan — kuva näyttää terävältä niin 16×16 pikselin faviconissa kuin 4K-näytöllä suurennettuna.
SVG:n edut rasterikuviin verrattuna
Rasteriformaatit (JPEG, PNG, WebP) koostuvat pikseleistä — kiinteästä ruudukosta värillisiä pisteitä. Kun rasterikuvaa suurennetaan, pikselit näkyvät ja kuva muuttuu epäteräväksi tai pikselimäiseksi. SVG:ssä ei ole pikseleitä, vain matemaattisia ohjeita, joten se renderöidään aina täydellisesti riippumatta koosta.
Tiedostokoko on usein pienempi SVG:llä, etenkin yksinkertaisilla kuvilla kuten logoilla ja ikoneilla. Monimutkainen valokuva voi olla suurempi SVG:nä kuin PNG:nä, mutta logo tai ikonikollektio on tyypillisesti kevyempi.
SVG:tä voidaan muokata CSS:llä ja JavaScriptillä. Voit vaihtaa värejä, animoida osia, lisätä hover-efektejä — kaikki suoraan koodissa ilman uutta kuvaa. Tämä tekee SVG:stä dynaamisen, interaktiivisen elementin pelkän staattisen kuvan sijaan.
SVG:n käyttötarkoitukset verkkosivuilla
Logot ovat SVG:n klassinen käyttökohde. Logo näkyy headerissa pienempänä, hero-osiossa suurempana ja printatussa materiaalissa vielä isompana — SVG varmistaa, että se näyttää terävältä joka koossa.
Ikonit (valikkoikonit, sosiaalisen median ikonit, toimintaikonit) ovat ihanteellisia SVG:lle. Icon-fontit olivat suosittuja, mutta SVG on parempi: helpompi muokata, saavutettavampi ja monipuolisempi.
Infografiikka, kaaviot ja diagrammit toimivat hyvin SVG:nä. Ne skaalautuvat responsiivisesti ja voidaan animoida tai tehdä interaktiivisiksi.
Pk-yrityksen sivustolla SVG sopii logolle, ikoneille, koristeellisille elementeille (dividerit, taustakuviot) ja yksinkertaisille illustraatioille. Monimutkaiset valokuvat tai fotorealistiset kuvat kuuluvat WebP- tai AVIF-formaattiin.
SVG:n optimointi
SVG-tiedostot voivat sisältää ylimääräistä metadataa, kommentteja ja tarpeetonta koodia, etenkin jos ne on viety graafisista ohjelmista kuten Adobe Illustratorista. SVGO on työkalu, joka optimoi SVG:t poistamalla turhan ja pienentäen tiedostokokoa usein 30–50%.
Inline SVG tarkoittaa SVG-koodin upottamista suoraan HTML:ään <svg>-tagilla. Tämä vähentää HTTP-pyyntöjä ja mahdollistaa CSS/JS-manipuloinnin, mutta kasvattaa HTML:n kokoa. External SVG ladataan <img src="logo.svg"> -tavalla — pienempi HTML, mutta ylimääräinen lataus ja ei CSS-manipulointia.
Valinta riippuu käyttötapauksesta: kriittiset, usein käytetyt SVG:t (logo) kannattaa inline, vähemmän tärkeät external.
SVG ja saavutettavuus
SVG:lle voi ja pitää lisätä <title> ja <desc> -elementit, jotka kuvaavat kuvaa ruudunlukijoille. role="img" ja aria-label parantavat saavutettavuutta. Jos SVG on puhtaasti dekoratiivinen, aria-hidden="true" piilottaa sen ruudunlukijoilta.
SVG tukee myös tekstin upotusta, joka on luettavissa ja hakukoneet indeksoivat sen — toisin kuin teksti rasterikuvassa.
Yhteenveto
SVG on moderni, tehokas kuvaformaatti, joka sopii täydellisesti logoille, ikoneille ja vektorigrafiikalle. Pk-yritykselle SVG tarkoittaa terävämpiä logoja, kevyempiä tiedostoja ja joustavampaa designia. Se on web-standardiin, kaikki nykyselaimet tukevat sitä, ja sen edut ovat merkittäviä verrattuna perinteisiin rasteriformaatteihin. Jos kuva on vektori, käytä SVG:tä — se on yksinkertaista, tehokasta ja tulevaisuuden kestävää.