Wikibooks

SVG/ Erweiterbarkeit

< SVG


Erweiterbarkeit

Bearbeiten

Als XML-Format lässt sich SVG durch andere XML-Formate erweitern. Prinzipiell ist eine nahezu beliebige Mischung verschiedener Formate möglich. SVG schränkt jedoch die Möglichkeiten insoweit ein, als außerhalb von bestimmten Elementen Elemente aus anderen Namensräumen bei der Darstellung ignoriert werden sollen. Neben den dafür vorgesehenen und in anderen Kapiteln beschriebenen Elementen title, desc und metadata ist insbesondere foreignObject dafür vorgesehen, Elemente aus anderen Namensräumen aufzunehmen, die zur Präsentation gedacht sind. Allerdings sieht SVG selbst kein spezielles anderes Format vor, welches von einem Darstellungsprogramm interpretiert werden muss. Naheliegend sind allerdings die Formate XHTML und MathML. Sofern das Darstellungsprogramm auch CSS interpretiert, ist es naheliegend, dass beliebiger mit CSS dekorierter und mit XML ausgezeichneter Text dargestellt werden kann. In SVG tiny 1.2 wird sogar erwartet, dass Darstellungsprogramme allgemein die Fähigkeit haben, mit CSS oder XSL dekorierten und mit einem XML-Format ausgezeichneten Text auch innerhalb von foreignObject entsprechend anzuzeigen. Dies gewährleistet jedenfalls eine komfortable Möglichkeit, automatisch umgebrochenen Fließtext in SVG einzubetten.

Erweiterungen erfolgen jedenfalls in diesem Sinne immer in einem eigenen Namensraum, niemals durch eine Erweiterung der Dokumenttypdeklaration von SVG durch den Autor oder einfach so durch Einfügen von Elementen ohne eigenen Namensraum. Daraus ergibt sich insbesondere, dass Formate, welche keinen eigenen Namensraum definieren, ungeeignet für eine Integration in SVG sind.

Sofern eine Validierung erfolgen soll, empfiehlt sich, das SVG-Dokument und den fremden Inhalt getrennt zu validieren und dann erst zusammenzufügen, weil Validatoren meistens solchen Dokumenten mit gemischten Namensräumen nicht gewachsen sind, besonders jene Validatoren nicht, die mit DTDs arbeiten.

foreignObject

Bearbeiten
SVG                
1.1 -(bislang kein Format gefunden, welches interpretiert würde, um dies testen zu können) 9.5 (teilweise und oft falsch) 3 (teilweise) - 4 (teilweise) ? ? ?

Das Element foreignObject dient dazu, um Inhalte aus anderen Namensräumen zur Darstellung aufzunehmen. Das Element erzeugt für den fremden Inhalt einen eigenen Anzeigebereich, in welchem gegebenenfalls der fremde Inhalt dargestellt wird. Insbesondere stammt der direkte Inhalt des Elementes nicht aus dem Namensraum von SVG. Eine Ausnahme davon sind die Elemente title, desc, metadata und switch in SVG tiny 1.2. Sollte allerdings der fremde Inhalt wiederum ein Dokumentfragment aus dem Namensraum von SVG enthalten, so ist laut der Empfehlung SVG 1.1 mindestens dieses Fragment darzustellen.

In SVG 1.1 wird zudem erwartet, dass foreignObject zusammen mit dem Element switch verwendet wird, also nur als Kindelement von switch auftritt, wobei die bedingte Verarbeitung sinnvollerweise durch Verwendung des Attributes requiredExtensions erfolgt. In SVG tiny 1.2 sind auch andere Gruppierungselemente als Elternelemente erlaubt. Ob die Verwendung von requiredExtensions angebracht ist oder nicht, hängt von vielerlei Dingen ab. Wenn der fremde Inhalt nur semantisch relevante Elemente enthält, die zudem mit CSS dekoriert werden, so erfordert die Präsentation nicht, dass das Darstellungsprogramm das Format selbst kenn, es muss nur die Dekoration durchführen können. Bietet das fremde Format in dem Fragment hingegen eine technisch relevante Funktionalität, so ist eine bedingte Verarbeitung sicherlich angebracht.

