» direct naar zoek en menu

Tijdschrift voor webwerkers » Artikel #127

Inline Scalable Vector Graphics - Een doorbraak voor SVG?

In 2001 publiceerde het W3C de eerste versie van de SVG-standaard. Tot een echte doorbraak van deze standaard is het echter nooit gekomen. Wellicht gaat dit nu veranderen door de ondersteuning van “Inline SVG” in de nieuwste versies van Firefox en Opera.

Ondanks het feit dat Scalable Vector Graphics nog niet veel gebruikt wordt in websites heeft toch al zo’n 9.3% van de mensen op internet de SVG-plugin geïnstalleerd. Met de komst van Inline SVG hoeven bezoekers geen aparte plugin meer binnen te halen, omdat dit nu is geïntegreerd in de browser.

SVG? Wat zeg je??

SVG is een XML-opmaaktaal die gebruikt wordt om tweedimensionale vectorafbeeldingen te beschrijven. Dit soort afbeeldingen maakt gebruik van geometrische primitieven zoals punten, lijnen, curven en polygonen. Dit in tegenstelling tot rasterafbeeldingen die opgebouwd zijn uit pixels (JPEG, GIF en PNG zijn voorbeelden van rasterafbeeldingen).

Vectorafbeeldingen zijn ook schaalbaar, dat wil zeggen dat de kwaliteit niet verloren gaat als de afbeelding vergroot wordt. Dit is bij rasterafbeeldingen wél het geval.

Naast het beschrijven van statische objecten biedt SVG ook de mogelijkheid tot interactie en animatie.

Koppeling met een HTML-document: de huidige manier

Je definieert eerst een SVG-afbeelding in een apart .svg-bestand. Dit bestand hang je vervolgens in een HTML-pagina door middel van <object> en <embed> tags: 

<object data="cirkel.svg" type="image/svg+xml" width="300" height="200">
  <embed src="cirkel.svg" type="image/svg+xml" width="300" height="200" />

</object>

In Internet Explorer kan door middel van een creatieve oplossing ook Inline SVG in een document geplaatst worden. Het gaat om de zogenaamde “ASV (Adobe SVG Viewer) hack”. Als eerste moet je aan de browser vertellen dat hij de Adobe SVG viewer moet gebruiken om SVG-tags te renderen. Dit kun je doen door het volgende in de <head> te plaatsen: 

<object id="AdobeSVG" classid="clsid:78156a80-c6a1-4bbf-8e6a-3cd390eeb4e2"></object>
<?import namespace="svg" implementation="#AdobeSVG"?>

Vervolgens zet je de SVG definitie als volgt in de <body>: 

<svg:svg width="300" height="200">
  <svg:circle cx="150" cy="100" r="50" />
</svg:svg>

Het nadeel van deze methode is dat het alleen werkt in Internet Explorer en dat het niet conform W3C-standaarden is.

Koppeling met een XHTML-document: de nieuwe manier

Firefox 1.5 en Opera 9 bieden nu dus geïntegreerde ondersteuning voor Inline SVG. Beide browsers volgen hierbij de W3C-standaarden. De SVG-tags kunnen rechtstreeks in de <body> gezet worden met de toevoeging van een namespace-declaratie: 

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="200">
  <circle cx="150" cy="100" r="50" />
</svg>

Het voordeel hiervan is dat je de SVG-afbeelding nu kunt koppelen aan de stylesheet die ook voor het XHTML-document gebruikt wordt. Dit kan op de standaard manier; door het toevoegen van het class attribuut aan het desbetreffende element: 

<circle class="cirkel" cx="150" cy="100" r="50" />

De corresponderende CSS-declaratie kan tussen die van het XHTML-document gezet worden: 

body {
 background-color: #efefef;
}
.cirkel {
 fill: #990000;
 stroke: #999900;
 stroke-width: 5;
}

Deze SVG-specifieke properties zijn gedefinieerd in de SVG standaard.

Omdat de SVG afbeelding nu deel uit maakt van het DOM (Document Object Model) kun je de afbeelding rechtstreeks met JavaScript manipuleren. In onderstaand voorbeeld verander ik de grootte van de bestaande cirkel en voegt een ellips aan de afbeelding toe. Als eerste heb ik een id-attribuut toegevoegd aan het svg-element en aan het circle-element: 

