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

Hollantilainen ohjelmistoinsinööri Martijn Koster ehdotti SVG-tiedostoa ensimmäisen kerran vuonna 1994.

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 tukee vuorovaikutteisuutta JavaScriptin kaltaisten komentosarjakielten kautta sekä tuo käyttöön dynaamisia ja kiinnostavia grafiikoita.
• SVG on XML-kieli, joka sallii helpon käsittelyn ja integroinnin muihin web-teknologioihin.

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:

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 käyttäjät haluavat luoda ja muokata SVG-tiedostoja Adobe Illustratorilla, vektorigrafiikkaeditorilla.

SVG-tiedoston luonti Illustratorissa

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

1. Kun olet sommitellut taideteoksen Illustratorissa, valitse teksti ääriviivojen luontia varten. Tämä auttaa välttämään kirjasimien korvausongelmat, kun taidettasi tarkastellaan muilla tietokoneilla. Valitse kirjasin – Luo ääriviivat
2. Tallenna tiedosto ja valitse sitten Tiedosto > Tallenna nimellä. Napsauta avattavaa Muoto-valikkoa esiin tulevassa ruudussa ja valitse sitten SVG.
3. Voit myös viedä muokatun SVG-tiedoston valitsemalla Tiedosto > Vie > Vie muodossa ja valitsemalla muodoksi SVG. Tällöin voit säätää vientiasetuksia, kuten tarkkuutta ja yhteensopivuutta.

SVG-tiedoston muokkaus Illustratorissa

1. Valitse tiedosto ja avaa SVG Illustratorissa. Voit myös tuoda SVG-tiedoston nykyiseen Illustrator-dokumenttiin valitsemalla Tiedosto > Sijoita.
2. Voit valita SVG-tiedostosta yksittäisiä polkuja, muotoja tai ryhmiä käyttämällä valintatyökalua (tai suoravalintatyökalua). Voit muovata, muuntaa tai muokata polkuja, muuttaa niiden kokoa tai lisätä värejä ja tehosteita.