In SVG 1.1 wird der fremde Inhalt direkt im Element notiert. In SVG ist es alternativ auch möglich, ein komplettes Dokument zu referenzieren, welches in das foreignObject eingebettet wird.

Attribute x und y

Bearbeiten

x repräsentiert die x-Koordinate der linken oberen Ecke des foreignObject. y repräsentiert die y-Koordinate der linken oberen Ecke des foreignObject. Der Wert ist jeweils eine Koordinate. Wenn der Attributwert nicht angegeben ist, wird jeweils 0 angenommen.

Die Attribute sind animierbar.

Attribute width und height

Bearbeiten

width repräsentiert die Breite des foreignObject. height repräsentiert die Höhe des foreignObject. Der Wert ist jeweils eine nicht negative Länge. Der Wert 0 unterbindet die Anzeige des Elementes. In SVG 1.1 ist die Angabe des Attributes erforderlich, sonst oder bei einem negativen Wert liegt ein Fehler vor, der zum Abbruch der Anzeige des Dokumentes führt. Wenn der Attributwert in SVG tiny 1.2 nicht angegeben oder negativ ist, wird 0 angenommen.

Die Attribute sind animierbar.

Attribute aus dem Namensraum XLink, insbesondere href

Bearbeiten

In SVG tiny 1.2 dient das Attribut href aus dem Namensraum XLink dazu, eine externe Datei zu referenzieren, welche in das foreignObject eingebettet wird. Damit sind auch die anderen Attribute von XLink verfügbar.

Ist href von XLink angegeben, ist das externe Dokument einzubetten und nicht der gegebenenfalls im Element angegeben fremde Inhalt darzustellen. Ist das Attribut nicht angegeben, so ist der Inhalt gegebenenfalls darzustellen.

Das Attribut ist animierbar.

Beispiele

Bearbeiten

XHTML

Bearbeiten

Ein Beispiel in SVG tiny 1.2 mit einem externen Dokument sieht wie folgt aus: 

<foreignObject 
  xmlns:xlink="http://www.w3.org/1999/xlink"
  xlink:href="beispiel.xhtml"
  x="100" y="100" width="400" height="400">
   <title>Beispiel für XHTML in SVG</title>
   <desc>Beispieltext 'Hallo Welt!'.</desc>
</foreignObject>

Da das Element nicht der bedingten Verarbeitung unterliegt, dienen Titel und Beschreibung als Hilfe und SVG-eigene Textalternative, sofern der referenzierte Inhalt nicht darstellbar sein sollte.

Ein Beispiel mit direkt integriertem Inhalt aus dem Namensraum von XHTML und bedingter Verarbeitung mit SVG-Alternative: 

<switch>
<foreignObject 
  requiredExtensions="http://www.w3.org/1999/xhtml"
  x="100" y="100" width="400" height="400">
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <title>Beispiel für XHTML in SVG</title>
     <style type="text/css">
       body {font-family:sans-serif}
       h1 {font-size:130%}
     </style>
   </head>
   <body>
     <h1>Beispiel für XHTML in SVG</h1>
     <p>Hallo Welt!</p>
   </body>
 </html>
</foreignObject>
<text font-family="sans-serif" font-size="20"
      x="120" y="120">Hallo Welt!</text>
</switch>

Leider ist es bei wikibooks nicht möglich, ein Beispiel mit XHTML direkt zum Angucken hochzuladen. Daher noch ein komplettes Beispiel zum Kopieren: 

<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg viewBox="0 0 700 500"
    xmlns="http://www.w3.org/2000/svg" version="1.1"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xml:lang="de">
<title>foreignObject und XHTML</title>
<desc>
'Hallo Welt'-Beispiel mit XHTML in SVG.

Interessant ist für die Brauchbarkeit der Darstellung,
ob der XHTML-Inhalt wirklich nutzbar ist, 
etwa durch Rollbalken, wenn Inhalt übersteht, 
was hier getestet wird.
Eine andere in SVG nicht verfügbare Funktionalität 
ist zum Beispiel die eines Formulares - 
nach dem Absenden sollten die Formulardaten
als GET-Parameter verfügbar sein.
</desc>
<rect x="0" y="0" 
  width="700" height="500" 
  fill="#ffc" />
