SVG inHTMLPage

SVG-Dateien können über die folgenden Tags in HTML-Dokumente eingebettet werden: <img>, <object> oder <iframe>.

SVG-Code kann direkt in HTML-Seiten eingebettet werden, oder Sie können direkt auf eine SVG-Datei verlinken.

Verwendung des <img>-Tags

Mittels<img>-Tag können SVG-Bilder als Bilder in HTML-Seiten eingebettet werden. Sie können das src-Attribut verwenden, um den Pfad der SVG-Datei anzugeben, und Sie können außerdem die Attribute width und height festlegen, um die Breite und Höhe des Bildes anzugeben.

Syntax:

<img src="example.svg.html" alt="SVG Image" width="200" height="200">

Verwendung des <object>-Tags

<object>Der Tag wird verwendet, um externe Ressourcen in eine HTML-Seite einzubetten. Sie können dasdataAttribut verwenden, um den Pfad der SVG-Datei anzugeben,typeAttribut zur Angabe des MIME-Typs der Ressource.

Browser, die SVG unterstützen, zeigen das SVG-Bild direkt an; Browser, die es nicht unterstützen, zeigen alternativen Inhalt an.

Syntax:

<object data="example.svg" type="image/svg+xml" width="200" height="200">
  Your browser does not support SVG
</object>

Verwendung des <iframe>-Tags

<iframe>Das Tag wird verwendet, um ein weiteres HTML-Dokument in eine HTML-Seite einzubetten. Sie können dassrcAttribut verwenden, um den Pfad der SVG-Datei anzugeben, und legen Sie diewidthundheightAttribute fest, um die Breite und Höhe des iframe anzugeben.

Syntax:

<iframe src="example.svg.html" width="200" height="200"></iframe>

SVG-Code direkt in HTML einbetten

Um SVG-Code direkt in eine HTML-Seite einzubetten, kann der SVG-Code in das<body>Tag oder andere geeignete Stellen eingefügt werden.

Dieser Ansatz mischt SVG-Bilder mit HTML-Inhalt, sodass SVG-Bilder direkt in der HTML-Seite bearbeitet und angepasst werden können.

Beispiel

<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>

Selbst ausprobieren »

Verlinkung zu einer SVG-Datei

Sie können auch das<a>Tag verwenden, um auf eine SVG-Datei zu verlinken:

<a href="circle1.svg.html">查看 SVG 文件</a>

Ergebnis:

Verwenden eines CSS-Hintergrundbilds

Mithilfe des CSS-background-imageAttributs können Sie ein SVG-Bild als Hintergrundbild in ein HTML-Element einbetten. Diese Methode eignet sich für Situationen, in denen Sie den Stil des Hintergrundbilds in CSS steuern müssen.

Beispiel

.svg-bg { width: 200px; height: 200px; background-image: url('circle1.svg'); background-size: cover; }

Selbst ausprobieren »
Weitere Erweiterungen