SVG:n soveltuvuus verkkosivukehityksen ensisijaiseksi grafiikkaformaatiksi

Abstract

Verkkosivujen selaamiseen käytetään nykyään monenlaisia päätelaitteita. Tänä päivänä jo suurin osa selaamisesta tapahtuu pienikokoisilla mobiililaitteilla työpöytätietokoneiden sijaan. Päätelaitteiden monimuotoisuus asettaa haasteen perinteisille verkkosivujen grafiikkaformaateille, sillä ne ovat rasterigrafiikkaa, joka mukautuu huonosti eri kokoisille näytöille. Rasterigrafiikan sijaan voitaisiin käyttää resoluutioriippumatonta vektorigrafiikkaa, ja verkkosivukehitykseen onkin saatavilla standardoitu vektorigrafiikkaformaatti: SVG. Tässä työssä selvitetään, voidaanko kaikki verkkosivukehityksen rasterigrafiikkaformaatit ja -teknologiat korvata SVG:llä. SVG:n soveltuvuutta rasterigrafiikan korvaajaksi tutkittiin vertaamalla sitä rasteriformaatteihin visuaalisen laadun, selaintuen, suorituskyvyn ja tiedostokoon osalta. Työssä myös luotiin katsaus sellaisiin SVG:n erityispiirteisiin, jotka ovat oleellisia verkkosivukehityksessä. Testit toteutettiin valmiin testikuvamateriaalin ja työtä varten luotujen testisovellusten avulla. Työssä havaittiin, että SVG:llä voi ja kannattaa korvata ainakin staattinen ja tietyin ehdoin myös animoitu piirrosgrafiikka. Valokuvamateriaalin esittämiseen JPG on edelleen paras, koska tämän tyyppisen materiaalin esittäminen vektorigrafiikkana vie huomattavasti muistia. Toisaalta valokuvamateriaali on tarvittaessa mahdollista sisällyttää SVG-tiedostoon, jolloin molempien grafiikkalajien edut yhdistyvät. Lopulta dynaamisen grafiikan generointiin käytetty HTML5:n <canvas>-elementti soveltuu paremmin mutkikkaaseen ja käyttäjän interaktiota edellyttämättömään dynaamiseen grafiikkaan. SVG:hen on oleellisesti helpompaa liittää tapahtumankäsittelijöitä, mutta sen manipuloiminen vaatii hieman <canvas>-elementtiä enemmän suorituskykyä.