joerghuelsermann.de Scalable Vector Graphics

Scalable Vector Graphics

Ich halte momentan im August 2011 SVG für leider noch unzureichend unterstützt von den aktuellen Browsern. Es wird aber in der Zukunft an Gewicht zulegen durch die geringe Datenmenge und dadurch das dieses Format maschinenlesbar ist. Man kann SVG mit PHP und Javascript kombinieren und in XHTML oder HTML5 direkt einbetten. Bei den Kombinationen neige ich persönlich mehr zu Kombinationen mit PHP. Das Einbetten von SVG gelingt meines Erachtens am besten bei der Anwendung von XHTML5.

Grundaufbau

Mein Grundaufbau einer SVG Datei ist in der Regel fast immer gleich und hat sich für mich unter XHTML5 in der Praxis bewährt.

Zuerst erfolgt die Angabe der XML Deklaration, welche man nicht unbedingt setzen muss, wenn man den Zeichensatz UTF-8 verwendet. Danach erfolgt die Einbindung einer CSS Datei was auch ein optionaler Punkt ist. Ich bin mittlerweile dazu übergegangen an Stelle einer Datei eine dataurl auf diesem Wege einzubinden, sobald externes CSS sinnvoll ist.

Es folgt eine Angabe des Dokumententyp für eine SVG Datei.

Nun beginnt der eigentliche Teil des SVG Elementes, welches man ab diesem Punkt auch so in HTML5 mit Modifikationen einbinden könnte. Die Version und der erste Namensraum ist Pflicht. Der zweite Namensraum ermöglicht dann jedes Element zu verlinken und auch innerhalb einer Datei dann wieder zu verwenden. Der Ausschnitt der sichtbar sein soll, wird über das nächste Atrribut definiert und es folgt die optionale Sprachangabe.

Die nächsten beiden optionalen Elemente betiteln das Dokument und liefern eine Beschreibung. Auch für Einzelelemente ist eine solcher Titel und Beschreibung möglich.

Im Beispiel habe ich einen Kreis zuerst definiert. Bei der Ausgabe nutze ich diese eine Definition um diesen Kreis zweimal zu verwenden. Einmal wird er nach links oben verschoben und wird mit der Farbe grün gefüllt. Das zweite Mal wird dieser Kreis mit der Farbe rot gefüllt und behält seine Position und verlinkt nach der Startseite meines Kurz Url Dienstes.

SVG Grundstruktur
Grundaufbau meiner SVG Dateien
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="datei.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 200" xml:lang="de">
<title>Titel</title>
<desc>Beschreibender Text</desc>
<defs>
<circle id="kreis" cx="150" cy="150" r="25" />
</defs>
<use xlink:href="/artikel/svg/#kreis" transform="translate(-100,-100)" fill="green" />
<a xlink:href="http://3jh.de/" xlink:title="Privater Kurz Url Dienst">
<use xlink:href="/artikel/svg/#kreis" fill="red" />
</a>
</svg>
SVG anzeigen

Einbindung von SVG

Was die Einbindung von SVG betrifft ist es möglich diese als Datei oder als dataurl in XHTML oder CSS einzubinden. Wahrscheinlich werden diese Möglichkeiten nicht so stark genutzt werden durch die fehlende Browserunterstützung bei älteren Versionen. Das Bild würde in den Fällen einfach nur nicht angezeigt werden.

Das direkte Einsetzen eines SVG Elementes in XHTML5 kann aber mit Hilfe einer Weiche realisiert werden. if (strpos($_SERVER['HTTP_ACCEPT'], 'application/xhtml+xml')!==false){}. Schwieriger dürfte es sich wohl dann wieder in den Fällen darstellen wenn HTML5 verwendet wird und man eine Browserweiche für Versionen, die bereits über einen HTML Parser verfügen, versucht zu unterscheiden.