SVG-tiedostot
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.
![SVG marquee image](./media_1c840d54c0c6d35eb38bebd13dec2f908cf9a275e.png?width=750&format=png&optimize=medium)
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.
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
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:
- Kun olet koonnut kuvan Photoshopissa, napsauta Tiedosto > Vie > Vie nimellä.
- Napsauta avattavaa Muoto-valikkoa esiin tulevassa ruudussa ja valitse sitten SVG.
- 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
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.
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.
Tukevatko SVG-tiedostot animaatioita?
Miten erotan SVG-tiedoston?
Voiko SVG-tiedostoja käyttää vain internetissä?
Miten suuria SVG-tiedostot ovat?
Mikä on SVG- ja PNG-tiedostojen välinen ero?
Ota selvää, miksi JPEG-tiedostot on suunniteltu monimutkaisia digitaalisia valokuvia ajatellen.
Tutustu tähän laajasti käytettyyn kehitetty Adobe Illustratorille kehitettyyn vektorimuotoon.