SVG in code: strakke vormen en animaties

Met SVG kun je met eenvoudige code visuals te maken, die er aantrekkelijk en strak uitzien. Onafhankelijk van het platform of scherm dat je gebruikt! Maar SVG gaat verder dan alleen vormen op het scherm toveren; je kunt deze ook eenvoudig laten bewegen. Met behulp van animatie-attributen ingebouwd in de SVG-specificatie, of door enkele Javascript-bibliotheken die dit ondersteunen. Met dit artikel neem ik je mee de diepte in, dus enige kennis van SVG is gewenst! Lees mijn eerdere artikel eerst.

De vele mogelijkheden in code

Met SVG kun je eenvoudig stijlvolle, eenvoudige afbeeldingen maken. Met behulp van relatief weinig code heb je snel een aantal vormen, dat uiteindelijk zo complex kan worden als je zelf wilt. Geen pixels, maar vectoren, waardoor je computer of mobiele telefoon er sneller mee overweg kan, want de laadtijden gaan drastisch naar beneden als je het vergelijkt met een pixelafbeelding.

Het SVG-formaat ondersteunt verschillende type objecten, zoals:

• Eenvoudige vormen: een circle (<circle>), rechthoek(<rect>), ellips (<ellipse>) of polygoon (<polygon>) kan worden gedefinieerd in grootte, kleur en positie.
• Lijnen (lines): een enkele lijn van punt A naar B, waarbij de dikte, positie en kleur kan worden bepaald.
• Paden (paths): eenvoudige of complexe vorm, getekend met rechte of gebogen lijnen, die al dan niet met een kleur wordt gevuld. SVG definieert met absolute coördinaten en een vaste set letters (zoals M ‘move to’ en L ‘line to’) waar de vorm zich bevindt.
• Tekst: door het lettertype, de lettergrootte, kleur en positie van een stuk tekst te bepalen, kun je deze eenvoudig implementeren in je SVG.

Veel mogelijkheden middels het manipuleren van de objecten, zoals gradiënten, maskers en patronen.

Alle objecten kunnen op een bepaalde manier worden gemanipuleerd, met een achtergrond- en lijnkleur, maar ook gradiënten, patronen en zelfs maskers zijn mogelijk. Dit maakt het mogelijk zeer complexe en visueel aantrekkelijke elementen te maken. Er zijn ook filters beschikbaar, zoals blur (vervagen), drop shadows (schaduwen) en meer.

Een standaard SVG-bestand kan bestaan uit de volgende code, wat we ook zagen in het vorige artikel:

<svg width="200" height="200" viewBox="0 0 200 200" id="testSVG"> <line x1="0" y1="0" x2="100" y2="200" /></line> </svg>

Een eenvoudig, leesbaar stukje tekst. De taal lijkt zoals gezegd erg op XML en kan direct in de HTML-code van een website gebruikt worden, mits je browser het ondersteunt. In het bovenstaande voorbeeld die je een lijn die wordt getekend vanaf x1-coördinaat 0 en y1-coördinaat 0 (linksbovenin). De lijn loopt naar positie 100 op de X-as en positie 200 op de Y-as.

Er is nog niets op het scherm te zien als je bovenstaande code uitprobeert. Dat komt omdat de lijn nog geen stijl-attribuut heeft. In onderstaand voorbeeld heeft de lijn een donkergrijze kleur en een breedte van twee pixels gekregen met CSS. Meer daarover vind je hier.

#testSVG { stroke: #333; stroke-width: 2px; }

Daarnaast zie je het viewBox-attribuut gedefinieerd. Daarmee wordt het zichtbare deel van de SVG vastgesteld. De vier getallen stellen respectievelijk de x, y, breedte en hoogte van de viewBox voor. Wanneer je een element in een SVG tekent dat groter is dan de SVG zelf, kun je met viewBox het zichtbare gedeelte bepalen en zo ‘inzoomen’ om het hele element zichtbaar te krijgen. De viewBox is een erg complex onderdeel van de SVG-specificatie. Meer over de viewBox lees je hier.

Een eenvoudige cirkel in SVG teken je met:

<svg> <circle cx="50" cy="50" r="30" /> </svg>

Met de cx- en cy-attributen definieer je de positie van het midden van de cirkel ten opzichte van het grid. Als je die weglaat, worden deze ingesteld op 0, wat ervoor zorgt dat de cirkel slechts half zichtbaar is op de pagina. Met r definieer je de grootte van de cirkel, in dit geval 30 ‘units’ ten opzichte van de viewbox (de grootte van de SVG).

Een rechthoek gaat op dezelfde wijze:

<svg> <rect width="200" height="100" /></rect> </svg>

Een circle en rectangle (en onder andere ook een polygon en ellipse) kunnen ook een vulkleur krijgen door het attribuut fill='red' mee te geven of deze natuurlijk in CSS te definiëren als fill: red. Je zult zien dat de rechthoek zónder stijldefinitie zwart wordt.

Iconen kunnen met SVG strak worden weergegeven, op alle devices. En gemanipuleerd en geanimeerd met code.

Complexe vormen

Met paden kun je in SVG echt alle kanten op. Dit is hoe iconen worden gecreëerd wanneer je deze exporteert vanuit een vectorprogramma. Als je een wiskundig rekenwonder bent, dan kun je ook zelf tekeningen maken door een reeks aan getallen en letters samen te stellen! Een <path>-element heeft altijd een d-attribuut (een drawing command). Daarmee wordt in een stukje complexe code de vorm van het pad ingesteld.

