Mikä on vektorikuva?

Ennen ohjelman käytön opettelua on syytä tutustua hiukan käsitteistöön. Inkscape on ohjelma, jolla piirretään sekä muokataan vektorikuvia ja ohjelman opettelun aloittamisessa onkin tärkeitä ymmärtää, mikä vektorikuvissa on olennaista ja miten ne eroavat rasterikuvista, joita piirretään tai muokataan monilla muilla ohjelmilla, kuten Gimpillä tai Photo Shopilla.

Tutustutaan ensin rasterikuvan käsitteeseen, jotta saadaan parempi käsitys siitä, miten vektorikuvat eroavat esimerkiksi valokuvista.

Rasterikuva

Rasterikuvat eli pikselikuvat eli bittikarttakuvat ovat kuvatyyppi, jota ovat esimerkiksi normaalit digitaalisella kameralla otetut valokuvat tai skannerilla skannatut kuvat. Ne koostuvat ruudukon muotoon asetelluista neliön muotoisista erivärisistä kuvapisteistä eli rastereista eli pikseleistä.

  • Rasterikuva on ruudukko, jolla on aina tietty koko, esimerkiksi 800×500 pikseliä.
    (ruudukon sarakkeiden määrä kertaa rivien määrä)
  • Kuva on tallennettu tietona ruudukon kunkin ruudun väristä.
  • Kuvan muokkaaminen tarkoittaa kuvassa olevien kuvapisteiden värin muuttamista.
  • Rasterikuvat soveltuvat erityisesti valokuviin sekä muihin paljon “epäsäännöllisyyttä” sisältäviin kuviin.
  • Tallennusmuotoja: bmp, jpg, png, gif, webp, raw

Voidaan ajatella, että rasterikuvilla esitetyt kuviot eivät ole oikeastaan kyseisiä kuvioita vaan joukko pikseleitä, jotka on asetelty sellaiseen järjestykseen, että ne yhdessä näyttävät halutulta kuviolta. Siis esimerkiksi, jos rasterikuvassa on ympyrältä näyttävä kuvio, paljastaa lähempi tarkastelu, että todellisuudessa kuvassa onkin joukko sopivan värisiä kuvapisteitä, jotka on aseteltu ympyrän muotoon. Läheltä tarkasteltuna ja suurennettuna pikseleiden kulmikas muoto tulee esiin ja kuva alkaa “palikoitua” sekä näyttää “legomaiselta”.

Alla muutama erikokoinen hymynaama alkuperäisessä koossaan sekä skaalattuina saman kokoisiksi. Kun pienet kuvat on skaalattu suuremmiksi, näkyy niiden koostuminen “palikoista”.

KuvaKokoTiedostokokoSamankokoisina (100×100)
10×1010×10321 t10×10
30×3030×301161 t30×30
60×6060×602609 t60×60
100×100100×1004752 t100×100
2000×20002000×2000125432 t2000×2000

Rasterikuvien palikkamaista koostumusta voidaan häivyttää tekemällä kuvasta tarkempi, eli kasvattamalla ruudukon kokoa. Esimerkiksi kokoa 4000×3000 oleva kuva on selvästi tarkempi kuin 1000×750 kokoinen kuva, koska suuremmalla määrällä kuvapisteitä pystytään kuvaan tekemään enemmän yksityiskohtia. Tarkemmassa kuvassa on enemmän informaatiota ja informaation suurempi määrä tarkoittaa luonnollisesti myös suurempaa tiedostokokoa, koska tallennettavia pikseleitä on enemmän. Esimerkiksi 4000×3000-kokoisessa kuvassa on kertolaskun mukaisesti 12 miljoona pikseliä, eli 12 megapikseliä. Esimerkiksi digikameroiden ja puhelimien mainoksissa kerrotuissa megapikselilukemissa on kyse juuri tästä. Millä tarkkuudella olevia kuvia kamera kykenee ottamaan. Kuvatiedoston kokoon vaikuttaa luonnollisesti myös käytettävissä olevien värisävyjen määrä. Valokuvissa on käytettävissä tyypillisesti noin 16 miljoonaa väriä.

Valokuvat sisältävät paljon epäsäännöllisyksiä ja värisävyjä. Rasterikuvamuodot soveltuvat hyvin valokuvien tallentamiseen.

Kuvioiden koostuminen kuvapisteistä tarkoittaa myös sitä, että kuvaa muokattaessa täytyy itse kuvion sijasta muokata sitä esittäviä pisteitä. Esimerkiksi ympyrää siirrettäessä pitää siis siirtää sitä esittäviä kuvapisteitä. Tämä ei ole aina helppoa, jos kuvassa on jotain muutakin sisältöä, jota ei ole tarkoitus muuttaa.

Vektorikuva

Toisin kuin rasterikuva, vektorikuva ei koostu kuvapisteistä vaan se sisältää tiedot erilaisista geometrisista kuvioista sekä niiden (matemaattisista) ominaisuuksista. Esimerkiksi, jos kuvassa on ympyrä, on siitä tyypillisesti tallennettu tiedot sen keskipisteen sijainnista, säteen pituudesta, mahdollisen reunaviivan paksuudesta, reunaviivan väristä sekä ympyrän täyttöväristä. Monikulmiosta puolestaan on tallennettu tiedot kärkipisteiden sijainneista järjestyksessä, viivan paksuus, viivan väri sekä täyttöväri.

  • Vektorikuva on aina tarkka koosta riippumatta.
  • Kuva on tallennettu tietoina kuvassa olevien kappaleiden ominaisuuksista, ei kappaleiden kuvina.
    (kappaleen ominaisuuksia: sijainti, suunta, suuruus, pituus, paksuus, väri,…)
  • Vektorikuva säilyttää muokattavuuden.
  • Sopii erityisesti säännöllisiin ja selkeisiin piirtokuviin ja kaavioihin.
  • Tallennusmuotoja: svg, pdf, ps, eps, wmf

