SVG-tiedostot

Mitä opit.

• Mikä SVG-tiedosto on?
  
• SVG-tiedoston historia
  
• Mihin SVG-tiedostoja käytetään?
  
• SVG-tiedostojen plussat ja miinukset
  
• SVG-tiedoston avaaminen
  
• Miten SVG-tiedosto luodaan ja miten sitä muokataan.
  
• SVG-tiedostot: usein kysytyt kysymykset

Mikä SVG-tiedosto on?

Scalable Vector Graphics (SVG) on verkkoon sopiva vektoritiedostomuoto. Toisin kuin pikselipohjaiset rasteritiedostot, kuten JPEG-tiedostot, vektoritiedostot tallentavat kuvat matemaattisten kaavojen avulla, jotka perustuvat ruudukon pisteisiin ja viivoihin. Tämä tarkoittaa, että SVG:n kaltaisten vektoritiedostojen kokoa voidaan muuttaa merkittävästi menettämättä niiden laatua, mikä tekee niistä ihanteellisia logoille ja monimutkaiselle verkkografiikalle. 

Niiden koon muuttamisen mahdollisuus ei ole niiden ainoa etu mikä tekee SVG-tiedostoista erittäin suosittuja verkkosuunnittelijoiden keskuudessa. SVG:t on kirjoitettu XML-koodilla, mikä tarkoittaa, että ne tallentavat kaiken tekstitiedon kirjaimellisena tekstinä muotojen sijaan. Tämän ansiosta hakukoneet, kuten Google, voivat lukea avainsanoilleen SVG-grafiikkaa, mikä voi mahdollisesti auttaa verkkosivustoa nousemaan hakusijoituksissa.

Huomaat SVG-tiedoston helposti sen .svg-tunnisteesta.

SVG-tiedoston historia

SVG-tiedoston historia alkoi 1990-luvun lopulla, jolloin World Wide Web Consortium (W3C) pyysi kehittäjiltä ehdotuksia uudenlaisesta vektorigrafiikkamuodosta. Kuusi kilpailevaa ehdotusta lähetettiin, ja niiden avulla luotiin muoto, josta lopulta tuli W3C:n SVG-muoto.  

SVG-tiedostojen suosion kasvu kesti jonkin aikaa. Niiden tuki oli suhteellisen vähäistä vuoteen 2017 asti, jolloin käyttäjät alkoivat nähdä SVG-muodon käytön edut nykyaikaisille verkkoselaimille. SVG-tiedostoja käytetään nykyään laajalti 2D-verkkosivustojen kuvissa, koska useimmat selaimet ja vektoritiedostojen piirustussovellukset voivat käsitellä niitä helposti.

Mihin SVG-tiedostoja käytetään?

Skaalautuva vektorigrafiikka on edennyt pitkälle viime vuosina – mutta mihin SVG-tiedostoja käytetään käytännössä?

Verkkosivustojen kuvakkeet ja logot

Suunnittelijat käyttävät usein SVG-tiedostoja verkkosivustojen kuvakkeiden, kuten painikkeiden, sekä yritysten logojen esittämiseen. Tämän tiedostotyypin kyky muuttaa kokoa laadusta tinkimättä tarkoittaa, että ne sopivat ihanteellisesti grafiikkaan, jonka täytyy näkyä useissa paikoissa ja eri kokoisina.

Infografiikka ja kuvitukset

XML:n käytön ansiosta SVG-tiedostoissa Googlen kaltaiset hakukoneet voivat lukea runsaasti tekstiä sisältäviä kaavioita ja diagrammeja, mikä voi auttaa hakukoneoptimoinnissa. Koska Google voi tunnistaa avainsanoja SVG-tiedostoista, se voi mahdollisesti nostaa verkkosivun korkeammalle sijoitukselle hakutuloksissa. Lisäksi SVG-tiedostot tukevat animaatioita, joka tekee verkkosivuista entistä mielenkiintoisempia.

Tutustu myös muihin rasteritiedostoihin.

SVG-tiedostojen plussat ja miinukset

SVG:n etuihin ja haittoihin kannattaa tutustua ennen kuvien tallentamista tähän tiedostomuotoon.

SVG-tiedostojen edut

• Toisin kuin rasteritiedostot, jotka koostuvat pikseleistä, vektorigrafiikka, kuten SVG:t, säilyttää aina resoluutionsa – kuvan koosta riippumatta. Sinun ei tarvitse huolehtia siitä, että SVG-kuvat menettävät laatuaan tietyillä selaimilla tai kun muutat niiden kokoa niin, että ne näkyvät eri paikoissa.
  
• SVG-perustiedostot ovat usein pienempiä kuin rasterikuvat, jotka on rakennettu useista värillisistä pikseleistä matemaattisten algoritmien sijaan. 
  
• Koska SVG-tiedostot käsittelevät tekstiä tekstinä (eikä kuvina), näytönlukuohjelmat voivat skannata mitä tahansa SVG-kuvien sisältämiä sanoja. Tämä on erittäin hyödyllistä ihmisille, jotka tarvitsevat apua verkkosivujen lukemisessa. Hakukoneet voivat myös lukea ja indeksoida SVG-kuvatekstiä.

