SVG-opas

SVG (Scaleble Vector Graphics) on W3C:n standardoima vektorigrafiikkaan tarkoitettu tallennusmuoto. Sen voi liittää HTML- ja XHTML-sivuille <embed>, <object> tai <iframe> tageilla. <embed> ja <object> vaativat sivun, josta selain käyttää Adoben kehittämää svg-vieweriä. Sitä ei tarvitse olla tietokoneessa, vaan sen voi laittaa linkkinä koodiin. Tässä esimerkki Adoben suosittelemasta <embed>-tagin käytöstä:

<embed src="kuvio.svg" width="100" height="100" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/" />

<object> tagi tarvitsee src:n sijasta data:n. Ja lisäksi, tuo tulee html- tai xhtml-sivuille, eikä svg-kuvaan.

Ainoat erot SVG-kuvilla on muihin kuviin verrattuna, että:

• se on vektorigrafiikkaa
  (zoomatessa tekninen laatu ei huonone)
• kun sen avaa tekstieditorilla, sen koodia voi ymmärtää.
  
• SVG tukee javascriptiä, DOM:ia ja CSS:ää.

On olemassa ohjelmia, jotka tallentavat kuvat SVG-muotoon. Sitä voi kuitenkin myös kirjoittaa kirjoitusohjelmilla, kuten Notepad. Tietyt ohjelmat, kuten Microsoft Word ovat ehkä liian ylellisiä. SVG ei tarvitse erikoisia fontteja tai kirjainkokoja.

SVG:n alkeet

SVG on XML-kieli. Sitä voi siis tehdä kirjoittamalla. Yleisesti katsoen kannattaisi aloittaa alussa olevista ja turhilta tuntuvista koodin aloittavista ja pakollisista komennoista.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">

</svg>

Tuossa olivat siis tarvittavat koodit alkuun ja loppuun. Neljännellä rivillä on tyhjä tila, koska siihen tulee koodin sisältö (käsittää kuvien, animaatioiden ja muiden sellaisten koodeja). SVG-tiedostot tallennetaan .svg päätteellä.

Kaikkea tulevia koodeja ei ole pakko kirjoittaa siinä järjestyksessä, mihin ne on tällä sivulla kirjoitettu.

Kuviot

Kuviot kuuluvat SVG:n laajuuteen. Yleensä kuvioista pitää kirjoittaa koodiin sijainti ja koko. Seuraavaksi on monien kuvioiden tekemiseen ohjeet

Suorakulmiot

Suorakulmiot tehdään kirjoittamalla ensin <rect , sitten pitää määritellä kuvion x- (leveys) ja y- (korkeus) koordinaatit kuvan alueella: x="65" y="45". Seuraavaksi voi päättää haluaako pyöristetyt kulmat vai ei. Sen saa aikaan rx- ja ry-koordinaateilla. Lopuksi Pitää kirjoittaa kuinka leveän ja kuinka korkean suorakulmion haluaa. Kaikki äskeinen on seuraavassa esimerkissä.

<rect x="654" y="334" rx="40" ry="40" width="80" height="234"/>

Viivat

Tämä luku kertoo viivoista (line). Jos haluat tietoa monikulmaisista viivoista, katso luku Monikulmainen viiva. Viivat ovat helposti tehtäviä kuvioita svg:hen. Niihin pitää laittaa x1- ja y1-koordinaatit kertomaan viivan lähtöpisteen ja lisäksi x2- ja y2-koordinaatit kertomaan viivan loppupisteen. Viivan koodi kirjoitetaan siis näin:

<line x1="43" y1="65" x2="12" y2="21"/>

Ympyrät

Ympyrän (circle) voi luoda kirjoittamalla ensin ympyrän keskipisteen (cy,cx) ja sitten säteen (r). Seuraavaksi on esimerkki, jossa luodaan halkaisijaltaan 130 pikseliä oleva ympyrä:

<circle cy="342" cx="425" r="75"/>

Ellipsit

Ellipsit ovat muuten melkein samanlaisia kuin ympyrät, mutta niissä määritetään kaksi sädettä (rx,ry).

<ellipse cx="348" cy="254" rx="76" ry="34"/>

Äskeisessä esimerkissä ellipsin x-säde määritettiin 76 pikseliä suureksi ja y-säde 34 pikseliä suureksi.

Monikulmioiset kuviot

Monikulmioiset kuviot ovat erilaisia muihin kuvioihin verrattuna, että niiden muoto on lähes vapaa.

Monikulmainen viiva

