SVG in HTML-Seite

SVG-Dateien können mit folgenden Tags in ein HTML-Dokument eingebettet werden: <embed>, <object> oder <iframe>.

SVG in HTML-Seite

Nun werden Sie drei verschiedene Methoden sehen, wie SVG-Dateien in HTML-Seiten eingebettet werden können.

Verwenden Sie das <embed>-Tag

Das <embed>-Tag wird von allen gängigen Browsern unterstützt und ermöglicht die Verwendung von Skripten.

Anmerkung:Wenn Sie SVG in einer HTML-Seite einbetten, wird das <embed>-Tag von Adobe SVG Viewer empfohlen! Wenn jedoch eine gültige XHTML erstellt werden muss, kann das <embed>-Tag nicht verwendet werden. Es gibt kein <embed>-Tag in jedem HTML-Standard.

Syntax:

<embed src="rect.svg" width="300" height="100" 
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />

Anmerkung:Die Eigenschaft pluginspage zeigt die URL für die Installation des Plugins an.

Verwenden Sie das <object>-Tag

Das <object>-Tag ist ein Standardtag in HTML 4 und wird von allen neueren Browsern unterstützt. Sein Nachteil ist, dass Skripte nicht verwendet werden dürfen.

Anmerkung:Wenn Sie die neueste Version des Adobe SVG Viewer installiert haben, funktioniert das SVG-Datei nicht mit dem <object>-Tag (zumindest nicht im IE)!

Syntax:

<object data="rect.svg" width="300" height="100" 
type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install/" />

Anmerkung:Die Eigenschaft codebase zeigt die URL für den Download des Plugins an.

Verwendung des <iframe>-Tags

Das <iframe>-Tag funktioniert in den meisten Browsern.

Syntax:

<iframe src="rect.svg" width="300" height="100">
</iframe>

Ich erwarte...

Wenn es möglich wäre, SVG-Elemente durch Referenzierung des SVG-Namensraums in HTML-Code einzufügen, wäre das großartig, so wie dies:

<html xmlns:svg="http://www.w3.org/2000/svg">
<body>
<p>This is an HTML paragraph</p>
<svg:svg width="300" height="100" version="1.1" >
<svg:circle cx="100" cy="50" r="40" stroke="black">
stroke-width="2" fill="red" />
</svg:svg>
</body>
</html>