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:

SVG-esimerkkejä

SVG-kuva voidaan sisällyttää suoraan HTML5-dokumenttiin kirjoittamalla SVG-koodi suoraan:

Esimerkki

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>

SVG-esimerkkikuva

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-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.

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.

Lue SVG animation with SMIL

Lisätietoa

Käyttäjien kommentit

Kommentoi Lisää kommentti
Kurssimateriaalien käyttäminen kaupallisiin tarkoituksiin tai opetusmateriaalina ilman lupaa on ehdottomasti kielletty!
https://appro.mit.jyu.fi/tiea2120/luennot/svg/
© Tommi Lahtonen (tommi.j.lahtonen@jyu.fi) <https://hazor.iki.fi/>
2020-10-19 18:08:49
Informaatioteknologia - Jyväskylän yliopiston informaatioteknologian tiedekunta