SVG/ SVG im Web
Aus Wikibooks
Es gibt viele verschiedene Möglichkeiten, das Format SVG einzusetzen, hier einmal eine kurze Vorstellung der Wichtigsten
Inhaltsverzeichnis |
[Bearbeiten] Über XHTML
Das X von XHTML kommt von XML, weil es eine XML-Seitenbeschreibungssprache ist. Das X in XML und XHTML steht für eXtensible, weil es erweiterbar ist. Was das bedeutet, sehen wir hier:
<?xml version="1.0" encoding="utf-8"?> <html xmlns="http://www.w3.org/1999/xhtml" version="XHTML+RDFa 1.0" xml:lang="de"> <head> <title>Freude schöner Götterfunken…</title> </head> <body> <h1>Freude schöner Götterfunken…</h1> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="810" height="540"> <defs> <g id="s"> <g id="c"> <path id="t" d="M0,0v1h0.5z" transform="translate(0,-1)rotate(18)"/> <use xlink:href="#t" transform="scale(-1,1)"/> </g> <g id="a"> <use xlink:href="#c" transform="rotate(72)"/> <use xlink:href="#c" transform="rotate(144)"/> </g> <use xlink:href="#a" transform="scale(-1,1)"/> </g> </defs> <rect fill="#039" width="810" height="540"/> <g fill="#fc0" transform="scale(30)translate(13.5,9)"> <use xlink:href="#s" y="-6"/> <use xlink:href="#s" y="6"/> <g id="l"> <use xlink:href="#s" x="-6"/> <use xlink:href="#s" transform="rotate(150)translate(0,6)rotate(66)"/> <use xlink:href="#s" transform="rotate(120)translate(0,6)rotate(24)"/> <use xlink:href="#s" transform="rotate(60)translate(0,6)rotate(12)"/> <use xlink:href="#s" transform="rotate(30)translate(0,6)rotate(42)"/> </g> <use xlink:href="#l" transform="scale(-1,1)"/> </g> </svg> </body> </html>
Wunderschön einfach nicht? SVG einfach in das XHTML kopiert und fertig, schon funktioniert es in allen Darstellungsprogrammen, die SVG und XHTML interpretieren. Zu gut um wahr zu sein? Nun, wenigstens interpretiert der Microsoft-Internet-Explorer (bis Version 8) weder SVG noch XHTML. Formal korrekt ist ein solches Dokument immer als application/xhtml+xml oder application/xml auszuliefern. Ohne Angabe eines doctype mag der Microsoft-Internet-Explorer im zweiten Falle das Dokument sogar als XML interpretieren, weiß dann aber nicht, was die Elemente in den Namensräumen von XHTML und SVG zu bedeuten haben.
Es ist teilweise auch üblich, XHTML wie HTML als text/html auszuliefern, das ist dann allerdings eben fehlerhaftes HTML und kein XHTML mehr. Wenn man es aber geschickt genug macht, fallen die Fehler aber nicht auf, weil der HTML-Markierungssuppen-parser mit kleineren Fehlern ganz gut zurechtkommt und sie vor dem Betrachter verbirgt. Allerdings ist HTML4 nicht erweiterbar, so daß darin kein SVG vorkommen kann. Das derzeit (2009) in Arbeit befindliche HTML5 sieht zwar das Einbetten von MathML und SVG in HTML5 vor, liegt aber erst in einem Arbeitsentwurf vor und ist noch keine Spezifikation. Das ändert allerdings nichts daran, daß Programme, die SVG nicht interpretieren, auch innerhalb von HTML5 nicht von alleine beginnen werden, dies zu tun.
Mehr zu XHTML unter Websiteentwicklung: XHTML
[Bearbeiten] WebSVG: SVG auch in HTML und im Microsoft Internet Explorer
Eine Andere Möglichkeit, SVGs im Web direkt darzustellen, ist WebSVG und Flash. Einfach unter http://code.google.com/p/svgweb/ das Paket laden. Auf den Server brauchen wir nur /src. Unser Beispiel von oben sieht mit WebSVG als HTML5-Dokument so aus (es handelt sich um kein gültiges HTML4-Dokument!):
<!DOCTYPE html> <html> <head> <title>Freude schöner Götterfunken…</title> </head> <body> <head> <meta name="svg.render.forceflash" content="true"> <script src="./src/svg.js" data-path="./src/" data-debug="true"></script> </head> <body> <h1>Freude schöner Götterfunken…</h1> <script type="image/svg+xml"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="810" height="540"> <defs> <g id="s"> <g id="c"> <path id="t" d="M0,0v1h0.5z" transform="translate(0,-1)rotate(18)"/> <use xlink:href="#t" transform="scale(-1,1)"/> </g> <g id="a"> <use xlink:href="#c" transform="rotate(72)"/> <use xlink:href="#c" transform="rotate(144)"/> </g> <use xlink:href="#a" transform="scale(-1,1)"/> </g> </defs> <rect fill="#039" width="810" height="540"/> <g fill="#fc0" transform="scale(30)translate(13.5,9)"> <use xlink:href="#s" y="-6"/> <use xlink:href="#s" y="6"/> <g id="l"> <use xlink:href="#s" x="-6"/> <use xlink:href="#s" transform="rotate(150)translate(0,6)rotate(66)"/> <use xlink:href="#s" transform="rotate(120)translate(0,6)rotate(24)"/> <use xlink:href="#s" transform="rotate(60)translate(0,6)rotate(12)"/> <use xlink:href="#s" transform="rotate(30)translate(0,6)rotate(42)"/> </g> <use xlink:href="#l" transform="scale(-1,1)"/> </g> </svg> </script> </body> </html>
Achtung!: WebSVG funktioniert nicht lokal wegen flash. Die Dateien müssen also auf einem Server liegen, weitere Hinweise gibt es in der WebSVG-Dokumentation.
Unser Beispiel hier verwendet auf allen browsern flash für die Darstellung. Zu beachten ist dabei, daß dies ein HTML5-Dokument ist, darin ist es nicht notwendig, SVG in einem script-Element zu verstecken (siehe weiter unten), noch ist es an sich notwendig, das mittels Skripten zu interpretieren, das kann in HTML5 auch so funktionieren. Da HTML5 derzeit (2009) nur ein Arbeitsentwurf ist, unterliegt diese Version auch steten Änderungen, eignet sich also nicht für stabile Dokumente. Die Transformation in ein flash-Dokument kann zudem bestenfalls funktionieren, wenn beim Betrachter java-script aktiviert ist und die Interpretation von flash aktiviert ist, stellt als keine Methode dar, bei der der Autor gut abschätzen kann, was beim Betrachter wirklich angzeigt wird. Auch gibt es Teilbereiche von SVG, die mittels flash nicht nachvollziehbar sind, eignet sich also bestenfalls für eine Teilmenge von SVG-Dokumenten. Die Interpretation von SVG als Skriptsprache innerhalb des Skriptelementes ist jedenfalls eine sehr gewagte Interpretation von SVG, die mindestens semantisch fragwürdig ist, hier aber immerhin andeutet, daß das SVG mehr dekorativen und keinen inhaltlich relevanten Charakter hat, weswegen eine Interpretation auch nur optional zu sein braucht.
[Bearbeiten] Einbetten einer SVG-Datei
Damit ein Darstellungsprogramm in (X)HTML selbst entscheiden kann, ob es das SVG selbst interpretiert oder ob wohlmöglich ein plugin verwendet werden kann, empfiehlt sich die Verwendung des Elementes object. Als Inhalt des Elementes kann ein Ersatzbild oder eine Textalternative angegeben werden, für jene browser, die kein SVG unterstützen. Mit einem direkten Verweis auf die SVG-Datei darin erhält der Betrachter ferner die Chance, sich das SVG mit einem externen Programm anzusehen.
<object type="image/svg+xml" data="test.svg"> <p><img src="test.png" alt="Textäquivalent zum PNG" /></p> <p>Offenbar ist kein eingebetteter Betrachter für SVG verfügbar, mit einem externen Programm versuchen: <a href="test.svg" type="image/svg+xml">Test</a></p> </object>
Wenn beim Microsoft-Internet-Explorer indes ein bestimmtes sogenanntes service-pack2 installiert ist und der Nutzer das SVG-plugin von adobe installiert hat, ist hingegen bekannt, daß der Microsoft-Internet-Explorer die Anzeige des SVG im object sabotieren wird. Insofern kann es auch sinnvoll sein, den direkten Verweis auf die SVG-Datei außerhalb des object anzuordnen, denn dann funktioniert das adobe-plugin ohne Einbettung auch im Microsoft-Internet-Explorer.
Es ist natürlich auch möglich, ein SVG als "eigene Webseite" mit dem iframe-Element einzubetten. Der Inhalt des iframe kann analog zum object verwendet werden.
<iframe src="test.svg" width="350" height="176" name="imap"> Alternativtext oder -bild </iframe>
Wie im Standard festgelegt, sollte ein SVG auch mit dem Element img referenziert unterstützt werden, das ist bislang (2009) aber nur mit Opera nachvollziehbar, aus Sicherheitsgründen funktioniert dann aber kein ecma-script im SVG.
<img src="test.svg" alt="Textäquivalent zur SVG-Testdatei" />
[Bearbeiten] SVG in HTML5
Und so ist die Verwendung von SVG in HTML5 geplant:
<!doctype html> <html> <head> <title>SVG eingebettet in text/html</title> </head> <body> <p> Ein grüner Kreis: <svg> <circle r="50" cx="50" cy="50" fill="green"/> </svg> </p> </body> </html>
Einfacher geht es wohl nicht mehr. Allerdings ist es auch bei HTML5 keine Voraussetzung, daß ein HTML5-parser SVG oder MathML interpretieren können muß. Es ist lediglich formal erstmals für eine HTML-Version überhaupt möglich, MathML oder SVG darin einzubetten.
[Bearbeiten] Als Java Applet
Die Apache-Organisation bietet mit Batik/Squiggle eine Java-Anwendung an, mit der ebenfalls SVG dargestellt werden kann oder eine Konversion von SVG in Pixelgraphik erfolgen kann, sofern das inhaltlich möglich ist. Batik/Squiggle interpretiert bereits größere Teilbereiche von SVG1.1, hat aber ebenso wie andere Programme teils noch größere Lücken oder Fehler in der Interpretation.
