SVG-Grafikreferenzen im HTML -Dokument

HTML selbst bietet kein spezielles Element für Vektorgrafik an. Seit HTML5 gibt es jedoch Möglichkeiten, Vektorgrafik in HTML einzubinden. Die einfachste besteht darin, SVG-Dateien als Grafikreferenz einzubinden. HTML5 erlaubt außerdem, SVG direkt in HTML einzubinden. Eine weitere basiert auf einem in HTML5 neuen Element, namens canvas. Dieses Element ermöglicht das dynamische grafische Gestalten eines definierten Bereichs mit Hilfe von JavaScript.

Leider gibt es trotz deutlicher Fortschritte noch immer keine Lösung, die zuverlässig in allen noch relevanten Browsern funktioniert. Die Hauptschuld daran trägt der Internet Explorer. Microsoft hat sich bis einschließlich Version 8 seines Browsers geweigert, die hier vorgestellten und von HTML5 vorgesehenen Möglichkeiten zu implementieren. Grund dafür ist, dass Microsoft bis zuletzt sein hauseigenes Vektorgrafikformat VML durchsetzen wollte. Erst mit der Internet-Explorer-Version 9 unterstützt auch Microsoft die von HTML5 vorgesehenen Möglichkeiten für Vektorgrafik.

Die einfachste Art und Weise, Vektorgrafiken in HTML einzubinden, ist seit HTML5 die Verwendung von SVG-Grafiken im <img>-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.

Beispiel:

<h1>Peptid mit Aminosäuren</h1>
<img src="/peptid.svg" width="600" height="492">

Erläuterung

Es handelt sich um ganz gewöhnliche Grafikreferenzen. 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 <img>-Tag durch width und height direkt anzugeben, was dem Browser das Laden der Seite erleichtert.

Weitere Hinweise

Im obigen Beispiel enthält das <img>-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.