WIE MAN SVG-BILDER IN CSS UND HTML VERWENDET

SVG steht für skalierbare Vektorgrafiken. Es ist eine einzigartige Art von Bildformat für vektorbasierte Grafiken, die in Extensible Markup Language (XML) geschrieben wurden.

In diesem Tutorial erkläre ich, warum Sie SVG-Bilder verwenden möchten und wie Sie diese in CSS und HTML verwenden können.

Warum sollten Sie SVG-Bilder verwenden?

Es gibt eine Reihe von Gründen für die Verwendung von SVG-Bildern. Einige davon sind:

SVG-Bilder verlieren beim Zoomen oder Ändern der Größe nicht ihre Qualität.
Sie können mit einer IDE oder einem Texteditor erstellt und bearbeitet werden.
Sie sind zugänglich und animierbar.
Sie haben eine geringe Dateigröße und sind hoch skalierbar.
Und sie können durchsucht, indiziert, geskriptet und komprimiert werden.

Sehen wir uns nun an, wie Sie tatsächlich mit SVG-Bildern arbeiten können.

So laden Sie das in diesem Tutorial verwendete SVG-Bild herunter

Wenn Sie mit dem SVG-Bild arbeiten möchten, das ich in diesem Tutorial verwendet habe, befolgen Sie die Schritte (und das Diagramm) unten, um es herunterzuladen.

Gehe zu unDraw .
Ändern Sie die Hintergrundfarbe in Gelb.
Suchen Sie im Suchfeld nach dem Wort glücklich .

unDraw

Klicken Sie auf das Bild mit dem Namen Gute Neuigkeiten .
Klicken Sie im Popup-Fenster auf das Laden Sie SVG für Ihre Projekte herunter Taste.

Laden Sie die SVG-Datei herunter

Wenn Sie die obigen Schritte richtig befolgt haben, sollte sich das SVG-Bild jetzt auf Ihrem Computer befinden.

Öffnen Sie nun das SVG-Bild in Ihrer bevorzugten IDE oder Ihrem bevorzugten Texteditor. Benennen Sie es um in happy.svg oder welchen Namen Sie bevorzugen.

Es gibt verschiedene Möglichkeiten, SVG-Bilder in CSS und HTML zu verwenden. In diesem Tutorial werden wir sechs verschiedene Methoden untersuchen.

#svg #css #html #web-entwicklung #entwickler

www.freecodecamp.org