SelfSVG - SVG-Grafiken selbst erstellen

10.3Inline-Code

In diesem Abschnitt soll eine Methode zur Einbettung von SVG-Elementen in andere XML-Dokumente vorgestellt werden. Für jede Beschreibungssprache, die in ein sogenanntes Host-Dokument eingebettet werden soll, wird ein spezieller Namensraum angegeben. Meist befindet sich diese Angabe im Wurzelelement des Host-Dokuments, so daß alle Elementbezeichner der eingebetteten Sprache immer mit dem Präfix des entsprechenden Namensraums gefolgt von einem Doppelpunkt beginnen müssen. Es besteht jedoch auch die Möglichkeit die Namensraumangabe des einzubettenden Dokuments in dessen Wurzelelement zu schreiben. Dies erlaubt eine herkömmliche Notation der Elemente. Von einer Vermischung einzelner Elemente der eingesetzten Sprachen (z.B. <p><svg:circle ... /></p>) ist unbedingt abzuraten, da es dadurch zu Schwierigkeiten bei der Darstellung des Gesamtdokuments kommen kann. Zusätzlich zu den Namensraumangaben ist ebenfalls darauf zu achten, daß eine korrekte Dokument-Typ-Deklaration, falls erforderlich, angegeben wird, die alle verwendeten Beschreibungssprachen abdeckt.

Das folgende Beispiel (siehe Listing 10-9) zeigt ein XHTML-Host-Dokument, in welches ein SVG-Dokument eingebettet ist. Die hier verwendete und vom W3C erstellte Dokument-Typ-Deklaration deckt übrigens neben XHTML 1.1 und SVG 1.1 ebenfalls die Beschreibungssprache MathML 2.0 ab. Damit der XML-Parser die Möglichkeit erhält die unterschiedlichen Dokumenttypen zu unterscheiden, um sie getrennt voneinander bearbeiten zu können, beinhaltet das Wurzelelement <html> neben der obligatorischen XHTML-Namensraumangabe (xmlns="http://www.w3.org/1999/xhtml") zusätzlich die SVG-Namensraumangabe (xmlns:svg="http://www.w3.org/2000/svg"). Möchte man nun innerhalb des Host-Dokuments SVG-Elemente verwenden, so muß diesen zwingend das in der SVG-Namensraumangabe definierte Präfix svg gefolgt von einem Doppelpunkt vorangestellt werden (z.B. <svg:circle>).

Anzeigebeispiel

<?xml version="1.0" standalone="yes"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN"
  "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xml:lang="de">
  <head>
    <title>SVG-Inline-Code (Variante 1)</title>
  </head>
  <body>
    <h1>SVG-Grafik innerhalb eines XHTML-Dokuments</h1>
    <p>
      <svg:svg width="100" height="100" version="1.1">
        <svg:circle cx="50" cy="50" r="50" />
      </svg:svg>
    </p>
  </body>
</html>

Listing 10-9: SVG-Inline-Code innerhalb eines XHTML-Dokuments (Variante 1)

Listing 10-10 zeigt eine leicht veränderte Variante des Host-Dokuments aus Listing 10-9. Hier befindet sich die SVG-Namensraumangabe nämlich nicht mehr im Wurzelelement des Gesamtdokuments, sondern in dem des SVG-Dokuments. Die Struktur und die Darstellung des Dokuments ändern sich hierbei natürlich nicht.

Anzeigebeispiel

<?xml version="1.0" standalone="yes"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN"
  "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
  <head>
    <title>SVG-Inline-Code (Variante 2)</title>
  </head>
  <body>
    <h1>SVG-Grafik innerhalb eines XHTML-Dokuments</h1>
    <p>
      <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" version="1.1">
        <circle cx="50" cy="50" r="50" />
      </svg>
    </p>
  </body>
</html>

Listing 10-10: SVG-Inline-Code innerhalb eines XHTML-Dokuments (Variante 2)

Damit diese Dokumente vom entsprechenden Betrachter auch richtig angezeigt werden können, müssen sie übrigens vom Webserver mit dem MIME-Type application/xhtml+xml ausgeliefert werden. Dies bereitet beispielsweise Browsern der Mozilla-Familie keinerlei Schwierigkeiten, der Internet Explorer kann solche Dokumente jedoch nicht anzeigen. Dennoch kann man ihn mit Hilfe des Adobe-Plugins dazu überreden, SVG-Inline-Code zu verarbeiten. Unglücklicherweise benötigt man dazu proprietäre Mechanismen. Außerdem darf sich der SVG-Quelltext nur in herkömmlichen HTML-Dokumenten befinden bzw. darf das Dokument - auch wenn es sich um korrektes XHTML handelt - nicht mit dem oben erwähnten MIME-Type versendet werden. Ein Beispiel für solch einen Misch-Code liefert Listing 10-11.

Anzeigebeispiel

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xml:lang="de">
  <head>
    <title>SVG-Inline-Code (proprietäre Adobe-Variante)</title>
    <object id="AdobeSVG" classid="clsid:78156a80-c6a1-4bbf-8e6a-3cd390eeb4e2"></object>
    <?import namespace="svg" implementation="#AdobeSVG"?>
  </head>
  <body>
    <h1>SVG-Grafik innerhalb eines (X)HTML-Dokuments</h1>
    <p>
      <svg:svg width="100" height="100" version="1.1">
        <svg:circle cx="50" cy="50" r="50" />
      </svg:svg>
    </p>
  </body>
</html>

Listing 10-11: Für den Adobe SVG Viewer optimierter (X)HTML-SVG-Mischcode

Skripte definieren

Ereignisbehandlung