Verwenden Sie die SVG-Bilddatei in HTML und CSS
-
Verwenden Sie das Tag
<img>, um der Webseite eine SVG-Datei hinzuzufügen -
Verwenden Sie das Tag
<object>, um der Webseite eine SVG-Datei hinzuzufügen -
Verwenden Sie das Tag
<embed>, um der Webseite eine SVG-Datei hinzuzufügen -
Verwenden Sie das Tag
<iframe>, um der Webseite eine SVG-Datei hinzuzufügen -
Verwenden Sie die CSS-Eigenschaft
background-image, um eine SVG-Datei als Hintergrund hinzuzufügen
In diesem Artikel wurde das Einbetten von SVG-Bildern auf Webseiten mit HTML und CSS vorgestellt.
Die SVG-Datei ist ein Vektorbild und ihre Verwendung hat viele Vorteile gegenüber der Verwendung von png, jpeg, jpg oder anderen Bilddateien. Der Hauptvorteil der SVG-Datei besteht darin, dass sie auflösungsunabhängig ist, was bedeutet, dass die Auflösung oder Qualität des Bildes unverändert bleibt, wenn wir sie auf eine beliebige Größe skalieren.
Außerdem ist die SVG-Dateigröße sehr kompakt, was die Ladezeit der Webseiten verkürzt. Wir können die SVG-Datei auch im Texteditor bearbeiten und SEO-freundlich gestalten, indem wir schlüsselwortbezogenen Text hinzufügen.
Darüber hinaus können wir SVG-Dateien durch Skripting animieren, was ebenfalls einer der besten Vorteile der Verwendung von SVG-Dateien ist.
Verwenden Sie das Tag <img>, um der Webseite eine SVG-Datei hinzuzufügen
In diesem Abschnitt haben wir das HTML-Tag <img> verwendet, um SVG-Bilddateien auf der Webseite darzustellen. Wir haben zwei verschiedene Icons aus dem svgrepo genommen und dessen URL in den src-Tag des <img>-Tags eingebettet.
Beispielcode:
<img src="https://www.svgrepo.com/show/426102/camera.svg" alt="camera icon">
<img src="https://www.svgrepo.com/show/426942/transport.svg" alt="car icon">
Im obigen Ausgabebild können Benutzer das SVG-Symbol der Kamera und des Autos sehen.
Verwenden Sie das Tag <object>, um der Webseite eine SVG-Datei hinzuzufügen
Mit dem HTML-Tag <object> können Benutzer Multimedia wie Audio, Video oder PDFs auf der Webseite wiedergeben.
Wir haben zwei Attribute des object-Tags verwendet, um die SVG-Datei anzuzeigen. Das Attribut data von <object> übernimmt den lokalen Pfad oder die URL der SVG-Datei.
Das Attribut type des Tags <object> übernimmt den Dateityp, und wir verwenden image/svg+xml als Wert, um die SVG-Datei zu rendern.
Hier haben wir Kamera- und Autosymbole mit dem object-Tag gerendert.
<object data="https://www.svgrepo.com/show/426102/camera.svg" type="image/svg+xml"></object>
<object data="https://www.svgrepo.com/show/426942/transport.svg" type="image/svg+xml">
Wir können das Fallback-Bild auch innerhalb des <object>-Tags hinzufügen. Im folgenden Beispiel haben wir die fehlerhafte URL des Kamerasymbols genommen und das Fallback-Bild hinzugefügt.
Wenn Benutzer jetzt den folgenden Code ausführen, sehen sie nur ein Fallback-Bild, da die URL der SVG-Datei beschädigt ist.
<object data="https:/w.svgrepo.com/show/426102/camera.svg" type="image/svg+xml">
<img src="https://yt3.ggpht.com/ytc/AMLnZu-K8Cu9BcdyoXT2AeAi7TJ744ADUCQyYblAoH9F=s900-c-k-c0x00ffffff-no-rj"
style="height: 50px;width: 50px;" />
</object>
<object data="https://www.svgrepo.com/show/426942/transport.svg" type="image/svg+xml" >
In der obigen Ausgabe können Benutzer sehen, dass das Logo von DelftStack angezeigt wird, das eher ein Fallback-Bild als ein Kamerasymbol ist.
Verwenden Sie das Tag <embed>, um der Webseite eine SVG-Datei hinzuzufügen
Das Tag <embed> ermöglicht es uns, andere Anwendungen in die Webseite einzubetten. Wir verwenden die Attribute src und type mit dem Tag <embed>, um die SVG-Datei in die Webseite einzubetten.
Das Attribut src übernimmt die URL oder den Pfad der SVG-Datei und type definiert den Multimedia-Typ.
Hier haben wir zwei SVG-Icons mit dem <embed>-Tag in die Webseite eingebettet.
<embed src="https://www.svgrepo.com/show/426102/camera.svg" type="image/svg+xml">
<embed src="https://www.svgrepo.com/show/426942/transport.svg" type="image/svg+xml" >
Verwenden Sie das Tag <iframe>, um der Webseite eine SVG-Datei hinzuzufügen
Mit dem Tag <iframe> können Entwickler den Inline-Frame in das Dokument einbetten. Es bietet einen anderen Rahmen oder Block für externe Ressourcen wie Audio, Video oder Multimedia.
Hier haben wir das Tag <iframe> verwendet und die URL der SVG-Datei innerhalb des Attributs src hinzugefügt. Außerdem müssen wir hier nicht angeben, welche Art von Multimedia wir zeigen möchten, wie die Tags <embed> und <object>.
<iframe src="https://www.svgrepo.com/show/426102/camera.svg" height="50px">
Die obige Ausgabe zeigt, dass das Kamerasymbol in separate Blöcke oder Frames eingebettet ist.
Verwenden Sie die CSS-Eigenschaft background-image, um eine SVG-Datei als Hintergrund hinzuzufügen
Mit der CSS-Eigenschaft background-image können wir das Hintergrundbild für das jeweilige Element festlegen. Hier haben wir die SVG-Datei als Hintergrundbild eingestellt.
Im folgenden Beispiel haben wir das Tag <h3> erstellt und etwas Text hinzugefügt. Außerdem haben wir dafür ein SVG-Hintergrundbild hinzugefügt, indem wir die CSS-Eigenschaft background-image verwenden.
Außerdem haben wir die Farbe für den Text von <h3> hinzugefügt und die background-repeat: no-repeat; gesetzt. um die Wiederholung des Hintergrundbildes zu vermeiden.
<h3>welcome to DelftStack!</h3>
h3{
background-image: url("https://www.svgrepo.com/show/426102/camera.svg");
background-repeat: no-repeat;
color: red;
}
In diesem Artikel haben wir die verschiedenen Methoden zum Rendern der SVG-Datei mit HTML und CSS kennengelernt. Benutzer können die SVG-Datei jedoch auch direkt mit dem <SVG>-Tag von HTML zur Webseite hinzufügen.
Mit den Tags <img> und <object> können Benutzer das Fallback-Bild festlegen, wenn das Laden der SVG-Datei fehlschlägt. Benutzer können das Tag <embed> oder <iframe> verwenden, um die SVG-Bilddatei in einen separaten Block einzubetten.
Es wird jedoch nicht empfohlen, das <iframe> zu verwenden, da es die SEO der Webseite beeinflusst, aber Benutzer können stattdessen das <object> oder das Inline <svg> verwenden.