<svg width="200" height="200"> <path d="M50,50 A30,50 0 0,1 100,100" style="stroke:#660000; fill:none;"/> </svg>

In het d-attribuut hierboven zie je een M en A staan, samen met enkele absolute coördinaten. Dit zijn de mogelijke commando’s:

• M: moveto
• L: lineto
• H: horizontal lineto
• V: vertical lineto
• C: curveto
• S: smooth curveto
• Q: quadratic Bezier curve
• T: smooth quadratic Bezier curveto
• A: elliptical Arc
• Z: closepath

De code lijkt heel complex, maar is goed te begrijpen als je eenmaal doorhebt hoe het is opgebouwd. Het voorbeeld tekent een boog van startpunt 50,50 tot 100,100 (aan het eind van het drawing command). De radius van de boog wordt door de eerste twee parameters van het A-commando bepaald. De eerste is rx (radius naar de x-kant) en de tweede is ry (radius naar de y-kant). Als je rx en ry op dezelfde waarde zet, zul je een circulaire boog zien. De derde parameter (0) na de a is de x-axis-rotation. Deze zet de rotatie van de x-as van de boog vergeleken met de normale x-as. Meestal is deze parameter 0, dus die kun je gerust negeren. De vierde en vijfde parameter (0,1) heten de large-arc-flag en sweep-flag parameters. De eerste bepaalt of de smalle of grote boog getekend moet worden richting het startpunt, eindpunt en rx en ry. Meer over het instellen van het d-attribuut en de mogelijkheden van <path> zie je op deze pagina.

Inline animaties

Maak het jezelf makkelijk door de stijlattributen van een SVG te manipuleren met o.a. SVGSnap, GSAP of CSS3-animaties.

Het is mogelijk om met Javascript-bibliotheken zoals Processing.js, SVGSnap en GSAP de stijlattributen van een SVG te manipuleren tot complexe en visueel aantrekkelijke animaties. Daarmee wordt er veel werk uit handen genomen, want je hoeft je minder druk te maken over complexe paden en de positionering van je elementen. Animeren met CSS3-animaties is ook mogelijk en het is afhankelijk van je voorkeur welke manier van werken je kiest. Maar er is nog een mogelijkheid, namelijk animeren in SVG zelf. Het W3C heeft voorzien dat beweging een interessant onderdeel kan zijn in een SVG-element, dus heeft tags en attributen toegevoegd aan de specificatie die ook animaties omzetten in leesbare code.

Een eenvoudig voorbeeld is hieronder te zien (vernieuw de pagina om de animatie te zien):

<svg width="200" height="200"> <rect x="10" y="20" width="50" height="50"> <animate attributeName="fill" from="#333" to="#adc353" dur="2s" /> </rect> </svg>

De code spreekt eigenlijk voor zich. Het fill-attribuut wordt door de <animate>-tag aangesproken en gemanipuleerd. Gedurende twee seconden verandert de kleur van grijs naar Ambrero-groen. Je ziet dat de tag zich binnen het -element bevindt.

Op dezelfde manier kunnen we een element laten draaien:

<svg width="200" height="200"> <rect x="0" y="0" height="100" width="100" style="fill:#adc353"> <animateTransform attributeName="transform" begin="0s" dur="10s" type="rotate" from="0 50 50" to="360 50 50" repeatCount="indefinite" /> </rect> </svg>

De attributeName komt wederom overeen met die in CSS: daarmee zou je hetzelfde kunnen bereiken door transform(rotate(360deg)) te schrijven. Zoals hier te zien wordt de animatie oneindig herhaald. De from- en to-attributen zijn niet voor niets gekozen. De waarde 50 ligt precies in het midden van het vierkant, zodat deze om zijn as draait.

Tot slot is het ook mogelijk om een element langs een pad te laten bewegen. Bekijk de volgende code:

<svg width="200" height="100"> <rect x="0" y="0" width="30" height="30" style="fill: #adc353;"> <animateMotion path="M10,50 q60,50 100,0 q60,-50 100,0" begin="0s" dur="5s" repeatCount="indefinite" /> </rect> </svg>

Dit groene blokje beweegt langs een curve zoals gedefinieerd in het d-attribuut. Het <animateTransform>-element is noodzakelijk om het parent-element te laten bewegen langs een pad. Het is zelfs mogelijk om een animatie te laten starten wanneer een andere animatie – in dezelfde SVG – is gestopt. Daarmee wordt het <animate>-element pas echt nuttig, want dit is in CSS niet eenvoudig te bereiken. Zo kun je animaties aaneenrijgen en daardoor bijvoorbeeld eerst een knop en daarna de tekst en een icoontje laten verschijnen. Door <animate> of <animateTransform> het attribuut begin="svgID.end" mee te geven, start de animatie pas als de animatie met het ID ‘svgID’ is gestopt. Andersom is met end="svgID.end" te bereiken dat de animatie eindigt als de animatie met het ID ‘svgID’ eindigt, of wanneer de duur (in het attribuut dur) is geëindigd – degene die als eerste plaatsvindt.

Overigens hoef je dit in Internet Explorer en Safari niet te proberen. Deze browsers ondersteunen wel SVG, maar geen animaties. Daarvoor kun je beter een Javascript-bibliotheek gebruiken. In een volgend artikel lees je daar meer over!