Onlangs is versie 1.2 van de SVG-specificatie uitgebracht. Scalable Vector Graphics is een op XML gebaseerde standaard, die het mogelijk maakt om figuren te beschrijven door het definiëren van vectoren. De figuren zijn interactief en dynamisch te maken. Twee consultants over de voor- en nadelen van SVG en over de kans dat deze de ‘de facto’ standaard wordt voor het aanbieden van interactieve media.
Grafische afbeeldingen zijn op een tweetal manieren te definiëren, door middel van een raster of via vectoren. Door een raster op een afbeelding te projecteren is van ieder punt binnen dit raster de kleur en de helderheid te bepalen. Dit levert een reeks van gegevens op, wat ook wel een bitmap wordt genoemd. Bekende opslagformaten die van deze technologie gebruik maken zijn bmp, gif, jpg, png en tiff.
Vectoren gaan op een geheel andere manier met afbeeldingen om. Door een viertal punten te definiëren en deze punten vervolgens door lijnen met elkaar te verbinden, zijn we in staat om een willekeurige vierhoek te tekenen. Volgens dit mechanisme werken vectoren ook: door coördinaten te definiëren en lijnen te trekken tussen deze punten is een scala van figuren te tekenen. Deze kunnen vervolgens bewerkt worden, bijvoorbeeld door een kleur te geven, de dikte van de lijnen te variëren, via rotaties, transformaties, enzovoort.
Het mag duidelijk zijn dat niet iedere afbeelding zich leent voor een van beide technieken. Foto’s zijn in het algemeen beter vast te leggen middels een raster. Grafieken en plattegronden lenen zich weer bij uitstek om te worden vastgelegd door middel van vectoren.
Beschrijving figuren in XML
SVG is een taal voor het beschrijven van tweedimensionale figuren in XML. SVG biedt ruimte voor vier typen grafische objecten, namelijk: vector-grafische vormen, plaatjes, tekst en animaties. Grafische objecten kunnen worden gegroepeerd, opgemaakt, getransformeerd en hergebruikt.
| Scalable Vector Graphics Op 4 september 2001 heeft het World Wide Web Consortium (W3C, http://www.w3.org) een nieuw protocol geïntroduceerd, genaamd Scalable Vector Graphics (SVG) 1.0,. Deze specificatie definieert een nieuwe wijze waarop figuren op internet getoond kunnen worden. In april van 2002 is deze specificatie een officiële aanbeveling (versie 1.1) geworden. Het W3C heeft hiermee een verklaring afgegeven dat het protocol stabiel is. Gepaard met het vrijkomen van deze specificatie zijn er twee andere specificaties bijgekomen. SVG Tiny richt zich op mobiele telefoons en SVG Basic op onder andere pda’s (personal digital assistants). Deze twee protocollen zijn niet nieuw, maar subsets van de oorspronkelijke specificatie. Sindsdien heeft SVG een exponentiële vlucht genomen. Vooral de ontwikkeling van de twee mobiele SVG-specificaties geeft aan dat SVG kan uitgroeien tot de ‘de facto’ standaard voor het aanbieden van interactieve media. De SVG-specificatie wordt onderhouden door de SVG Working Group, die onderdeel uitmaakt van W3C. De volgende bedrijven zijn lid van deze Working group: Adobe, Canon, Corel Corporation, Eastman Kodak, Ericsson, Hewlett-Packard, IBM, MacroMedia, Microsoft, Nokia, Sun en Xerox. Op 15 november is versie 1.2 van de SVG-specificatie via de website van het W3C uitgebracht. |
SVG kan alleen getoond worden door een applicatie die in staat is om de taal in daadwerkelijke figuren om te zetten. Deze applicatie wordt een ‘viewer’ genoemd. Momenteel zijn er op de markt meerdere viewers verkrijgbaar. De viewer die (gratis) wordt verstrekt door Adobe is de meest populaire en kan als een plugin op de bekend browsers worden geïnstalleerd. Het is belangrijk om te weten dat SVG een wereldwijd geaccepteerde standaard is en hiermee browser-onafhankelijk is.
Architectuur: model/view/controller
Voorheen bestond alleen de behoefte om informatie in een Html-pagina te tonen; door de snelle technische vooruitgang is internet benaderbaar door een breed scala aan apparatuur. Om die apparatuur te kunnen voorzien van informatie, moet anders gedacht worden over documenten. Niet langer zijn documenten te beschouwen als een monolithisch geheel; ze dienen te worden opgedeeld in logische eenheden. Voor deze opdeling kunnen we gebruik maken van het al bestaande architectuurpatroon van model/view/controller (mvc).
In het model bevinden zich de feitelijke gegevens (het XML-document). Deze gegevens kunnen zowel van de server als van de cliënt afkomstig zijn. De view is verantwoordelijk voor de manier waarop de gegevens aan de gebruiker worden getoond. Afhankelijk van het medium dat gebruikt wordt om de informatie te tonen, draagt de view zorg voor de juiste weergave c.q. formaat. De view is tevens verantwoordelijk voor de manier waarop de gebruiker interactief met deze gegevens kan omgaan. Tot slot dient de controller voor de coördinatie van de gegevens. Met behulp van bedrijfsregels kan worden aangegeven welke informatie waar vandaan afkomstig is, en hoe deze gegevens de view dienen te bereiken.
Wat betekent bovenstaande zienswijze nu concreet? Voorheen moesten we voor ieder medium apart de gegevens ophalen en bewerken, met andere woorden: we waren bezig om voor ieder medium een nieuw document te definiëren. Door gebruik te maken van mvc, kan dezelfde bron (het model) voor alle media worden toegepast. De ‘view’ is te zien als het sjabloon dat over de gegevens heen gelegd wordt, waarbij ieder medium een eigen sjabloon heeft. Binnen de sjabloon zorgt Html voor de tekstuele en SVG voor de grafische presentatie. Cascading style sheets (css) zorgen binnen het sjabloon voor een consistente opmaak van de gegevens.
De kracht van SVG schuilt in het feit dat het deel uitmaakt van de XML-familie. Bij de ontwikkeling van XML (eXtended Markup Language) zijn ontkoppeling en uitbreidbaarheid het uitgangspunt geweest. SVG is conform de syntaxis (regelgeving) van XML opgebouwd, alleen de semantiek(de naamgeving van de ’tags’) verschilt. Dit zorgt ervoor dat SVG een aanvulling is op reeds bestaande protocollen. Voor het beschrijven van wiskundige formules is Math ML in het leven geroepen; in combinatie met SVG kan deze beschrijving visueel weergegeven worden.
Andere protocollen die dankbaar gebruik maken van SVG zijn onder andere GML (Geography Markup Language) en Chess ML. GML is een taal die in staat is om geografische informatie te bevatten, door SVG te gebruiken kan deze informatie weer worden omgezet in onder andere plattegronden. Met Chess ML zijn alle zetten van een schaakspel vast te leggen. SVG kan hier weer gebruikt worden om het schaakbord en de stukken te visualiseren. Via scripting is het vervolgens mogelijk om de verschillende zetten op het bord na te spelen, een voorbeeld hiervan is te vinden op de volgende link: http://people.w3.org/maxf/ChessGML.
SVG in de praktijk
Het afgelopen jaar is er een enorme hype rondom webservices gecreëerd. Met webservices zijn allerlei applicaties te ontsluiten via bestaande internettechnologieën. Een mooi concept, maar webservices leveren enkel en alleen data, een visuele interface ontbreekt hierbij. Hier kan SVG zijn nut bewijzen, die kan namelijk de ontbrekende visuele interface verschaffen. Een mooi voorbeeld hiervan is de website http://www.svgwebservice.com. Hierop kunnen we een webservice aanroepen, die als antwoord een interactieve SVG-grafiek retourneert. De aangeleverde data kan bijvoorbeeld informatie bevatten over het aantal gewerkt uren of de omzet die deze maand gedraaid is. Ook zijn aan de hand van dezelfde bron van gegevens meerdere soorten grafieken te genereren, bijvoorbeeld een taartdiagram of een staafdiagram. Het mooie van deze webservice is dat het niet uitmaakt wat voor gegevens worden opgestuurd, de data dient alleen opgesteld te worden conform de eisen die de webservice stelt aan de door haar te ontvangen vraag.
Voor- en nadelen
SVG biedt de gebruiker een aantal voordelen. Allereerst is SVG op XML gebaseerd en daarmee makkelijk te integreren in bestaande internetarchitecturen. Verder is SVG eenvoudig te lezen en dus snel aan te leren door de gemiddelde ontwikkelaar. Ook kunnen we stellen dat SVG-figuren schaalbaar zijn zonder details te verliezen. Dit is mogelijk doordat SVG-figuren op vectoren zijn gebaseerd. De beschikbare viewers kunnen aan de hand van deze vectoren door wiskundige berekeningen bepalen hoe groot een figuur dient te worden wanneer iemand probeert in- of uit te zoomen op een deel van de tekening. Een voorbeeld hiervan is het in- en uitzoomen op een plattegrond.
SVG-afbeeldingen kunnen dynamisch en interactief zijn, hetgeen betekent dat een afbeelding kan reageren op gebruikersinput. Wanneer een gebruiker met zijn cursor over een straat in een plattegrond beweegt, dan licht deze op en verschijnt de straatnaam in het beeld.
Het beschrijven van figuren middels tekst zorgt ervoor dat het bestandsformaat aanzienlijker kleiner is dan het vastleggen van dezelfde figuren middels rastertechnologiën. Het is zelfs mogelijk om deze tekstbestanden te comprimeren (de SVG-bestanden krijgen dan een .svgz extensie), wat ze nog kleiner maakt.
Een laatste voordeel is dat SVG-figuren doorzoekbaar zijn door zoekmachines, omdat ze op tekst gebaseerd zijn.
Een opvallende omissie in de huidige SVG-specificatie is de ondersteuning voor geluid. Interactieve animaties zijn kaal zonder begeleidende muziek. Omdat SVG echter deel uitmaakt van de XML-familie is het eenvoudig uitbreidbaar en hebben diverse leveranciers van SVG-viewers audio-ondersteuning geïmplementeerd.
Natuurlijk is niet alles rozengeur en maneschijn; SVG heeft ook te kampen met een nadeel. Geen enkele browser heeft momenteel een standaard interface om SVG te kunnen interpreteren. De gebruiker moet zelf een plugin downloaden en installeren. Dit zal bij diverse bedrijven de nodige weerstand oproepen. De algemene opinie is echter dat de wereldwijde verspreiding van SVG met een hogere snelheid zal gaan dan Flash. De ondersteuning van dit protocol door gerenommeerde softwarebedrijven zal hiertoe alleen maar bijdragen.
De broncode van SVG is voor iedereen te bekijken, zodat ontwikkelaars van elkaars werk kunnen leren. Er kleeft echter ook een nadeel aan: het is moeilijk om de broncode te beschermen. Dit nadeel valt te ondervangen door een deel van de logica, dat verantwoordelijk is voor de opbouw van het SVG-document op een server te plaatsen. Gebruikers zijn dan immers alleen in staat om het eindresultaat te bezichtigen en hebben geen inzicht in de achterliggende code. Een voorbeeld hiervan is de wijze waarop de grafieken worden gegenereerd op http://www.svgwebservice.com. De logica zit immers ingekapseld in de webservice en alleen de output kan bekeken worden.
Flash
Op dit moment is Flash van Macromedia de grootste speler op de markt van vectortechnologie. Wat is het nut van SVG, als we Flash al hebben? Alhoewel er een groot aantal overeenkomsten tussen beide technologieën is, zijn er ook verschillen.
Allereerst de kosten. Voor het maken van afbeeldingen c.q. animaties in Flash moet je gebruik maken van de ontwikkeltools en serverapplicaties die Macromedia aanbiedt. SVG is daarentegen gratis; het is een open standaard en iedereen mag er kosteloos gebruik van maken. Verder is de leercurve van Flash steiler. SVG is gebaseerd op XML en de meeste ontwikkelaars hebben daar inmiddels ervaring mee. Voor Flash dient men echter te duiken in de complete ontwikkelomgeving van Macromedia en dat kost tijd en geld. Ook wordt Flash in binair formaat over internet getransporteerd, waardoor het voor ontwikkelaars niet mogelijk is om de broncode te bekijken. Tot slot heeft Flash niet de beschikking over allerlei filtereffecten die SVG die wel heeft, zoals het aanbrengen van schaduw, objecten laten vervagen, enzovoort.
Falen of slagen?
SVG is een op XML gebaseerde standaard, die het mogelijk maakt om figuren te beschrijven door het definiëren van vectoren. Met behulp van deze specificatie zijn figuren interactief en dynamisch te maken. Dit geeft meteen het belangrijkste voordeel van SVG weer: aan de hand van gegevens kunnen we afbeeldingen genereren, die vervolgens weer interactie kunnen aangaan met gebruikersinput.
Bedrijven hebben tegenwoordig te maken de verspreiding van dezelfde informatie over verschillende media. Dit heeft er toe geleid dat er vanuit een andere blik gekeken dient te worden naar het document. Hierbij wordt het document opgedeeld in verschillende logische eenheden, namelijk ‘view’, ‘model’ en ‘controller’. Ook hier speelt SVG een belangrijke rol, doordat het een aanvulling is op reeds bestaande protocollen, zoals bijvoorbeeld Html en Mathml. Deze rol wordt met name vervuld in de ‘view’.
SVG is modulair van opzet, waardoor het mogelijk is een subset van SVG te implementeren op systemen met beperkte mogelijkheden, zoals mobiele apparatuur.
Vooral de ontwikkeling van twee mobiele SVG-specificaties (Tiny and Basic) geven aan dat SVG kan uitgroeien tot de ‘de facto’ standaard voor het aanbieden van interactieve media. Om dat te kunnen worden, moet SVG te worden geïmplementeerd op een breed spectrum van apparatuur – van webserver tot mobiele telefoon. De kracht van de implementaties en het beschikbaar stellen van de viewers zal uiteindelijk bepalen op SVG zal falen of slagen.
Bron: http://www.svgopen.org
Sander Duivestein, Pascal van Paridon, managing consultants Cap Germini Ernst and Young
