SVG- und PHP-Labor

Oft trifft man wen, der Bilder malt,
viel seltener wen, der sie bezahlt.
Wilhelm Busch

Skalierbare Vektorgraphik (Vektorgrafik) SVG und PHP

In diesem Teil des PHP-Labors geht es um die Erzeugung und Kombination von Vektorgrafik insbesondere mit PHP. Wie gehabt werde ich hier nicht auf die komplette Syntax systematisch eingehen, sondern eher ein paar Anwendungsbeispiele liefern, wie SVG (skalierbare Vektorgraphik, englisch: scalable vector graphics) sinnvoll genutzt werden kann. Oft geht es bei dem Einsatz von PHP auch nur um die eigentliche Erzeugung des Bildes, was natürlich auch mit nahezu beliebigen anderen Skript- oder Programmiersprachen erfolgen kann, die eine Textausgabe im Klartext ermöglichen. Ideal wäre SVG etwa auch als Ausgabeformat für richtige Programmiersprachen wie fortran, ansi-c, java etc, denn es wird immer nur die Fähigkeit zur Textausgabe benötigt, um SVG zu erzeugen, somit erhält man für diese Programme unabhängig von der Graphikoberfläche oder dem Betriebssystem eine großartige Möglichkeit zur Visualisierung von Daten und Prozessen. fortran oder c könnten so eine ideale Ergänzung zu PHP sein, um zeitkritische Rechnungen durchzuführen, weil die Syntax dieser Sprachen PHP ähnelt, man also nicht viel hinzulernen muß, wenn man mit PHP schon zurecht kommt. Ein Programm in c läßt sich zudem gut als CGI verwenden, so daß einem auch für internet-Anwendungen die komplette Leistung eines c-Programms zur Verfügung steht.
Wenn das Ergebnis so oder so immer dasselbe ist, sollte das Bild auch eher nach einmaligem Erzeugen einfach abgespeichert werden, statt es vom web-server immer wieder berechnen zu lassen.

SVG ist ein XML-Format, mit dem sehr einfach Bilder gemalt werden können. Da in SVG allein allerdings leider keine einfachen Schleifen oder Rechenoperationen ausgeführt werden können (geht nur mit Skript-Sprachen wie ecma-script oder java-script oder sehr eingeschränkt über Animationen. ecma-script oder java-script ist aber in SVG tiny nicht vorgesehen und sonst in SVG nur optional, ein DOM ist vorhanden), ist das Erzeugen solcher Graphiken mit PHP eine gute Alternative, wenn dies nach zufälligen oder sonstwie häufig sich ändernden Parametern zu geschehen hat. Vom Umfang her ist SVG etwa so umfassend wie XHTML oder CSS, daher werde ich das hier nicht komplett erklären. Sinnvoll lernen kann der geneigte Leser das durch einfache Beispiele, wie auf den anderen Seiten dieser Rubrik beschrieben und die »SVG-Spezifikation, welche selbst solch einfache Beispiele enthält. Die »SVG-Test-Suite enthält weitere nützliche Beispiele.

Die Kombination mit PHP ist denkbar einfach. PHP stellt für SVG keine gesonderten vereinfachten Funktionen zur Verfügung. Das ist aber auch nicht notwendig, weil die echo-Anweisung für jegliche SVG-Anweisung komplett ausreicht. Lediglich der MIME-Typ als header muß gesendet werden, damit der anfragende browser weiß, daß er eine SVG-Datei als Antwort bekommt.

Neben der größeren Mächtigkeit von SVG gegenüber etwa macromedia flash ist dies ein weiterer großer Vorteil, es sind keine weiteren Module oder extra software notwendig, um SVG-Bilder zu erzeugen. Auch handelt es sich bei SVG um einen internationalen Standard, dessen Interpretation derzeit in gängige Darstellungsprogramme und Mobiltelephone integriert wird. Bei macromedia flash hingegen handelt es sich nur um ein proprietäres, veraltetes Datenformat, bei welchem Nutzer und Ersteller von dem guten Willen oder der Willkür der Herstellerfirma abhängig sind. Die Erzeugung unabhängig vom Betriebssystem oder mit beliebigen Programmen ist knifflig und kostenpflichtig bis unmöglich. Daher wird dieses Format hier nicht weiter betrachtet werden, da von der Philosophie her nicht zukunftsweisend. Neben flash hat SVG weitere Vorläufer wie postscript (PS), portable document format (PDF) und einige weniger bekannte Formate. Es ist besonders wie XHTML und XML allgemein für den Datenaustausch im internet und zwischen beliebigen Programmen optimiert und stellt quasi die Quintessenz dieser Vorläufer da, deren lizenzinhabende Firmen praktisch alle zu diesem Standard beigetragen haben und auch weiterhin beitragen.