Monikulmainen viiva (polyline) on kuvio, joka ei ole pakosti kiinni (monikulmainen viiva on melkein sama asia kuin monikulmio). Se voi siis olla vaikka Z-kirjain. Monikulmaisen viivan aloittaminen tapahtuu kirjoittamalla <polyline points= . Sitten vain täytyy lisätä enää pisteet, joita pitkin viiva kulkee. Esimerkiksi suorakulmaisen monikulmioisen viivan voi tehdä tällä tavalla:

<polyline points="45,67 45,77 55,77"/>

Seuraavaksi on koodi stereotypisen kuusen tekemiseen (seuraava koodi on polygoni-luvussakin):

<polyline points="330,260 300,260 320,240 300,240 320,220 300,220 330,200 360,220 340,220 360,240 340,240 360,260 330,260"/>

Jotta edelliseen koodiin saisi vähän väriäkin, voi katsoa lukua, jossa käsitellään tyylien lisäämistä.

Monikulmio

Monikulmio (polygon) käsittää useita kuvioita, kuten stereotypiaisen kuusen (tämä muoto tulee seuraavassa esimerkissä). Monikulmio on muuten samanlainen kuin monikulmainen viiva, mutta se on aina yhtenäinen kuvio. Monikulmio eli polygoni tehdään kirjoittamalla ensin tämän: <polygon points= . Sitten pitää kirjoittaa pisteet, niin että x- ja y-koordinaatit ovat pilkun toisella puolella, kuten näin: 14,56 . Nyt on jo piste, mistä viiva alkaa. Pisteiden väliin tulee väli-merkki. Tässä esimerkki miten voi tehdä monikulmion:

<polygon points="330,260 300,260 320,240 300,240 320,220 300,220 330,200 360,220 340,220 360,240 340,240 360,260 330,260"/>

Monikulmaisesta viivasta voi tehdä monikulmion muuttamalla polyline tekstin polygon:ksi.

Kirjoittaminen

SVG:n laajuuteen kuuluu kuvioiden lisäksi kirjoittaminen. Svg:llä voi tehdä tekstiä erikoisiksi kuvioiksi (kuten aaltoilevaa tekstiä). Kirjoittamisen voi aloittaa tagilla <text . Sen jälkeen on kirjoitettava, mihin teksti sijoitetaan (x, y). Kuten vaikka näin:

<text x="43" y="23"

Seuraavaksi määritetään tyylit. Tyylien jälkeen tagiin tulee lopetusmerkki > . Ensimmäisen tagin jälkeen tulee teksti joka kuvassa näkyy. Kirjoitus pitää lopettaa </text>-komennolla.

Kirjoituksen tyylejä

Kirjoituksen fonttia, kokoa ja muita ominaisuuksia voi muokata. Tässä osiossa käsitellään kirjoitusten muokkaamista.

Fontit

Fontteja moi muuttaa font-family -tyylimäärittelyllä. Esimerkiksi fontin voi muuttaa Verdanaksi tällä koodilla:

style="font-family:verdana"

Korostus

Korostuksen voi tehdä font-weight tekstillä. Huomaa, että korostamisessa tulee käyttää tekstikomentoa, bold tai normal. Tässä esimerkki korostamisesta:

style="font-weight:bold"

Kirjainten koko

Kirjainten kokoa voi muuttaa font-size tekstillä. Sen voi tehdä tällä tavalla:

style="font-size:5"

Samassa tekstissä, eri määrittely

Tämän otsikon jälkeen on tyylit, joilla teksti vaikka hyppää eri paikkaan, mutta on samassa koodissa. Katsotaan vaikka ensin, miten se tapahtuu. Text-tagin sisässä on käytössä tspan. Se on siis saman koodin sisässä, mutta se on vielä toisenkin. Tspan:ia voi käyttää niin monta kertaa kuin haluaa.

Teksti jatkuu eri paikasta

Tekstin saa jatkumaan eri paikasta, kun käyttää tspan:ia, dx:ää ja dy:tä. Niitä voi käyttää esimerkiksi näin:

<tspan dx="20"> Tekstiä </tspan>

Tavallisten lukujen lisäksi dx:ssä ja dy:ssä voi käyttää myös negatiivisia lukuja, joten teksti voi myös jatkua edellisen tekstin päältä, kuten näin:

<text x="435" y="354"
style="fill:silver;font-weight:bold">
Tekstiä
<tspan dx="-50">
Tekstiä osittain edellisen tekstin päällä
</tspan>
</text>

Tyylin määrittely yleisesti

SVG-kuvissa voi muuttaa kuvioiden tyyliä. Esimerkiksi värejä voi muuttaa. Seuraava malli näyttää mihin tyylien määritys tiedostossa sijoitetaan (kuten siis alussa huomautettiin, kaikkea ei ole pakko tehdä juuri mallin mukaisesti):

<line x1="330" y1="260" x2="330" y2="270" style="stroke:brown;stroke-width:6"/>

