26 oktober 2010

Door: Jan Ooms

Tijdens een zoektocht naar een oplossing voor een Flashprobleem stuitten we bij toeval op RaphaelJS. RaphaelJS is een compact JavaScript framework om om te gaan met vector-graphics op het web.

Klanten weten tegenwoordig steeds meer en willen ook steeds meer. Het komt geregeld voor dat klanten, overigens vaak terecht, vragen of hun website ook op een iPad of iPhone werkt? Sommige opdrachtgevers willen zelfs al dat hun website wordt gemaakt in HTML5.

Die vragen c.q. eisen brengen ons soms in een lastig parket, want voor animaties gebruiken we immers vaak Flash en dat werkt nou juist niet op een iPad of iPhone. En van HTML5 zijn sommige specificaties nog niet officieel en wordt het ook niet goed ondersteund door de wat oudere browsers. RaphaelJS zou misschien wel eens voor een (tijdelijke) oplossing kunnen zorgen, zolang de HTML5-standaard nog niet overal goed wordt ondersteund.

Wat is RaphaelJS?

RaphaelJS is een compact JavaScript framework wat het makkelijk maakt om met vectoren te werken. Het probleem wat er nu is met vectoren, is dat er eigenlijk 2 standaarden zijn, te weten SVG (Scalable Vector Graphics) en VML (Vector Markup Language). VML wordt ondersteund door Internet Explorer en SVG wordt ondersteund door Firefox, Chrome en vele anderen. RaphaelJS ondervangt dit probleem door vector-graphics te definieren in RaphaelJS, RaphaelJS zal dan zelf bekijken welke browsers de bezoeker heeft en het resultaat presenteren als SVG of VML (al naar gelang welke standaard de browser ondersteund). Daarnaast kunnen met RaphaelJS ook animaties aan vector-objecten gekoppeld worden.

Kijk op de website van RaphaelJS voor een paar leuke voorbeelden: http://raphaeljs.com/

De testcase

Om te kijken of RaphaelJS voor ons ook een toegevoegde waarde heeft, hebben we ons logo geexporteerd naar een SVG-bestand en dat omgezet naar RaphaelJS code. Hoewel je in RaphaelJS wel SVG-paden kan importeren, valt het niet altijd mee om alle SVG-eigenschappen van een object te kopieeren naar RaphaelJS. Zo zijn gradients in RaphaelJS net iets anders als het SVG-bestand dat wij uit Illustrator geexporteerd kregen en hebben objecten in RaphaelJS standaard een lijn, terwijl die niet expliciet staan beschreven in de SVG.

Bekijk hier de testcase: http://www.softmedia.nl/demo/raphaeljs/index.php (Originele SVG-afbeelding)

Conclusie

Hoewel RaphaelJS een hoop obstakels voor wat betreft vector-graphics uit de weg ruimt, is het product voor ons nog niet echt perfect bruikbaar. RaphaelJS heeft daar zelf deels debet aan, maar ook Internet Explorer zorgt voor problemen. In Internet Explorer is RaphaelJS namelijk enorm traag, en ons vermoeden is dat dit niet ligt aan RaphaelJS, maar aan de implementatie van VML in Internet Explorer. In Internet Explorer 9 zit ondersteuning voor SVG, dus daarin zou het goed moeten werken, alleen die ondersteuning maakt RaphaelJS overbodig.

Een ander probleem dat er is binnen RaphaelJS is dat je elementen wel in een zogenaamde "set" kunt groeperen, maar je kunt zo'n "set" niet in zijn geheel bijvoorbeeld roteren. Als je namelijk een rotatie doet op die "set", dan worden alle elementen in die "set" los van elkaar gedraaid. Je kunt het resultaat daarvan zien in onze testcase, door op "Logo 360 graden draaien" te klikken.

Uiteindelijk is RaphaelJS een leuk product om mee te expirimenteren en kun je er leuke dingen mee maken. Als tijdelijke Flash-vervanger (in combinatie met JavaScript) voor op de iPad of iPhone is het echter nog niet volwassen genoeg. Daarom hebben we voorlopig besloten er nog niks mee te doen.