Formen und Symmetrien, SVG oder andere Formate

Ästhetik beruht oft auf einer interessanten Spannung zwischen Symmetrie und Asymmetrie. Die unerwartete Symmetrie und der unerwartete kleine Symmetriebruch macht Bilder interessant. Fundamentale Symmetrien stecken in elementaren graphischen Grundformen wie Kreisen, Ellipsen und Rechtecken, Polygonen, anderen symmetrischen offenen oder geschlossenen Kurven, welche ebenfalls oft zu ästhetisch starken Bildern beitragen. Auch die Abstraktion in der Kunst beruht oft auf einer Reduktion auf elementare Formen. Mit der Computergraphik ist ein weiterer wichtiger Anwendungsbereich für elementare Formen hinzugekommen. Solche Formen sind vom Betrachter schnell zu erkennen und zu identifizieren und sind ideal zur Vermittlung komplexer Informationen mit einfachen Mitteln.

Daraus ergibt sich der typische Anwendungsbereich von Vektorgraphik - besteht eine graphische Darstellung aus elementaren Grundformen und Linien, Kurven und Pfaden, die sich durch Bézier-Kurven annähern lassen, so ist Vektorgraphik das ideale Format. Hinzu kommen einfache Abläufe und Computergraphik und die Möglichkeit der Skalierbarkeit ohne Verluste bei der Qualität der Graphik. Deutlich davon abzugrenzen ist die Pixelgraphik mit den Formaten PNG und JPG. Diese Formate eignen sich besonders für Bilder mit komplexen, irregulären Formen und chaotischen Informationen, wie es für Bilder von Digitalkameras und scannern typisch ist, ebenso für den üblichen Videofilm. Bei solchen Bildern werden die Informationen pixelweise abgespeichert und die Kompression findet entweder verlustfrei oder verlustbehaftet je nach Format durch Untersuchung der Pixelfolgen auf Muster hin statt. Solche Pixelgraphik ist nicht verlustfrei skalierbar. Demgegenüber werden mit Vektorgraphik die elementaren Formen beschrieben - Positionierung und Eigenschaften und Reihenfolge der Darstellung. Diese Beschreibung kann dann seinerseits verlustfrei mit einem etablierten Verfahren komprimiert werden, ähnlich anderen Klartextformaten wie XHTML, CSS, postscript. SVG kann auch Pixelgraphikbilder in seine Darstellung integrieren und somit auch animieren.

Darstellungsprogramme für SVG, skalierbare Vektorgrafik

Das Anzeigen von SVG im Darstellungsprogramm ist derzeit noch noch nicht ganz so einfach wie das von PNG oder JPG, ist es jedoch zunehmend weniger.
Das Darstellungsprogramm von W3C Amaya unterstützt das Format direkt und selbständig, aber nur sehr rudimentär.

Bei Mozilla gibt es eine Arbeitsgruppe zu SVG, die bereits seit Jahren eine spezielle Variante des Mozilla anbot, die das Format teilweise interpretiert und somit wie Amaya auch mit anderen unterstützten Formaten gut mischen kann. Aktuelle Mozillas (ab etwa Gecko 1.8) haben SVG bereits für die Allgemeinheit eingebaut.
Seit etwa Juni 2005 ist also Mozilla und auch Firefox oder Epiphany wohl problemlos mit SVG verfügbar, rev 1.7.8 entsprechend Firefox 1.04 wurde bei meinem debian stable (sarge) jedenfalls gleich mit funktionierendem SVG installiert. Effektiv scheinen diese Geckos 1.7.x intern ein plugin zu verwenden, weswegen es notwendig sein kann, zwischen dem Start des Programmes und vor dem Ansehen des ersten SVGs einmal about:plugins anzusehen. Beim Mozilla habe ich auch festgestellt, daß dieser versucht, korrekt ausgelieferte SVGs selbst anzuzeigen, sobald er aber den Autor für einen Deppen hält (nutzt das ungültige embed-Element oder der server schickt einen falschen MIME-Typ), schickt er soweit verfügbar das adobe-plugin vor, über welches weiter unten noch zu reden sein wird). Im November 2005 ist der auf Gecko 1.8 basierende Firefox 1.5 rausgekommen oder entsprechend sein großer Bruder SeaMonkey 1.0 etwas später, die SVGs ohne eigenes plugin und ohne weitere Tricks anzuzeigen versuchen. Ein paar Dinge, die allerdings in den älteren Versionen noch funktionierten, sind offenbar im Firefox 1.5 zurückgenommen worden. Hinsichtlich SVG bietet Firefox 2.0 vom Oktober 2006 nicht viel neues. Animation gibt es zumindest teilweise ab Gecko 2.x, entsprechend Firefox4.x, herausgekommen 2010.