<g font-family="sans-serif" 
   font-size="20">
<switch>
<foreignObject 
 requiredExtensions="http://www.w3.org/1999/xhtml"
 x="100" y="100" width="500" height="260">
 <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
   <title>Beispiel für XHTML in SVG</title>
   <style type="text/css">
   body {display:block; font-family:sans-serif;
    height:250px; width:500px; overflow: auto}
   h1 {display:block; font-size:130%}
   p,div {display:block}
   </style>
  </head>
  <body>
   <h1>Beispiel für XHTML in SVG</h1>
   <p>Hallo Welt!</p>

   <div>
    <form action="" method="get" target="_blank">
     <p>Text:<input name="Text" type="text" 
        size="10" maxlength="40" /></p>
     <p>Mehr Text:<textarea name="Mehr_Text" 
        cols="10" rows="2"></textarea></p>
     <p>Auswahl:
      <select name="Auswahl" size="1">
       <option>A</option>
       <option>B</option>
       <option>C</option>
       <option>D</option>
       <option>E</option>
      </select>
     </p>
     <p>Radio:
      <input type="radio" name="Radio" 
       value="1"/>1
      <input type="radio" name="Radio" 
       value="2"/>2
      <input type="radio" name="Radio" 
       value="3"/>3
     </p>
     <p>Auswahl:
      <input type="checkbox" name="checkbox" 
       value="!"/>!
      <input type="checkbox" name="checkbox" 
       value="?"/>?
      <input type="checkbox" name="checkbox" 
       value="%"/>%
     </p>
     <p>
      <input type="hidden" 
       name="versteckt" value="guckguck" />
      <input type="submit" 
       value="Absenden " />
     </p>
    </form>
   </div>
  </body>
 </html>
</foreignObject>
<text font-family="sans-serif" 
      font-size="20"
      x="120" y="120">Hallo Welt!</text>
</switch>
</g>
</svg>

SMIL

Bearbeiten

Beispiel mit SMIL mit bedingter Verarbeitung mit SVG-Alternative: 

<switch xmlns:xlink="http://www.w3.org/1999/xlink">
<foreignObject 
  requiredExtensions="http://www.w3.org/ns/SMIL"
  x="100" y="100" width="400" height="400">
  <smil version="3.0" 
   xmlns="http://www.w3.org/ns/SMIL" 
   baseProfile="Language">
   <body>
    <seq begin="3s">
     <img src="erstesbild.png"
      alt="Bild 1" dur="10s" 
      end="click;activate" />
     <img src="zweitesbild.png"
      alt="Bild 2" dur="10s" 
      end="click;activate" />
     <img src="drittesbild.png"
      alt="Bild 3" dur="10s" 
      end="click;activate" />
    </seq>
   </body>
  </smil>
</foreignObject>
<g>
  <image 
   xlink:href="drittesbild.png" 
   xlink:title="Bild 3"
   width="400" height="300" display="none">
   <set id="s3" attributeName="display"
    to="inline" begin="s2.end" 
    end="click;activate" dur="10s" />
  </image>
  <image 
   xlink:href="zweitesbild.png" 
   xlink:title="Bild 2"
   width="400" height="300" display="none">
   <set id="s2" attributeName="display"
    to="inline" begin="s1.end" 
    end="click;activate" dur="10s" />
  </image>
  <image 
   xlink:href="erstesbild.png" 
   xlink:title="Bild 1"
   width="400" height="300" display="none">
   <set id="s1" attributeName="display"
    to="inline" begin="3s" 
    end="click;activate" dur="10s" />
  </image>
</g>
</switch>

Das wäre zum Beispiel auch eine Möglichkeit, formal korrekt Audio- und Videodateien in SVG 1.1 einzubinden, indem die entsprechenden Elemente audio und video von SMIL genutzt werden, welche im Namensraum von SVG erst mit Version SVG tiny 1.2 verfügbar sind. 

<switch 
 xmlns:xlink="http://www.w3.org/1999/xlink">
