Scalable Vector Graphics (SVG)
SVG-kuvat ovat vektorigrafiikkaa. SVG-kuvia voi tuottaa kuvankäsittelyohjelmilla mutta myös ohjelmallisesti. Koska SVG-kuvat ovat XML-dokumentteja on niiden manipulointi helppoa DOM-rajapinnan avulla.
Tarkemmin SVG:hen voit tutustua seuraavien dokumenttien avulla:
- Adding vector graphics to the Web
- SVG Tutorial
- SVG
- SVG on the web - A Practical Guide
- SVG element reference
- SVG Attribute reference
- Transforms on SVG Elements
SVG-esimerkkejä
SVG-kuva voidaan sisällyttää suoraan HTML5-dokumenttiin kirjoittamalla SVG-koodi suoraan:
- SVG:n nimiavaruus on xmlns="http://www.w3.org/2000/svg". Eri nimiavaruudella huolehditaan, että mahdollisesti samannimiset elementit eivät mene sekaisin.
- SVG-kuvan vaatimat tyylit voivat olla suoraan SVG-koodin seassa tai HTML5-sivuun linkitetyssä css-tiedostossa
SVG-kuvia voi käyttää myös kuten mitä tahansa kuvia eli img tai figure-elementeillä. Tällöin svg-kuvan pitää olla itsenäinen tiedosto. Huom! Jos SVG-kuvaan on linkitetty ulkoinen CSS-tiedosto niin img-elementtiä ei voida käyttää vaan on käytettävä object-elementtiä.
<p><img src="kuva.svg" alt="SVG-esimerkkikuva" /></p>
<object type="image/svg+xml" data="testikuva.svg"></object>
tiedosto kuva.svg
<?xml-stylesheet type="text/css" href="kuva.css"?>
<svg version="1.1"
baseProfile="full"
width="150" height="150" viewBox="0 0 300 300"
xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="Gradient1">
<stop class="stop1" offset="0%"/>
<stop class="stop2" offset="100%"/>
</radialGradient>
<linearGradient id="Gradient2">
<stop class="stop3" offset="0%"/>
<stop class="stop4" offset="100%"/>
</linearGradient>
</defs>
<circle cx="150" cy="150" r="150" fill="url(#Gradient1)" />
<text class="text" x="150" y="170" font-size="60" text-anchor="middle" fill="url(#Gradient2)">TIEA2120</text>
</svg>
- SVG-koodin ollessa omassa tiedostossaan pitää mahdollisesti tarvittava CSS-tiedosto
linkittää tiedoston alussa seuraavasti:
<?xml-stylesheet type="text/css" href="kuva.css"?>
SVG-kuvien sisältöä voidaan animoida CSS-animaatioilla aivan samaan tapaan kuin HTML5-dokumentteja.
SVG ja DOM
SVG on siis puhdasta XML:ää. Voit javascriptilla luoda omia SVG-kuvia seuraavaan tapaan. Kokeile HTML-sivullasi seuraavaa ja vertaa tätä valmiiseen svg-kuvatiedostoon:
SVG-kuvan ulkoasuun voi vaikuttaa myös suoraan CSS:n avulla silloin, kun kuva on suoraan HTML-dokumentin sisällä tai luodaan dynaamisesti javascriptilla. Huomaathan, ett svg-elementeillä on erilaiset css-ominaisuudet kuin html5-elementeillä.
text {
fill: yellow;
font-size: 2em;
}
circle {
fill: blue;
}
Kts. SVG and CSS
viewbox-attribuutti Viewbox määrittää SVG-objektin varsinaisen piirtoalueen. Tämä zoomataan varsinaiseen esityskokoon sen mukaan mitkä ovat svg-elementin width- ja height-attribuutit. Jos width ja height ovat samat kuin viewboxin leveys ja korkeus niin nämä menevät yksi yhteen mutta muissa tapauksissa kuvaa pienennetään tai suurennetaan.
svg.setAttribute("viewBox", "0 0 150 100");
Kts. Positions.
SVG:stä löytyy suoraan tärkeimmät piirtohahmot. Kts. Basic Shapes.
- path toimii vähän samaan tapaan kuin canvakselle piirtäessä. Ensin pitää siirtyä (Move To) kohtaan josta halutaan aloittaa esim. koordinaatteihin 10,10 mentäisiin
merkinnällä M10 10. Seuraavaksi tarvitaan Line To -komentoa esim. L20 20 piirtäisi viivan
alkupisteestä pisteeseen 20,20.
<path d="M10 10 L20 20" fill="black" stroke="black" />
- Kts. Fills and Strokes
- Kts. Gradients.
Väriliuku (gradient) voidaan määritellä defs-lohkossa.
Huomaa, että gradientille on annettava uniikki id, jotta sitä voidaan käyttää.
<defs> <linearGradient id="Gradient1"> <stop class="stop1" offset="0%"/> <stop class="stop2" offset="50%"/> <stop class="stop3" offset="100%"/> </linearGradient> </defs>
Väriliukua käytetään elementin fill-ominaisuudessa fill="url(#Gradient1)"
Väriliuku tarvitsee myös css-tyylejä:
.stop1 { stop-color: black; } .stop2 { stop-color: green; } .stop3 { stop-color: black; }
- Kts. Texts.
Polussa oleva C tarkoittaa Bezier Curvea.<path id="my_path" d="M 20,20 C 40,40 80,40 100,20" fill="transparent" /> <text> <textPath xlink:href="#my_path">This text follows a curve.</textPath> </text>
- Transformoinnit toimivat SVG:ssä samaan tapaan kuin canvaksen yhteydessä. Kts. Basic Transformations
SVG ja SMIL
SVG-objekteja voi animoida CSS:n lisäksi Synchronized Multimedia Integration Language (SMIL)-kielen avulla. SMIL-animoinnin tulevaisuus on kuitenkin hieman hämärä eikä ole varmuutta jatkuuko sen selaintuki kovin hyvänä. Käytä etupäässä CSS-animointia.
- SVG-objektien animointi on hyvin yksinkertaista SMILin avulla. Lisää esimerksi circle-elementin sisään animate-elementti:
Kokeile<circle cx="150" cy="100" r="80" fill="green"> <animate attributeName="cx" from="0" to="200" dur="5s" repeatCount="indefinite" /> </circle>
- Jos haluat animoida useampia attribuutteja niin vain lisää uusia animate-elementtejä
- transformaatioitakin voi animoida ja silloin käytetään animateTransform-elementtiä:
<polygon points="60,30 90,90 30,90"> <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 60 70" to="360 60 70" dur="10s" repeatCount="indefinite"/> </polygon>
- Koska kyseessä ovat taas kerran xml-elementit niin näitä voidaan helposti luoda tai muutella myös javascriptilla
- animateMotion-elementillä voidaan animoida
elementin sijaintia polun avulla. Kokeile seuraavia:
<animateMotion path="M 0 0 H 300 Z" dur="3s" repeatCount="indefinite" /> <animateMotion path="M 250,80 H 50 Q 30,80 30,50 Q 30,20 50,20 H 250 Q 280,20,280,50 Q 280,80,250,80Z" dur="3s" repeatCount="indefinite" rotate="auto" />
Käyttäjien kommentit