SVG-tiedostojen haittapuolet

• SVG-tiedostot sopivat erinomaisesti verkkografiikkaan, kuten logoihin, kuvituksiin ja kaavioihin. Mutta niiden pikselien puute vaikeuttaa korkealaatuisten digitaalisten valokuvien esitystä. JPEG-tiedostot ovat yleensä parempia yksityiskohtaisille valokuville. 
  
• Vain nykyaikaiset selaimet voivat tukea SVG-kuvia. SVG-tiedostojen käyttö Internet Explorer 8 -versiolla ja muilla vanhemmilla selaimilla saattaa olla haasteellista.
  
• SVG-kuvien sisältämää koodia voi olla vaikea ymmärtää, jos olet uusi sen tiedostomuodon käytössä. 

SVG-tiedoston avaaminen

Kaikki yleisimmät selaimet Chromesta ja Edgestä Safariin ja Firefoxiin mahdollistavat nykyään SVG-tiedostojen avaamisen – olitpa sitten Macilla tai Windowsilla. Käynnistä vain selain ja napsauta Tiedosto > Avaa valitaksesi tiedoston, jota haluat tarkastella. Se näkyy sitten selaimessasi.

SVG-kuvan avaaminen tietokoneen sisäänrakennetulla ohjelmalla on yhtä helppoa. Kaksoisnapsauta tiedoston nimeä ja saat luettelon ohjelmista, jotka avaavat sen – tai se avautuu automaattisesti yhteensopivassa ohjelmassa.

Miten SVG-tiedosto luodaan ja miten sitä muokataan

Toimi seuraavasti, kun käytät Adobe Photoshopia:

1. Kun olet koonnut kuvan Photoshopissa, napsauta Tiedosto > Vie > Vie nimellä.
   
2. Napsauta avattavaa Muoto-valikkoa esiin tulevassa ruudussa ja valitse sitten SVG.
   
3. Valitse Vie kaikki ja tallenna tiedosto. 

Hyödyllinen huomautus: koska Photoshop on rasterigrafiikkaeditori, monet ihmiset haluavat luoda ja muokata SVG-tiedostoja Adobe Illustratorilla, vektorigrafiikkaeditorilla.

SVG-tiedostot: usein kysytyt kysymykset

Tukevatko SVG-tiedostot animaatioita?

SVG-tiedostomuoto ei ole vain staattisia kuvia varten. On olemassa valikoima verkkotyökaluja, jotka auttavat tuomaan liikkuvia elementtejä verkkografiikkaan. SVG-animaatiot voivat sisältää suhteellisen peruselementtejä, kuten liukusäädintoiminnon, jolla siirrytään infografiikan eri diojen välillä. Kuvituksia voidaan myös saada liikkumaan, kuten tikittämään kellon viisareiden mukaan.

Miten erotan SVG-tiedoston?

Helpoin tapa erottaa SVG-tiedosto on tarkistaa laajennuskoodi. SVG-tiedoston laajennus .svg. Voit myös tunnistaa vektorikuvia, kuten SVG-kuvia, suurentamalla niitä 200 prosenttiin tai enemmän tietokoneen näytöllä. Vektorikuva säilyttää puhtaat linjansa ja yhtenäiset värinsä sen sijaan, että se muuttuisi pikseloiduksi tai epäselväksi.

Voiko SVG-tiedostoja käyttää vain internetissä?

Vaikka SVG-kuvia käytetään pääasiassa verkossa, niillä on elämää myös verkon ulkopuolella. Koska ne eivät esimerkiksi vääristy, kun niiden kokoa muutetaan alkuperäisistä mitoista, SVG-tiedostot ovat hyödyllisiä vaatemalleja, kuten T-paitoja, tulostettaessa. JPEG-tiedosto, joka on luotu monista pikseleistä, ei siirry yhtä puhtaasti.

Miten suuria SVG-tiedostot ovat?

SVG-tiedoston koko riippuu siitä, kuinka paljon kuvadataa se sisältää – mutta se on yleensä pienempi kuin useimmat muut tiedostotyypit. Monimutkainen grafiikka, jossa on monia polkuja ja ankkuripisteitä, vie enemmän tallennustilaa kuin yksinkertaisemmat, puhtaammat mallit. Yritä minimoida tiedostosi sisältämien monimutkaisten ohjeiden määrä.

Mikä on SVG- ja PNG-tiedostojen välinen ero?

Pähkinänkuoressa SVG:t ovat vektoritiedostoja ja PNG:t ovat rasteritiedostoja. Jos venytät PNG-tiedostoa liian pitkälle tai puristat sen liian pieneksi, siitä tulee epäselvä ja pikseloitu. SVG:t eivät sisällä pikseleitä, joten ne eivät koskaan menetä resoluutiota. Lisäksi PNG-tiedostot eivät tue animaatiota.