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-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.
    <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>
    
    Polussa oleva C tarkoittaa Bezier Curvea.
  • 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.

Lue SVG animation with SMIL

  • SVG-objektien animointi on hyvin yksinkertaista SMILin avulla. Lisää esimerksi circle-elementin sisään animate-elementti:
    
      <circle cx="150" cy="100" r="80" fill="green">
        <animate attributeName="cx" from="0" to="200" dur="5s" repeatCount="indefinite" />
      </circle>
    
    Kokeile
  • 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" />
    

Esimerkkejä

Lisätietoa

Käyttäjien kommentit

Kommentoi Lisää kommentti
Informaatioteknologia - Jyväskylän yliopiston informaatioteknologian tiedekunta