<svg id="afbeelding" ...
<circle id="cirkel" ...
Vervolgens spreken we deze elementen aan met JavaScript:
/**
 * Verander de grootte van de bestaande cirkel
 */
var cirkel = document.getElementById("cirkel");
cirkel.setAttribute("r", 100);

/**
 * Voeg een ellips toe aan de afbeelding
 */
var afbeelding = document.getElementById("afbeelding");
var ellips = document.createElementNS("http://www.w3.org/2000/svg", "ellipse");
ellips.setAttributeNS(null, "cx", "150");
ellips.setAttributeNS(null, "cy", "300");
ellips.setAttributeNS(null, "rx", "60");
ellips.setAttributeNS(null, "ry", "120");

Hier maak ik gebruik van createElementNS en setAttributeNS (in plaats van createElement en setAttribute) omdat het nieuwe element in de SVG-namespace aangemaakt moet worden.

Een cross-browser oplossing

Een oplossing die in Firefox, Opera én Internet Explorer werkt is mogelijk. Hiervoor moeten we wel wat obstakels overwinnen.

Inline SVG wordt in Firefox en Opera geïnterpreteerd door een XML-parser en niet door een HTML-parser. Dit betekent dat de bestanden een .xml of de .xhtml extensie moeten hebben. Dit in tegenstelling tot Internet Explorer waarbij juist de .html extensie vereist is omdat deze browser geen XML interpreteert. De manier om dit probleem op te lossen is het herschrijven van de http-headers. De bestanden krijgen dan de extensie .xhtml en moeten dan het contenttype text/html meekrijgen in de header. In de Apache webserver moet je het .htaccess bestand aanpassen. Voeg de volgende code aan dit bestand toe: 

AddType text/html .xhtml
RewriteEngine on
RewriteBase /
RewriteCond %{HTTP_ACCEPT} application/xhtml\+xml
RewriteCond %{HTTP_ACCEPT} !application/xhtml\+xml\s*;\s*q=0
RewriteCond %{REQUEST_URI} \.xhtml$
RewriteCond %{THE_REQUEST} HTTP/1\.1
RewriteRule .* - [T=application/xhtml+xml]

Dit voorbeeld stuurt statische pagina’s met .xhtml extensie naar browsers als application/xhtml+xml, behalve als de browser dit niet expliciet aanvaardt (zoals Internet Explorer).

Als het om serverpagina’s gaat kun je hetzelfde bereiken door het contenttype mee te geven in de pagina zelf. In een PHP-pagina doe je dit door de volgende regel code bovenin de pagina te zetten: 

header("Content-Type: application/xhtml+xml");

Vervolgens pas je het xhtml document met de inline SVG aan. De <html>-openingstag moet er als volgt uitzien: 

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:svg="http://www.w3.org/2000/svg"
      xml:lang="en">
Zet vervolgens de ASV-hack in de header: 
<object id="AdobeSVG" classid="clsid:78156a80-c6a1-4bbf-8e6a-3cd390eeb4e2"></object>
<?import namespace="svg" implementation="#AdobeSVG"?>
De Inline SVG-tags moeten nu wel altijd de SVG namespace prefix gebruiken: 
<svg:svg width="300" height="200">
  <svg:circle cx="150" cy="100" r="50" style="fill: red;" />
</svg:svg>

Het gebruik van namespaces brengt wel een beperking met zich mee. Om elementen te creëren binnen een namespace moet je de functie createElementNS() gebruiken. Deze functie wordt echter niet ondersteund door Internet Explorer.

Ondersteuning

De SVG-specificatie kent drie profielen: Tiny, Basic en Full. De Tiny en Basic profielen zijn afgeslankte versies, bedoeld voor mobiele apparaten, respectievelijk mobiele telefoons en PDA’s. Opera biedt vanaf versie 8 ondersteuning voor het Tiny profiel en versie 9 is uitgebreid met het Basic profiel. Firefox ondersteunt daarentegen géén van de standaardprofielen, maar heeft een eigen afgeslankte versie.