Neu seit März 2005 ist SVG im Opera (SVG tiny 1.1 ab Opera 8 beta3. Die Spezifikation für SVG-tiny ist unter SVG mobile zu finden und spart einige Dinge aus wie Anwendung von CSS, Symbole, Filter, Muster, Einbindung der meisten externen Quellen, was aber bei geschickter Erstellung von Dateien keine großen Einschränkungen bedeutet). Opera 9 Technologievorschau 1 vom Oktober 2005 hat da schon deutlich zugelegt und kann gegenüber der achter Version schon einiges mehr. Weitere Vorschauen und Betaversionen zeigen weitere Fortschritte. Opera9.00 vom Juni 2006 zeigt bereits große Teile von SVG an, vor allem aus tiny und basic, aber auch schon deutlich darüber hinaus. Nach meinem derzeitigen Eindruck ist die Interpretation von SVG beim Opera am weitesten gediehen und beim Mozilla weiter als beim Amaya. Fehler und Lücken hat Opera aber auch gegenüber der SVG tiny Spezifikation. Es ist mir auch nicht schwer gefallen, Opera 8 mit (teils) fehlerhaftem SVG zum Absturz zu bringen - da wurde mit Opera 9 Technologievorschau 1 bereits teilweise nachgebessert und bis 9.00 wohl auch beseitigt worden. Opera 9.50 alpha vom September 2007 bringt weitere Verbesserungen und eine Reduzierung von Fehlern. (Fehlerliste Opera und SVG von mir auf englisch). Einiges kann Opera 8 dafür aber auch schon, was er laut Spezifikation nicht einmal bräuchte, am wichtigsten darunter ist die Teiltransparenz. Opera 9.00 hat demgegenüber deutlich mehr zu bieten und Opera ab Version 9.50 alpha ist für die Betrachtung von SVG allgemein und besonders für animiertes SVG als erste Wahl zu betrachten, wenngleich bei weitem noch nicht lücken- und fehlerfrei.

Eine andere Variante ist die Nutzung von browser-plugins. KDE integriert das plugin KSVG 1 in das Darstellungsprogramm Konqueror. Der Übergang vom plugin zum selbstinterpretierenden Programm scheint auch bei Mozilla und Opera fließend zu sein, bei genauerer Ansicht scheint auch Mozilla (Gecko 1.7) wie der Konqueror ein eigenes optionales plugin zu verwenden, Opera 8 verwendet vielleicht auch intern eines. Bei Opera 9 hingegen macht SVG einen komplett integrierten Eindruck wie dann auch Mozilla (Gecko ab Version 1.8). Angeblich ist KSVG 1 für den Konqueror bereits ab Version 3.2 verfügbar, ich habe KSVG allerdings erst ab 3.2.3 vorgefunden und gucke mir das ab 3.3.2 häufiger mal an. Auch da handelt es sich jedoch um ein zusätzlich zu installierendes Programmpaket.
Eine Abspaltung vom Konqueror namens WebKit hat sich über einige Jahre zu einem recht beliebten Programm entwickelt, welches auch von den Firmen Apple und Google in ihren browsern verwendet wird. Die Interpretation von SVG bei diesem Programm ist allerdings bedingt durch fundamentale Fehler des Programmes zweifelhaft und funktioniert bei mir unter Linux auch 2011 noch nicht, beim Konqueror aber nach wie vor, solange dieser nicht selbst WebKit verwendet.

