SVG: Animatie en interactie

We willen web dat voelt als een app. Een manier om dit te bereiken is met SVG. Het grappige is dat SVG (in webtermen) al best oud is (2001) en goed wordt ondersteund door de verschillende browsers. Met de komst van CSS3 en de opleving van het gebruik van javascript door o.a. jQuery is SVG herontdekt.
SVG is een XML notatie van figuren die bestaan uit vectoren. Het voordeel daarvan is dat het schaalbaar is zonder kwaliteitsverlies. Nu was dat voor desktop meestal niet interessant en werd volstaan met foto-achtige statische (pixel) plaatjes. Maar nu hebben we devices in gebruik. En dan is schaalbaarheid en adaptief ontwerp heel belangrijk.

Naast de schaalbaarheid is de aanpasbaarheid van SVG ook groot. Het is immers een tekstuele notatie (XML) van coördinaten en deze kunnen beïnvloed, gerepliceerd of zelfs gegenereerd worden. Dat klinkt heel eenvoudig, maar dat wordt lastiger naarmate de figuren ingewikkelder worden. Hieronder een voorbeeld van een eenvoudig vierkant en een meer bewerkelijk figuur.

<rect width="50" height="50" x="0" y="0" style="fill:#2a4a96;" />
<path d="M226.523,151.451L141.136,3.581C139.837,1.356,137.468,0,134.896,0s-4.911,1.356-6.212,3.581 l-85.359,147.87c-1.241,2.253-1.241,4.997,0,7.192c1.33,2.225,3.698,3.61,6.27,3.61h170.719c2.569,0,4.968-1.386,6.209-3.61 C227.854,156.448,227.854,153.675,226.523,151.451z M132.614,23.051v81.373c-1.963,1.098-56.127,32.382-70.483,40.672 L132.614,23.051z M64.442,149.14l70.454-40.701l70.512,40.701H64.442z M137.295,104.424V23.051l70.454,122.045L137.295,104.424z" />

Er zijn een aantal manieren waarop deze SVG figuren gecreeërd kunnen worden:

  • In een tekstverwerkings applicatie
  • Met een applicatie als Adobe Illustrator of EditSVG
  • Door gebruik te maken van een javascript library ( bijvoorbeeld Snap SVG: var bigCircle = s.circle(150, 150, 100); )

Wat betreft transities en transformaties heb je de keus om CSS3 te gebruiken en/of een javascript library. Het hangt een beetje van de situatie af welke optie beter past. Als je goede ondersteuning in Internet Explorer wilt, kun je op dit moment nog het beste voor de javascript optie kiezen. Bekijk onderstaand voorbeeld van css transformaties in verschillende browsers. Er waren al mogelijkheden om SVG elementen te animeren in de vorm van SMIL (Synchronized Multimedia Integration Language) inline met de SVG XML <animate /> maar dat wordt niet goed cross browser ondersteund en wordt waarschijnlijk ook uitgefaseerd.


<style type="text/css">
    .square1 {transition: fill .4s ease;  fill: #2a4a96; }
    .square1:hover  { fill: #00b3fe; } 
    .square2{-ms-transform: rotate(10deg); -webkit-transform: rotate(10deg);  transform: rotate(7deg);}                  
</style>
<svg>
    <rect width="50" height="50" x="0" y="0" class="square1" />
    <rect width="50" height="50" x="55" y="0" class="square2" />  
</svg>

We zijn inmiddels gewend aan de aanwezigheid van legio javascript libraries. En er zijn inmiddels ook een aantal op SVG gericht, met het doel om het dynamisch maken te vergemakkelijken. Deze zijn meestal gratis in de meest beperkte vorm, maar zelfs dan bieden ze al veel mogelijkheden. Voor het voorbeeld rechtsboven is GreenSock gebruikt.

Na Flash en Silverlight, wordt SVG een blijvertje? Eigenlijk is dat het al. Het vormt puur de basis voor visuele weergave net zoals html de basis is voor het tonen van webelementen. Het zijn de nieuwe ontwikkelingen eromheen die het steeds interessanter maken. Er zijn geen andere componenten of plugins voor nodig die je moet installeren zoals dat voor Flash en Silverlight wel geldt. Omdat het tekst is, is het weinig data om te downloaden wat de performance ten goede komt.

Waarom SVG in webapplicaties gebruiken? Er opent zich een schatkist aan mogelijkheden wanneer je het combineert met css en javascript. Alleen voor visuele ondersteuning of zelfs voor datamanipulatie. Je kunt heel duidelijk een scheiding aanleggen tussen vorm (SVG), stijl (css) en functionaliteit (javascript). Meng het met een framework als Angular of Knockout en je hebt web dat voelt als app!

Bekijk voor inspiratie de voorbeelden van Snap SVG.