Naast Opera en Firefox timmeren ook andere browsers aan de weg. De Linux-browser Konqueror biedt sinds kort ondersteuning voor een groot deel van het Full profiel. Apple’s Safari browser, evenals Konqueror gebaseerd op de KHTML rendering engine, werkt ook hard aan ondersteuning. Met betrekking tot Internet Explorer valt er weinig over te zeggen. Microsoft heeft bij het ontwikkelen van IE7 vooral prioriteit gegeven aan het veiliger maken van de browser en aan CSS 2 ondersteuning. Wat SVG ondersteuning betreft hebben ze nog niets gemeld op het IEBlog.

Behalve door browsers wordt SVG tegenwoordig steeds vaker ondersteund door mobiele telefoons. Volgens Nokia doen ze dit om externe partijen in staat te stellen toepassingen te ontwikkelen die zich op een intuïtieve manier kunnen aanpassen aan verschillende resoluties. Met SVG kunnen ook makkelijker thema’s ontwikkeld worden die compact en dus sneller te downloaden zijn. Sony Ericsson heeft bijvoorbeeld een SVG theme creator ontwikkeld waarmee een mobiele telefoon volledig gepersonaliseerd kan worden. Dit zou een interessante nieuwe ontwikkeling kunnen zijn om in de gaten te houden!

SVG als vervanger voor Flash?

Het aantrekkelijke van SVG is dat het een open standaard is en dat het door iedereen gebruikt kan worden. Je hoeft bovendien geen duur softwarepakket aan te schaffen om illustraties te maken. Een programma als Inkscape is bijvoorbeeld gratis te downloaden.

Het grote nadeel van SVG is echter de snelheid. Het resultaat van het gebruik van transformaties op meerdere objecten laat nog te wensen over. De gecompileerde Flash bestanden hebben wat dat betreft een grote voorsprong.

Ook het gebruik van de plugin verschilt enorm. Zo’n 97% van de mensen op internet heeft de Flash plugin geïnstalleerd terwijl de SVG-plugin een penetratie heeft van ongeveer 9%.

Een aantal voorbeelden

Hier volgen drie simpele voorbeelden die illustreren op welke wijze SVG een webpagina kan verrijken. Alle voorbeelden kun je het beste in Opera 9 bekijken, aangezien deze browser (op dit moment) de beste ondersteuning biedt. Firefox biedt geen ondersteuning voor animatie waardoor het eerste voorbeeld statisch wordt. Internet Explorer ondersteunt zoals eerder vermeld de functie createElementNS() niet, waardoor voorbeeld 1 en 3 niet helemaal voor deze browser werken.

Deze voorbeelden geven maar gedeeltelijk weer wat de mogelijkheden van SVG zijn. Door de geringe ondersteuning kun je helaas nog niet alles uit de kast halen. Maar naarmate de ondersteuning uitgebreid en geoptimaliseerd wordt biedt het vele nieuwe mogelijkheden om een pagina op te maken. Denk bijvoorbeeld aan SVG gradients in plaats van achtergrondafbeeldingen, pagina-elementen met ronde hoeken, interactieve grafieken, etc.

De toekomst

Inline SVG ondersteuning is een grote stap voorwaarts voor het gebruik van SVG. De echte doorbraak zal waarschijnlijk pas komen als Internet Explorer 7 deze standaard ook gaat ondersteunen. Maar het loont wel de moeite om je nu alvast te gaan verdiepen in SVG: de mogelijkheden op mobiele telefoons bieden al grote kansen, en experimenteren met de extra functionaliteiten die SVG je kan bieden bij het opmaken van pagina’s is zeker aan te raden!

Meer over SVG

Specificaties

Downloads

Auteur

Dennis Ippel

werkt als ontwikkelaar bij Evident Interactive in Utrecht. Zijn specialiteit ligt op het gebied van (X)HTML, JavaScript, CSS en het correcte gebruik daarvan. Daarnaast werkt hij vaak met Flash en Flex en houdt zijn bevindingen bij op rozengain.com

Publicatiedatum: 12 juli 2006

Let op

Naar Voren is op 18 juli 2010 gestopt met publiceren. De artikelen staan als een soort archief online. Het kan dus zijn dat de informatie verouderd is en dat er inmiddels veel betere of makkelijkere manieren zijn om je doel te bereiken.

Copyright © 2002-heden » NAAR VOREN en de auteurs