Vektorikuvassa on siis tallennettuna itse kuvion tiedot, ei vain sen esitys jonkin kokoisena “ruudukkoesityksenä”. Koska vektorikuvatkin lopulta aina näytetään jossain mediassa, siis esimerkiksi näytöllä tai paperille tulostettuna, ne käytännössä aina muunnetaan katselua varten rasterikuvaksi. Näytöllä vektorikuva muunnetaan näytön pieniksi valopikseleiksi ja paperilla tulostuksen tai painon mustepisteiksi. Erona rasterikuviin on siis se, että vektorikuva voidaan aina näytettäessä, jopa suurempaan kokoon skaalattaessa, näyttää kyseisen median parhaalla mahdollisella tarkkuudella.

Alla sama hymynaamaa esittävä vektorikuva skaalattuna eri kokoihin.

KuvaKokoTiedostokokoSamankokoisina
10x1010×10492 t10×10
30x3030×30492 t10×10
60x6060×60492 t10×10
100x100100×100494 t10×10
300x300300×300494 t10×10
2000×20002000×2000496 t10×10

Taulukon hymynaama koostuu ympyrästä, kahdesta ellipsistä ja yhdestä kaarevasta viivasta. Alla on kuvan vektorimuotoisen SVG-tiedoston sisältö, josta voidaan nähdä, miten kuva on tallennettu luettelemalla kuvan osien ominaisuudet.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="300" viewBox="0 0 30 30">
    <circle cx="15" cy="15" r="12" fill="#fc0" stroke="black" stroke-width="1"></circle>
    <ellipse cx="11.3" cy="13" rx="1.7" ry="2.5" fill="white" stroke="black" stroke-width="1"></ellipse>
    <ellipse cx="18.7" cy="13" rx="1.7" ry="2.5" fill="white" stroke="black" stroke-width="1"></ellipse>
    <path fill="none" stroke="black" stroke-width="1" d="M10 19.5 c3 3 7 3 10 0"></path>
</svg>

Koska vektorikuvien piirtämiseen käytetään geometrisia kuvioita ja muotoja, ne soveltuvat erityisesti piirroskuviin, joissa on selkeitä ääriviivoja ja jotka koostuvat erilaisista viivoista ja väripinnoista.

Suurempana näytettävää kuvaa varten ei tallenneta enempää tietoa, koska samat kuviot vain piirretään suuremmassa koossa, joten vektorikuva säästää tilaa sitä enemmän, mitä suuremmasta kuvasta on kyse. Hymiöesimerkissä tiedostokokojen pieni ero johtuu vain siitä, että kuvan näyttökoko on tallennettu kuvaan itseensä width- ja height-attribuutteina, joiden pituus vaihtelee kahdesta merkistä (“10”) neljään merkkiin (“2000”).

Vektorigrafiikassa objekteja voi ryhmitellä monimutkaisemmiksi kokonaisuuksiksi, muuttaa niiden värejä, skaalata, peilata, kiertää, järjestellä ja pinota eri järjestyksiin.

Lisäksi, koska kuvassa olevia kuviota ei tallennettaessa muuteta niiden pikseliesitykseksi, säilyvät niiden ominaisuudet helposti muokattavina. Esimerkiksi kuvassa oleva ellipsi on helposti siirrettävissä vain muuttamalla tietoa sen keskipisteen sijainnin koordinaateista. Samoin hymynaaman väri voidaan vaihtaa vaikka punaiseksi korvaamalla keltaista sävyä tarkoittavan värikoodin #fc0 punaisella sävyllä #f66. Viivan paksuus vaihtuu muuttamalla stroke-width-attribuutin arvoa.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100" viewBox="0 0 30 30">
    <circle cx="15" cy="15" r="12" fill="#f66" stroke="black" stroke-width="1"></circle>
    <ellipse cx="11.3" cy="10" rx="1.7" ry="2.5" fill="white" stroke="black" stroke-width="1"></ellipse>
    <ellipse cx="20" cy="13" rx="1.7" ry="2.5" fill="white" stroke="black" stroke-width="1"></ellipse>
    <path fill="none" stroke="black" stroke-width="3" d="M10 19.5 c3 3 7 3 10 0"></path>
</svg>

Vektorikuvan muokattavuus perustuu juuri siihen, että kuvakokonaisuus koostuu objekteista (olioista), joita voi muokata siirtämällä, skaalaamalla, kiertäämällä, väriä vaihtamalla sekä ryhmittelemällä ja järjestämällä/pinoamalla eri järjestykseen toisiinsa nähden.

Vektorikuva soveltuu erityisen hyvin piirtokuviin, kaavioihin, karttoihin sekä muihin kuviin, jotka koostuvat selkeistä säännöllisistä (matemaattisista) käyristä ja kuvioista sekä tasavärisistä tai liukuvärisistä pinnoista. Kuitenkin esimerkiksi valokuvissa on tyypillisesti niin paljon epäsäännöllisyyksiä ja erilaisia värisävyjä, että niiden tallentamiseen rasterikuvat sopivat yleensä huomattavan paljon paremmin.