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.
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-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.
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.
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.
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ä.
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 pikselöity. SVG:t eivät sisällä pikseleitä, joten ne eivät koskaan menetä resoluutiota. Lisäksi PNG-tiedostot eivät tue animaatiota.