<foreignObject 
 requiredExtensions="http://www.w3.org/ns/SMIL"
 x="100" y="100" width="400" height="400">
 <smil version="3.0" 
  xmlns="http://www.w3.org/ns/SMIL"
  baseProfile="Language">
  <body>
   <seq begin="3s">
    <video src="erstesvideo.ogv"
     alt="Video 1" dur="200s" 
     end="click;activate" />
    <video src="zweitesvideo.ogv"
     alt="Video 2" dur="200s" 
     end="click;activate" />
    <video src="drittesvideo.ogv"
     alt="Video 3" dur="200s" 
     end="click;activate" />
   </seq>
  </body>
 </smil>
</foreignObject>
<g>
  <a xlink:href="erstesvideo.ogv" 
   target="_blank" title="Zum Video 1">
   <image xlink:href="erstesbild.png" 
    xlink:title="Bild 1"
    width="40" height="30" />
  </a>
  <a xlink:href="zweitesvideo.ogv" 
   target="_blank" title="Zum Video 2">
   <image xlink:href="zweitesbild.png" 
    xlink:title="Bild 2"
    x="50" width="40" height="30" />
  </a>
  <a xlink:href="drittesvideo.ogv" 
   target="_blank" title="Zum Video 3">
   <image xlink:href="drittesbild.png" 
    xlink:title="Bild 3"
    x="100" width="40" height="30" />
  </a>
</g>
</switch>

DAISY

Bearbeiten
 
Ich habe dich so lieb (Joachim Ringelnatz)

Oder ein Beispiel im Forma DAISY, hier ein Gedicht von Joachim Ringelnatz. Weil DAISY kein eigenes Element style hat, wird zur Dekoration entweder das von SVG verwendet oder eine externe Stilvorlage mit einer Stilvorlagenverarbeitungsanweisung referenziert. Allerdings hat DAISY wie auch LML im Gegensatz zu etwa XHTML Elemente zur Auszeichnung von Gedichten, weswegen diese Formate bei solchem Inhalt semantisch reichhaltiger als XHTML sind und daher diesem vorzuziehen. Andererseits ist die Wahrscheinlichkeit einer Interpretation geringer. Da es sich wiederum im folgenden Beispiel nur um ausgezeichneten und dekorierten Text ohne besondere technische Funktionalität handelt, kann es vorteilhaft sein, auf die bedingte Verarbeitung zu verzichten. In diesem Falle ist die Alternative lediglich ein einfacher Verweis zu einer anderen Quelle für das Gedicht. 

<g font-family="sans-serif" 
   font-size="20">
<switch 
 xmlns:xlink="http://www.w3.org/1999/xlink">
<foreignObject 
 requiredExtensions="http://www.daisy.org/z3986/2005/dtbook/"
   x="100" y="100" width="600" height="800">
<dtbook version="2005-3" 
 xmlns="http://www.daisy.org/z3986/2005/dtbook/" 
 xml:lang="de">
 <head 
  profile="http://dublincore.org/documents/2008/08/04/dc-html/">
  <link rel="schema.dc" 
   href="http://purl.org/dc/elements/1.1/" />
  <meta name="dc:identifier" 