Tässä määriteltiin viiva, jonka reuna/reunat (siis itse viiva) on ruskea. Lisäksi viivan leveys on 6 pikseliä.

Seuraavaksi on lista muutamista tyylimäärittelyistä:

• fill
  • fill-opacity
  • fill-rule
• stroke
  • stroke-dasharray
  • stroke-dashoffset
  • stroke-linecap
  • stroke-linejoin
  • stroke-miterlimit
  • stroke-opacity
  • stroke-width

Nämä kaikki sijoittuvat kahteen pääryhmään jotka ovat fill ja stroke.

Fill

Fill:llä määritetään kuvion sisässä oleva alue. Sen läpinäkyvyyttä voi myös säätää. Tässä esimerkki äskeisestä aiheesta:

style="fill:#ffff00;fill-opacity:0.23;"

Äsken tuli ehkä uusi asia mukaan svg piirtämiseen. Se on RGB-määritys. Sitä ei ole pakko käyttää, mutta värivalikoima on sillä paljon suurempi kuin kirjoittamalla englannin kielellä jonkun värin.

Viimeisimmässä esimerkissä määritettiin sisuksen väriksi keltainen ja läpinäkyvyydeksi 0.23 (nolla on läpinäkyvin).

Stroke

Stroke:lla muutetaan viivojen paksuutta, läpinäkyvyyttä tai väriä ja lisätä muita ominaiusuuksia. Tässä vielä esimerkki stroke:n käytöstä:

style="stroke:#000044;stroke-width:4;stroke-opacity:5.0"

G, oman tyylin teko ja käyttö

G:tä voi käyttää omien tyylien käytössä ja tekemisessä. Se alkaa <g> tagilla. Aloitus-tagin jälkeen voi tehdä oman tyylin, kuten kuvioon värin vaihtuminen kuviossa tasaisesti:

<g>
<linearGradient id="Otsikko" gradientUnits="objectBoundingBox">
<stop offset="0%" stop-color="#ffff00" />
<stop offset="100%" stop-color="#009900" />
</linearGradient>

Esimerkissä on käytössä linearGradient-tagi. Siinä olevan id:n jälkeen on mikä tahansa nimi jonka voi itse keksiä (se voi olla vaikka tyyli1). Seuraavilla kahdella rivillä määritettiin kuvion alun(0%) väriksi keltainen. Sen jälkeen loppuun(100%) kohti väri muuttuu vihreämmäksi. Lopuksi vielä lopetettiin komento linearGradient. Seuraavana on tyylin käyttö kuviossa:

<g fill="url(#Otsikko)" >
<rect x="100" y="50" width="200" height="100"/>
</g>
</g>

Äskeisessä esimerkissä otettiin käyttöön komento g jolle annettiin tehtäväksi muuttaa kuvioiden fill:iä niin, kuten aiemmin määritettiin. Sitten tehtiin suorakulmio, johon g-komento vaikuttaa. Lopuksi lopetettiin g-komennot (myös aiemman esimerkin).

Linkit

Kuviin voi lisätä linkkejä a-tagilla kuten XHTML-kuvauskielessä:

<a xlink:href="http://fi.wikibooks.org/wiki/Wikikirjasto:Etusivu">
<ellipse cx="25" cy="15" rx="20" ry="10"
fill="red" />
</a>

Lisää tietoa linkkien käytöstä suomeksi löytyy tästä.

Javascript

JavaScript on kätevä tapa saada kuvaan toimintaa animoinnin lisäksi. Tapahtuman käsittelijöiden avulla saa lisättyä paljon hyviä ominaisuuksia, kuten kuvion koordinaattien muuttaminen. Javascriptin voi lisätä kuvaan näin:

<script type="text/javascript">

Koodia voi sitten lisätä tähän. Loppuun tulee tietysti:

</script>

Animaatiot

Animaatiolla saa lisättyä kuvaan elämää. SVG:ssä animaation voi toteuttaa lisäämällä kuvion tagien sisään animate-tagin, kuten tässä:

<rect>
<animate />
</rect>

Animate tarvitsee tiedoikseen:

• liikutettavan asian
  • nimen
  • tyypin
• animaation
  • aloitusajan
  • lopetusajan
  • aloituspaikan
  • lopetuspaikan

Jos lisäksi haluaa, että aanimaation jälkeen liikutettava elementti jää paikkaan, johon se siirrettiin, pitää animateen lisätä myös fill="freeze". Lopuksi vielä esimerkki:

<text x="0" y="0">
Tämän tekstin pitäisi liikkua
<animate attributeName="x" attributeType="XML"
begin="0s" dur="10s" fill="freeze" from="-20" to="300" />
</text>

Aiheesta muualla

• http://www.w3.org/TR/SVG/ (englanniksi)