Microsoft die von HTML5 vorgesehenen Möglichkeiten für Vektorgrafik. 7.2.1 SVG-Grafikreferenzen Die einfachste Art und Weise, Vektorgrafiken in HTML einzubinden, ist seit HTML5 die Verwendung von SVG-Grafiken im -Tag. SVG SVG steht für Scalable Vector Graphics. Es handelt sich um ein XML-basiertes Dateiformat zum Beschreiben von 2D-Vektorgrafik. Die Sprache wird vom W3-Konsortium spezifiziert und ist wie HTML und CSS ein offener, frei verwendbarer Standard. Zum Redaktionszeitpunkt liegt der Sprachstandard 1.1 (Second Edition) als Recommendation (Empfehlung) vor. Version 1.2 ist in Arbeit. Die meisten vektorgrafikfähigen Grafikprogramme unterstützen SVG. Es ist jedoch auch möglich, SVG in Texteditoren zu bearbeiten. Startseite SVG beim W3-Konsortium http://www.w3.org/standards/techs/svg Neuester offizieller Sprachstandard (Recommendation) http://www.w3.org/TR/SVG/ Hervorragende, deutschsprachige Dokumentation zu SVG http://www.selfsvg.info/ Professionelles, OpenSource-basiertes Vektorgrafikprogramm für SVG http://www.inkscape.org/ Beispiel
Peptid mit Aminosäuren
Bild 7.2: Naturwissenschaftliche Schaubilder sind ein typischer Anwendungsbereich für Vektorgrafik. Erläuterung Es handelt sich um ganz gewöhnliche Grafikreferenzen, wie sie bereits in 7.1.1 Pixelgrafik-Referenzen beschrieben wurden. Der einzige Unterschied besteht darin, dass Sie beim src -Attribut anstelle einer PNG-, JPEG- oder GIF-Ressource eine SVG-Ressource notieren. SVG-Dokumente enthalten eigene Angaben darüber, in welcher Pixel-Default-Größe eine Grafik angezeigt werden soll. Wie bei anderen Grafikformaten ist es jedoch vorteilhaft, die Pixel-Ausmaße im -Tag durch width und height direkt anzugeben, was dem Browser das Laden der Seite erleichtert. Weitere Hinweise Im obigen Beispiel enthält das -Tag kein alt -Attribut, da die Grafik den gesamten wesentlichen Inhalt der Webseite enthält. Beim Einbinden von SVG-Grafiken gelten die gleichen Regeln für das alt -Attribut wie bei anderen Grafiken. Referenzinformationen siehe 7.1.1 Pixelgrafik-Referenzen Attributreferenz src="*.svg" :
7.2.2 SVG-Grafiken (direkt eingebettet) XML-Formate, die sich in der Praxis bereits verbreitet haben und das Portfolio möglicher Dokumentdaten sinnvoll ergänzen, können direkt in HTML5 eingebunden werden, und zwar ohne die XML-typische Namensraumdeklaration. Neben MathML für mathematische Formeln (siehe dazu 4.5 Mathematische Formeln ) gehört auch das Vektorgrafikformat SVG zu den XML-Formaten, die Sie direkt in HTML einbinden können. Allerdings ist der Verzicht auf das Namensraumkonzept von XML mit einigen Nachteilen verbunden. So können eingebundene SVG-Grafiken zwar mit dem xmlns -Attribut Namensräume deklarieren, aber vom HTML-Parser werden diese nicht verarbeitet. XML-Präfix-Syntax innerhalb von SVG wird also nicht erkannt. HTML unterscheidet auch nicht zwischen Groß- und Kleinschreibung bei Element- und Attributnamen, SVG als XML-basierte Sprache hingegen wohl. Das ist ein für Browser lösbares Problem, aber konzeptionell eine unsaubere Lösung. Wegen dieser und einiger anderer Probleme ist gerade die direkte Einbindung von SVG in HTML5 noch umstritten. Unumstritten ist dagegen die Einbettung von SVG in XHTML über das dafür vorgesehene Namensraumkonzept, sofern die XHTML-Dokumente von XML-Parsern verarbeitet werden. Deshalb sollen hier beide Varianten an Hand eines Beispiels vorgestellt werden. SVG in HTML5 Sie können in HTML einen Bereich definieren, in dem eine vollständige SVG-Grafik notiert ist. Beispiel
Information
Informationsecke
Erläuterung Zum besseren Verständnis zeigt das obige Beispiel ein vollständiges HTML-Dokument. Um eine SVG-Grafik zu platzieren, notieren Sie an der gewünschten Stelle im Inhalt des HTML-Dokuments einen Bereich, markiert durch
. Innerhalb davon ist SVG-Syntax möglich (siehe dazu weiter unten). Die obige Beispielgrafik definiert
Kostenlos Online Lesen 
