Afgelopen week werd via de IMS QTI-mailinglijst de vraag gesteld hoe je een SVG-bestand in een QTI-vraag op kunt nemen. Niet meteen afhaken, ik zal eerst kort uitleggen wat het is, waarom je het zou willen kunnen en wat nou eigenlijk het probleem was/is.
Wat is SVG?
SVG, of Scalable Vector Graphics is een set afspraken opgesteld door het World Wide Web consortium. Het beschijft een XML-formaat voor afbeeldingen. In een XML-editor ziet dat er bijvoorbeeld zo uit:
Maar in een programma dat deze afspraken ondersteund, ziet dat er opeens zo uit:
Op zich ziet dit er nog precies zo uit als een gewone afbeelding. Maar als je met de rechtermuisknop op het SVG-bestand klikt zie je dit:
En na heel veel inzoomen kan het er zo uitzien:
Als je dat met een gewoon GIF, JPG of PNG bestand zou doen dan zouden de letters heel kartelig worden. Bij SVG echter niet.
Dat kan omdat (zie hierboven) geen pixels (puntjes) worden vastgelegd, maar informatie over de lijnen, vlakken etc. En dan kun je (net als bij de lettertypes op je laserprinter) onbeperkt inzoomen, de nieuwe afstanden, lijndiktes etc. zijn dan precies te berekenen.
Waarom zou je het willen gebruiken?
Voornamelijk als opslagformaat voor afbeeldingen die je in verschillende formaten en resoluties wilt bewaren. Bijvoorbeeld omdat je ze zowel voor het beeldscherm als voor het afdrukken op papier wilt gebruiken.
Overigens is het niet altijd zinvol. Foto’s als SVG-bestand opslaan heeft meestal geen nut. De programma’s die de conversie van bijvoorbeeld een JPG naar SVG uitvoeren zullen de van nature pixel-georiënteerde afbeelding niet kunnen omzetten naar vectoren en de afbeeling alleen “verpakken” in SVG. Bij het vergroten ervan zul je gewoon dezelfde problemen krijgen als toen het nog een JPG was.
SVG in een (X)HTML-pagina
In tegenstelling tot afbeeldingen, die een eigen element () hebben in (X)HTML, voeg je SVG-bestanden in XHTML in met behulp van het OBJECT element.
Dat ziet er dan zo ongeveer uit:
Kunnen browsers een SVG-bestand weergeven?
Ja, dat kunnen ze, maar dan moet je een SVG-viewer (vergelijkbaar met de PDF-lezer die je nu hebt) installeren. En dat was juist het probleem.
Voor Internet Explorer leek het deze keer allemaal simpel: downloaden van het setupbestand, setup uitvoeren, klaar.
De standaard beveiliging van Windows XP SP2 in combinatie met Internet Explorer zorgt er echter voor dat dit gezien wordt als ActiveScript en ik moest steeds twee keer klikken (eerst op de balk en daarna op de popup) om aan te geven dat ik die content toch echt wil zien.
Adobe zegt daar overigens van:
“Adobe SVG Viewer 3.01 addresses one potential security risk by disabling SVG scripts if you disable ActiveScripting in Internet Explorer. This security risk only affects customers who browse the Web on Windows computers in Internet Explorer with ActiveScripting disabled. By default, ActiveScripting is enabled, so most users are not currently at risk. Because of the way that the HTML OBJECT tag is implemented in Internet Explorer,
Adobe SVG Viewer 3.01 cannot determine the URL of a file embedded with the OBJECT tag. The URL is required to determine the security zone, which is required to determine the state of the ActiveScripting setting. Therefore, to fail safe against this potential security flaw Adobe SVG Viewer 3.01 always disables scripting when it determines that the SVG file is embedded using the OBJECT tag. When authoring in SVG, Adobe recommends that you not use the OBJECT tag and instead use the EMBED tag when embedding SVG in HTML pages.”
Dat klinkt leuk, maar het EMBED-element maakt geen deel uit van XHTML, dus daar leidt gebruik meteen tot niet-valide bestanden.
Bij Firefox was het werkend krijgen nog wat moeilijker. Het installeren van de huidige stabiele versie van de SVG-viewer was niet voldoende, Firefox vroeg meteen of er gezocht moest worden naar de juiste plugin omdat die er nog niet was. Als ik dan aangaf dat dat mocht bleef het zoekproces steken en werden er geen plugins gevonden.
Uiteindelijk kwam ik terecht bij de PluginDoc-website, die informatie hadden over een SVG-viewer voor Firefox. Je wordt daar doorverwezen naar versie 6 van de software, die nog in beta is: http://www.adobe.com/svg/viewer/install/beta.html
Deze versie moet je installeren (niet de standaard/stabiele versie) en dan moet je handmatig de inhoud van de plugin-map van de viewer kopiëren naar de gelijknamige map bij Firefox.
En dan werkt het, maar met véél meer moeite dan ik van Firefox gewend ben.
Het testbestand
Wil jij weten of jij SVG-bestanden kunt bekijken in je browser? Dit is een klein voorbeeld met een een eenvoudige HTML-pagina. Die HTML-pagina toont ofwel een GIF-afbeelding (als er géén SVG-plugin is) ofwel een SVG-afbeelding (als er wél een SVG-plugin actief is).