SVG in HTML
SVG-Dateien können über die folgenden Tags in HTML-Dokumente eingebettet werden: <embed>, <object> oder <iframe>.
SVG-Code kann direkt in die HTML-Seite eingebettet werden, oder Sie können direkt an der SVG-Datei verknüpfen.
Mit der <embed> -Tag
<Embed>:
- Vorteile: Alle gängigen Browsern unterstützt werden, und ermöglicht Scripting
- Nachteile: Nicht für den Einsatz in HTML4 und XHTML empfohlen (aber in HTML5 erlaubt)
Syntax:
<embed src="circle1.svg" type="image/svg+xml" />
Ergebnisse:
Mit dem <object> -Tag
<Objekt>:
- Vorteile: Alle gängigen Browser werden unterstützt, und die Unterstützung für HTML4, XHTML und HTML5-Standard
- Nachteile: nicht erlaubt die Verwendung von Skripten.
Syntax:
<object data="circle1.svg"
type="image/svg+xml"></object>
Ergebnisse:
Verwenden Sie <iframe> -Tag
<Iframe>:
- Vorteile: Alle gängigen Browsern unterstützt werden, und ermöglicht Scripting
- Nachteile: Nicht für den Einsatz in HTML4 und XHTML empfohlen (aber in HTML5 erlaubt)
Syntax:
<iframe src="circle1.svg"></iframe>
Ergebnisse:
SVG direkt in HTML-Code eingebettet
Firefox, Internet Explorer9, Google Chrome und Safari, können Sie SVG-Code direkt in HTML einbetten.
Hinweis: SVG kann direkt in Opera eingebettet werden.
Beispiele
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>
</body>
</html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>
</body>
</html>
Versuchen »
Link zu SVG-Dateien
Sie können auch einen Link zu einem Label mit <a> SVG-Dateien: Link zur SVG-Dateien
Sie können auch einen Link zu einem Label mit <a> SVG-Dateien:
<a href="circle1.svg">View SVG file</a>
Ergebnisse:
Ansicht SVG - Datei