content="wikibooks;2010-04-29;Ringelnatz;Ich_habe_dich_so_lieb" />
  <meta name="dc:relation" 
   content="http://de.wikisource.org/wiki/Ich_habe_dich_so_lieb"/>
  <meta name="dc:title" content="Ich habe dich so lieb"/>
  <meta name="dc:creator" content="Joachim Ringelnatz"/>
  <meta name="dc:publisher" content="Dr. Olaf Hoffmann"/>
  <meta name="dc:date" content="2010-04-29"/>
  <meta name="dc:type" content="Text"/>
  <meta name="dc:format" content="ANSI/NISO Z39.86-2005"/>
 </head>
 <book><bodymatter><level>
  <poem>
    <title>Ich habe dich so lieb</title>
    <author>Joachim Ringelnatz</author>
    <byline>aus: Allerdings</byline>
    <dateline>1928</dateline>
    <linegroup>
      <line>Ich habe dich so lieb!</line>
      <line>Ich würde dir ohne Bedenken</line>
      <line>Eine Kachel aus meinem Ofen</line>
      <line>Schenken.</line>
    </linegroup>
    <linegroup>
      <line>Ich habe dir nichts getan.</line>
      <line>Nun ist mir traurig zu Mut.</line>
      <line>An den Hängen der Eisenbahn</line>
      <line>Leuchtet der Ginster so gut.</line>
    </linegroup>
    <linegroup>
      <line>Vorbei - verjährt -</line>
      <line>Doch nimmer vergessen.</line>
      <line>Ich reise.</line>
      <line>Alles, was lange währt,</line>
      <line>Ist leise.</line>
    </linegroup>
    <linegroup>
      <line>Die Zeit entstellt</line>
      <line>Alle Lebewesen.</line>
      <line>Ein Hund bellt.</line>
      <line>Er kann nicht lesen.</line>
      <line>Er kann nicht schreiben.</line>
      <line>Wir können nicht bleiben.</line>
    </linegroup>
    <linegroup>
      <line>Ich lache.</line>
      <line>Die Löcher sind die Hauptsache</line>
      <line>An einem Sieb.</line>
    </linegroup>
    <linegroup>
      <line>Ich habe dich so lieb.</line>
    </linegroup>
  </poem>
  </level></bodymatter></book>
</dtbook>
</foreignObject>
<a 
 xlink:href="http://de.wikisource.org/wiki/Ich_habe_dich_so_lieb"
 xlink:title="Externer Verweis 
in neuem Fenster zu de.wikisource.org" 
 target="_blank">
<text x="120" y="120">"Ich habe dich so lieb";
Joachim Ringelnatz, 1928</text>
</a>
</switch>
</g>

Ausgeschmücktes Beispiel: Ich habe dich so lieb (Joachim Ringelnatz)

MathML

Bearbeiten
 
Weglänge

Ein Beispiel mit MathML und bedingter Verarbeitung mit Alternative in SVG: 

<g font-family="sans-serif" 
   font-size="20">
<switch>
<foreignObject 
 requiredExtensions="http://www.w3.org/1998/Math/MathML"
 x="50" y="50" width="1100" height="100">
<math xmlns="http://www.w3.org/1998/Math/MathML">
  <mtext>Sei (x(t),y(t)) ein Pfad 
 mit einer Parametrisierung mit t von 0 bis 1, 
 dann ist die Weglänge L=</mtext>
  <msubsup>
    <mo>&#8747;</mo>
    <mn>0</mn>
    <mn>1</mn>
  </msubsup>
  <msqrt>
    <msup>
      <mrow>
        <mo>(</mo>
        <mfrac>
          <mi>dx</mi>
          <mi>dt</mi>
        </mfrac>
        <mo>)</mo>
      </mrow>
      <mn>2</mn>
    </msup>
    <mo>+</mo>
    <msup>
      <mrow>
        <mo>(</mo>
        <mfrac>
          <mi>dy</mi>
          <mi>dt</mi>
        </mfrac>
        <mo>)</mo>
      </mrow>
      <mn>2</mn>
    </msup>
  </msqrt>
  <mi>dt</mi>
</math>
</foreignObject>
<g>
<text x="50" y="50">Sei (x(t),y(t)) ein Pfad
mit einer Parametrisierung mit t von 0 bis 1,
dann ist die Weglänge</text>
<text x="50" y="100">L=<tspan baseline-shift="sub" 
 font-size="10">0</tspan>&#8747;<tspan
 baseline-shift="160%" 
 font-size="10">1</tspan> dt ((dx/dt)<tspan 
 baseline-shift="super"
 font-size="10">2</tspan> + (dy/dt)<tspan 
 baseline-shift="super"
 font-size="10">2</tspan>)<tspan baseline-shift="10" 
 font-size="10">1/2</tspan></text>
</g>
</switch>
</g>

Ausgeschmücktes Beispiel: Weglänge

Verweise

Bearbeiten
  • CDF (gemischte Formate)



Abgerufen von „https://de.wikibooks.org/w/index.php?title=SVG/_Erweiterbarkeit&oldid=763489“