SVG-Grafiken mit PHP erzeugen

SVG ist nicht einfach ein weiteres Bildformat, das in Konkurrenz zu den im Web etablierten Formaten wie JPEG oder GIF treten will. Seine Entwickler hatten anderes im Sinn

Der erste grundlegende Unterschied: Es ist vektororientiert. Das bedeutet, dass es keine Punktmatrix beschreibt, sondern geometrische Elemente enthält. Soll also ein SVG-Bild beispielsweise einen Kreis enthalten, ist in der zugehörigen Datei sinngemäß enthalten: "Kreis an Position X,Y mit Radius R". Neben der Kompaktheit dieser Beschreibung ist ein weiterer Vorteil die beliebige Skalierung: So eine Grafik funktioniert auf einem PDA mit Mini-Display und sieht trotzdem auf einem 19-Zoll-LCD noch gestochen scharf aus. Im Gegensatz zu hochgezoomten Pixelgrafiken gibt es hier keine Treppenmuster an schrägen Linien.

Den aktuellen Browsern muss die SVG-Unterstützung noch per Plugin nachgerüstet werden. Firefox soll in der nächsten Release 1.1 aber mit SVG-Unterstüzung kommen.

Beim Internet Explorer muss man auch in naher Zukunft noch ein externes Plugin von Adobe einsetzen. Es kann von Adobe´s SVG-Portal (http://www.adobe.com/svg) kostenlos geladen werden

SVG-Dateien basieren auf der XML-Technik. Es handelt sich dabei also um normal lesbare, hierarchisch strukturierte Textdateien. Mit ein wenig Erfahrung lässt sich dadurch nachvollziehen, welches Ergebnis eine Datei produzieren soll. Der Nachteil bei Dateien mit vielen geometrischen Objekten ist, dass sie Datenmenge schnell groß wird. Üblicherweise verstehen sich die Plugins zum Lesen aber auch auf komprimierte SVG-Grafiken, so dass der Platzbedarf nicht zu langen Ladezeiten führt.

Das Zoomen in eine SVG-Grafik wird von den Browser-Plugins direkt unterstützt. Man kann also etwa in eine per SVG erzeugte Landkarte eintauchen, ohne dass dazu eine weitere Interaktion mit dem Server notwendig wäre, der die SVG-Grafik zur Verfügung stellt.

Hier kommt Ihr erstes SVG, das einen rot gefärbten Text in die Mitte schreibt und darum einen Kreis zieht.

<?php

header("Content-Type: image/svg+xml");

echo '<?xml version="1.0" encoding="iso-8859-1"?>';

?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"

"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >

<g style="stroke:black;font-size:48;">

<text x="400" y="300" style="stroke:red;fill:red;text-anchor:middle;" >

SVG mit PHP

</text>

<ellipse cx="400" cy="300" rx="200" ry="200" style="fill:none" />

</g>

</svg>

In der ersten Befehlszeile legt PHP den Inhaltstyp fest. So bekommt der Browser mit, dass das folgende XML-Dokument eine SVG-Grafik darstellt. Sie muss vor jeglichem anderen Output platziert werden. Sonst gibt's eine Fehlermeldung.

Die zweite Zeile, die den XML-Typ klärt, könnte eigentlich, wie der Rest außerhalb der PHP-Tags stehen. Nur enthält sie ja auch die Klammerung "", die PHP wieder zu interpretieren versuchen würde. Darum gibt sie das Programm per echo aus.

Nach der üblichen Doctype-Definition legt dieser SVG-Code eine Grafik in den Ausmassen 800x600 Pixeln an. Beim Weglassen dieser Maßangaben belegt die Grafik einfach allen verfügbaren Platz im aktuellen Fenster.

Das Tag-Pärchen , das den Rest einklammert, stellt eine Gruppierung dar. Sie ist kein notwendiger Bestandteil eines SVG-Dokuments, macht einem aber das Leben einfacher, da hier grundlegende Auszeichnungen, wie die Zeichenfarbe oder Schriftarten einmalig gegeben werden können. Bei allen Elementen innerhalb der Gruppe spart man sich dann ihre Angabe.

Die Befehle für den Text und den Kreis sind einigermaßen selbsterläuternd. Ihre style-Attribute enthalten nur von der Gruppierung abweichende Stilangaben.

PHP ist in diesem Beispiel noch nicht wirklich gefordert worden. Es ist aber natürlich recht einfach, etwa eine Reihe von Tags zur Erzeugung von Kreisen mit verschiedenen Positionen innerhalb einer while-Schleife mit den entsprechend parametrisierten echo-Kommandos ausgeben zu lassen. Sie können damit beispielsweise ohne großen Aufwand eine Visualisierung der Daten in einer Datenbank realisieren, also etwa die Verteilung statistischer Daten.

Ein anderes praktikables Betätigungsfeld von SVG ist alles, was mit Landkarten und Kartographie zu tun hat. Man könnte natürlich einen ganzen Stadtplan mit SVG erzeugen, wie beispielweise auf http://www.stadtteilplan.de gezeigt. Ein Merkmal von SVG erleichtert aber die Vermengung vorhandener Landkarten mit Daten aus einer Datenbank: Pixelbilder können im Hintergrund einer SVG-Grafik eingebunden werden. Man lädt also fertige Landkarten als JPG oder PNG und lässt dann per SVG-Kommandos wichtige Objekte darauf zeichnen. Die Koordinaten müssen dabei nicht einmal in Pixelpositionen umgerechnet werden. Denn der transform-Befehl von SVG erlaubt die Definition eines nahezu beliebigen Koordinatensystems inklusive Skalierung, Translation und Rotation.

Ein gutes Beispiel für eine solche Vermengung von Pixelgrafiken und SVG bietet der Tirolatlas unter http://tirolatlas.uibk.ac.at/. Gleichzeitig sehen Sie dort, wie SVG Interaktionen unterstützt - hier um die Koordinaten der aktuellen Mausposition darzustellen und bei Sehenswürdigkeiten eine passende Beschriftung einzublenden.

Wenn Sie es lieber abstrahierter mögen, also mit dem XML nichts zu tun haben möchten, verwenden Sie am besten eine der erhältlichen klassenorientierte Bibliotheken für PHP, mit denen sich SVG-Grafiken elegant erzeugen lassen. Eine universell nutzbare Abstrahierung der in SVG erzeugbaren Objekte bietet beispielsweise die unter http://www.phpclasses.org/browse/package/457.html erhältliche Klassenbibliothek, die schlicht "SVG" heißt. Wer dagegen hauptsächlich Diagramme wie Tortengrafiken oder Liniendiagramme erzeugen möchte, erleichtert sich die Arbeit mit "SVGGraph" unheimlich. Die gibt es auch bei PhpClasses unter http://www.phpclasses.org/browse/package/596.html

Gute Informationen rund um SVG finden sich in den Links, die Petra Kukofka auf http://www.scale-a-vector.de/link-d.htm zusammengestellt hat. Eine brauchbare Referenz bietet http://www.selfsvg.info und eine ergebnisorientierte Beispielsammlung hat http://www.datenverdrahten.de/svglbc/ zu bieten.