Für browser sind auch andere plugins für SVG verfügbar, bei eigener Interpreation, wie das mittlerweile üblich ist, ist dies allerdings zunehmend unnötig. Besonders für die Betriebssysteme von microsoft und macintosh ist ein plugin von Adobe bekannt geworden. Da ich die Linux-Variante des Adobe plugins mit Debian stable bis Juni 2005 nicht zur Anzeige auch nur des simpelsten Bildes gebracht habe (obgleich das plugin an sich funktionierte), beim verwandten Knoppix aber schon, mag die Qualität der Adobe software aber sehr zweifelhaft sein. Da Adobe aber sehr kommerziell ausgerichtet ist, mag das auch nur für das plugin für Linux gelten (böse Absicht oder Unkenntnis bezüglich Linux?). Die gute Nachricht: nachdem debian-stable von woody auf sarge (Juni 2005) gewechselt ist, ist auch das Adobe plugin bereit zu kooperieren, ist allerdings recht instabil - von einer regelmäßigen Verwendung würde ich dringend abraten - oft schmiert nur das adobe-plugin ab, manchmal auch das ganze Darstellungsprogramm. Tatsächlich ist die aktuelle Linux-Version des plugins 3.01 beta teilweise auch inhaltlich verblüffend fehlerhaft und ist seit Ende 2003 auch nicht aktualisiert worden, kennt auch die aktuelle Spezifikation vom Januar 2003 noch nicht. Wenn das adobe-plugin glaubt, in einem deutschsprachigen System zu arbeiten, so begeht es etwa den drolligen Fehler, Angaben wie 0.2 nicht zu verstehen und stattdessen 0 anzunehmen, was zu vielen Fehlanzeigen führt. Diesen Fehler kann der Nutzer umgehen, wenn er das plugin davon überzeugt, dass 0.2 dem 0,2 vorzuziehen ist. Ohne dieses ist das plugin praktisch unbrauchbar. Insgesamt ist dieses Verhalten des plugins aber ein lächerlicher Fehler, der bei adobe bekannt ist, aber nicht behoben wird. Bei der windows-Version 3.02 vom November 2004 scheinen hingegen einige Fehler beseitigt worden zu sein. Ob die Lücken in der Unterstützung von SVG ebenfalls kleiner geworden sind, habe ich nicht systematisch untersucht. Jedenfalls fällt es nicht schwer, auch diese Programme zum Absturz zu bringen, manches Darstellungsprogramm reißt es dabei auch noch mit.
Bei neueren browser-Version habe ich 2011 allerdings feststellen müssen, daß diese sich zunehmend schwertun, daß plugin zu verwenden, auch nicht alternativ zur eigenen Interpretation. Dahinter kann natürlich Absicht stecken, um einen Vergleich mit dem eigenen Produkt zu erschweren - denn erstaunlicher Weise kann sich das alte plugin gegenüber den neueren browsern immer noch ganz gut sehen lassen.

Opera, Mozilla und Konqueror mit ihrer eigenen SVG-Darstellung sind demgegenüber allerdings deutlich stabiler und trotz einiger Lücken durchaus alltagstauglich.
Jedenfalls hat Adobe angekündigt, die weitere Unterstützung für das plugin bis Ende 2006 einzustellen, da inzwischen genug Darstellungsprogramme im Angebot sind, die kein plugin mehr brauchen, weil sie das Format selbst interpretieren. Damit hat sich das plugin über Kurz oder Lang ohnehin erledigt, vor allem bei neueren SVG-Versionen ab 1.2.

Ferner gibt es auch plugins oder Hilfsmittel, die mit java arbeiten, also Betriebssystem-unabhängig (Batik, Squiggle).
Weitere Möglichkeiten bieten eigenständige Programme, die SVG interpretieren und die mit dem entsprechenden MIME-Typ im Darstellungsprogramm verknüpft werden können. Zum Beispiel Sodipodi, Inkscape oder Sketch unter Linux interpretieren SVG zumindest zum Teil. Auch gibt es Programme wie den Gimp oder Imagemagick, die mit Erweiterungen SVG einlesen können, sich also ebenfalls zur Darstellung eignen.
Aktuelles und Details können der »W3C-Seite zu SVG entnommen werden.

