Fremde Namensräume und Objekte in SVG-Dateien verwenden

(Auszug aus "Das Einsteigerseminar SVG — Webgrafiken mit XML" von Helma Spona)

Der Namensraum einer XML-Datei definiert, welche Befehle verwendet werden dürfen, um eine gültige XML-Datei zu erzeugen. Folglich bedeutet dies, dass zur Angabe eines SVG-Befehls ein SVG-Namensraum definiert werden muss. Sie können aber auch einfach mehrere Namensräume in einer Datei verwenden und so bspw. XHTML- und SVG-Anweisungen mischen. Das ist eine sehr interessante Möglichkeit. Sie hilft Ihnen bspw. bei dem Problem, dass

  1. Croczilla noch keinen <text>-Tag unterstützt und
  2. die Ausgabe mehrzeiligen Textes in SVG-Grafiken recht unkomfortabel ist.

Sie können einfach einen zusätzlichen Namensraum angeben und diesen in der XML-Datei verwenden. Mit dem XHTML-Namensraum haben Sie bspw. die Möglichkeit, auch <div>-Tags oder HTML-Absätze wie Überschriften und Aufzählungen zu verwenden.

Den XHTML-Namensraum angeben

Wenn Sie HTML- bzw. XHTML-Befehle in SVG-Dateien verwenden möchten, müssen Sie neben dem SVG-Namensraum auch den XHTML-Namensraum definieren. Dazu fügen Sie ein zweites Attribut zum <svg>-Tag hinzu. Das sieht dann wie folgt aus:

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

Vielleicht fragen Sie sich jetzt, warum der zweite Namensraum mit xmlns:html, der erste aber nur mit xmlns definiert wird. Im Prinzip ist das aber ganz einfach. In jedem XML-Dokument können Sie einen Standardnamensraum definieren. Dieser Namensraum muss im Code nicht extra angegeben werden. Alle Befehle, für die der Namensraum nicht explizit angegeben wird, werden dann diesem Namensraum zugeordnet. In obigem Listingausschnitt wäre der Standardnamensraum der SVG-Namensraum, der mit xmlns="http://www.w3.org/2000/svg" definiert wird. Allen weiteren Namensräumen müssen Sie einer Zeichenfolge zuweisen, mit der Sie dann alle Befehle dieses Namensraums kennzeichnen. Nach dem Doppelpunkt geben Sie die Bezeichnung an, die Sie im Code verwenden möchten. Mit xmlns:html legen Sie also fest, dass alle XHTML-Befehle mit html:Befehlsname angegeben werden.

Ein Objekt eines fremden Namensraums einfügen

Haben Sie einen oder mehrere alternative Namensräume definiert, können Sie deren Befehle einfach einfügen. Sie könnten bspw. <html:p>normaler Absatz</html:p> verwenden, um einen Standardabsatz mit XHTML-<p>-Tag zu erstellen.

Damit würden Sie zwar gültigen XML-Code erzeugen, der Browser kann damit jedoch so nichts anfangen. Das liegt daran, dass die Nutzung fremder Namenräume in SVG-Code bestimmen Einschränkungen unterworfen ist. Diese bestehen jedoch nur darin, dass Sie diese Inhalte in einen bestimmten SVG-Tag, den Tag <foreignObject>, einfassen müssen. Das folgende Listing erzeugt neben dem Kreis auch eine Textausgabe, die mit Hilfe von XHTML-Code erfolgt.

<?xml version="1.0" encoding="iso-8859-1"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
  <circle cx="50" cy="50" r="20" style="fill:yellow;stroke:black"/>
  <foreignObject>
    <html:h1>Überschrift</html:h1>
    <html:p>normaler Absatz</html:p>
  </foreignObject>
</svg>

Erzeugte Ausgabe mittels SVG und XHTML (Kreis mit Text)

Abbildung: Erzeugte Ausgabe mittels SVG und XHTML (Kreis mit Text).

Fremde Objekte formatieren

Die Formatierung der Ausgabe lässt noch etwas zu wünschen übrig. Sie können aber natürlich auch hier noch nachhelfen. Inhalte, die Sie über <foreignObject> einfügen, können Sie ganz normal wie in SVG üblich über die Attribute x, y, width und height positionieren und deren Größe bestimmen. Die XHTML-Tags können Sie mit dem style-Tag formatieren oder auch Stylesheets dafür definieren.

Hinweis:
Wenn Sie für die Größe des Tags <foreignObject> eine Größe angeben, die für den eingefügten Text nicht ausreicht, wird nur dann ein Zeilenumbruch erzeugt, wenn dies möglich ist. Andernfalls wird nur ein Ausschnitt angezeigt. Sie können jedoch innerhalb des Tags bspw. einen XHTML-<div>-Tag einfügen, und dessen Größe entsprechend setzen. Dann erfolgt auch ein entsprechender Zeilenumbruch.

Wenn Sie jedoch style-Attribute verwenden, müssen Sie als Eigenschaften die Eigenschaften für den entsprechenden Namensraum angeben, nicht die CSS-Eigenschaften, die Sie aus SVG kennen. Wenn Sie bspw. die Schriftfarbe bestimmen möchten, ist dafür die Eigenschaft color statt fill anzugeben. Im folgenden Listing wird der Text etwas gegenüber dem vorherigen Beispiel erweitert, indem eine Liste definiert wird. Alle XHTML-Tags werden dann mit dem <style>-Attribut formatiert.

<?xml version="1.0" encoding="iso-8859-1"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
  <circle cx="50" cy="50" r="20" style="fill:yellow;stroke:black"/>
  <text x="10" y="30" style="fill:black;font-size:10px">test</text>
  <foreignObject x="80" y="20" height="150px" width="100%">
    <html:div style="background-color:silver;border:solid 1px;width:250px;height:148px">
      <html:h1 style="font-family:Arial;font-size:18px">Überschrift</html:h1>
      <html:p style="font-family:Arial;font-size:12px;color:blue">Dies ist ein normaler Absatz, der auch automatische Umbrüche enthalten kann.</html:p>
      <html:ul style="font-family:Arial;font-size:10px;color:blue">
        <html:li>listeneintrag 1</html:li>
        <html:li>listeneintrag 2</html:li>
        <html:li>listeneintrag 3</html:li>
      </html:ul>
    </html:div>
  </foreignObject>
</svg>

Das Ergebnis sieht dann schon ganz anders aus und für den Betrachter ist nun nicht mehr ersichtlich, was davon SVG und was HTML bzw. XHTML ist.

Formatierter XHTML-Text

Abbildung: Formatierter XHTML-Text.

   

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema SVG bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright © verlag moderne industrie GmbH 2001
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "Das Einsteigerseminar SVG — Webgrafiken mit XML" denselben Bestimmungen wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

verlag moderne industrie GmbH, Justus-von-Liebig-Straße 1, D-86899 Landsberg/Lech, fon ++49 (0) 81 91 / 125 – 0, leserservice(at)mi-verlag.de