SVG-tiedostomuoto on suosittu työkalu kaksiulotteisen grafiikan, kaavioiden ja kuvien esitykseen verkkosivustoilla. Lisäksi vektoritiedostona sitä voidaan suurentaa tai pienentää resoluutio katoamatta. Lue lisää SVG-kuvien tärkeimmistä ominaisuuksista, niiden eduista ja haittapuolista sekä siitä, miten SVG-muoto on kehittynyt.
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 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.
Skaalautuva vektorigrafiikka on edennyt pitkälle viime vuosina – mutta mihin SVG-tiedostoja käytetään käytännössä?
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.
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:n etuihin ja haittoihin kannattaa tutustua ennen kuvien tallentamista tähän tiedostomuotoon.
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.
Toimi seuraavasti, kun käytät Adobe Photoshopia:
Hyödyllinen huomautus: koska Photoshop on rasterigrafiikkaeditori, monet ihmiset haluavat luoda ja muokata SVG-tiedostoja Adobe Illustratorilla, vektorigrafiikkaeditorilla.
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 pikseloitu. SVG:t eivät sisällä pikseleitä, joten ne eivät koskaan menetä resoluutiota. Lisäksi PNG-tiedostot eivät tue animaatiota.
Lue lisää toisesta suositusta verkkografiikan ja logojen muodosta.
Ota selvää, miksi JPEG-tiedostot on suunniteltu monimutkaisia digitaalisia valokuvia ajatellen.
Tutustu tähän uudentyyppiseen rasteritiedostoon Applelta.
Tutustu tähän laajasti käytettyyn kehitetty Adobe Illustratorille kehitettyyn vektorimuotoon.
Mikä tiedostomuoto hallitsee web-suunnittelua?
Tutustu tarkemmin niiden tulostusominaisuuksiin.
Kauniin vektoritaiteen ja kuvien luonti
7 pv maksutta, sitten 24,79 € /kk.
Laadi tyylikkäitä sivuntaittoja painettaviksi ja digitaaliseen mediaan.
7 pv maksutta, sitten24,79 € /kk.
Saat koko luovien sovellusten kokoelman ja paljon muuta.
7 pv maksutta, sitten64,55 € /kk.