Unter den von mir ausprobierten Möglichkeiten scheint trotz Mängeln Opera 9.x und neuer signifikant die Nase vorn zu haben, gefolgt vom plugin von Adobe, keiner von beiden bietet aber eine vollständige Unterstützung, und beide haben teils unterschiedliche Lücken. Filter und Animationen etwa sind Felder allerdings grober Lücken bei KSVG, der ansonsten aber schon sehr schöne Ergebnisse liefert. Das gilt wohl auch für Mozilla (Gecko 1.x), der Animationen noch komplett links liegen läßt, dafür aber schon wie Opera bereit ist, SVGs mit XHTML und MathML (nur die Geckos, Opera versteht von sich aus kein MathML) zu mischen, was mit plugins wohl nie möglich sein wird. Mit der Beschränkung auf SVG 1.1-tiny gibt Opera 8 der eigenen SVG-Unterstützung eine definierte Grundlage, die anhand eines W3C-Standards nachvollziehbar ist. Animationen kann Opera 8 auch anzeigen. Bei näherer Betrachtung ist allerdings die Unterstützung von SVG-tiny bei Opera 8 sicher noch nicht vollständig, wenngleich von Anbeginn an als gut einzustufen. Amaya kann auch einfache SVGs anzeigen, erzeugen und mit anderen XMLs mischen, gerät aber recht schnell an seine Grenzen. Die Erweiterungen vom Gimp und vom Imagemagick scheinen recht solide zu sein (ist eventuell die gleiche Linux-Bibliothek), aber nur bei statischen Bildern. Dies gilt wohl auch für zahlreiche andere Programme. Generell machen die Filter und Animationen wohl die größten Probleme, soweit ich das bislang gesehen habe - auch in den Beschreibungen nicht von mir ausprobierter Programme.

Um den Spaß möglichst vielen Nutzern zugänglich zu machen und einige Kinderkrankheiten der Darstellungsprogramme bei der Einbettung in XHTML zu umgehen, empfiehlt sich derzeit ein schlichter Verweis auf eine SVG-Datei, wie auf dieser Seite, damit können am meisten Anzeigemöglichkeiten angesprochen werden. Auch das object-Element kann genommen werden, in dem dann jedoch als Alternative ein schlichter Verweis auf die Datei stehen sollte, damit vom Nutzer auch Programme wie Sodipodi, Sketch, Gimp, Imagemagick etc zur Anzeige genutzt werden können, die ebend keine plugins sind sondern selbständige Programme, die nicht in das Darstellungsprogramm eingebettet werden können. Das Vorgehen empfiehlt sich übrigens bei jedem Einsatz des object-Elementes. Aufgrund von Sicherheitsmägeln kann es wohl auch vorkommen, daß object in Zusammenhang mit dem adobe plugin im internet explorer nicht mehr funktioniert, entweder mag das an windows XP liegen oder an einer neuen Sicherheitseinstellung - auch da ist ein alternativer Verweis sinnvoll, damit auch windows-XP-Nutzer mit internet explorer und adobe plugin schon etwas von den SVGs zu sehen bekommen. Bei windows 98 habe ich übrigens keine Probleme mit dem object-Element im internet explorer entdecken können, da funktioniert alles problemfrei.

Die anderen Abschnitte dieses Bereiches werden dann Erläuterungen zu SVG geben und auch Beispiele für die Kombination mit PHP.

Einige Beispiele für die Kombination von Vektorgrafik und PHP

Und hier als Beispiel noch eine kleine Animation (läuft im Adobe-plugin und im Opera ab Version 8 korrekt, beim KSVG 1 animiert wohl auch was, weil ich das Beispiel so einfach gewählt habe, es werden aber einige sehr wichtige Attribute ignoriert, so daß die Animation recht schnell zum Stehen kommt):
Animierte Linien
Als weiteres Beispiel für eine Animation eine Darstellung von Lissajous-Figuren in drei Dimensionen: Lissajous-Figur, Animation von Bewegungen und Farben
Ein einfaches Beispiel mit Interaktion und Animation (zum Aktivieren bunte Kreise anklickern und Animation sichtbar und am Laufen halten...)
Simples SVG-Spielchen

Weitere Beispiele zu animierten SVGs gibt es unter anderem in meiner »Kunstgalerie mit animierten SVGs oder »Kunstgalerie mit statischen SVGs.