Ändern Sie die Farbe des SVG-Elements in HTML mit CSS

  2. How-To's
  3. CSS Anleitungen
  4. Ändern Sie die Farbe des SVG-Elements in …
Naila Saad Siddiqui 15 Februar 2024
CSS CSS Element
  1. Einführung in SVG
  2. Methoden von SVG
Ändern Sie die Farbe des SVG-Elements in HTML mit CSS

In diesem trivialen Leitfaden geht es um die Verwendung von SVG in HTML-Dokumenten und wie wir es anpassen können, um seine Farbe mithilfe von CSS-Eigenschaften zu ändern. Zu Beginn stellen wir kurz SVG in HTML vor.

Einführung in SVG

Ähnlich wie XHTML ist SVG eine XML-Sprache, die zum Erstellen von Vektorgrafiken wie der folgenden verwendet werden kann. Es kann verwendet werden, um ein Bild zu erstellen, indem alle erforderlichen Linien und Formen gezeichnet, bereits vorhandene Rasterbilder bearbeitet oder beides gleichzeitig ausgeführt wird.

Das Bild und seine Elemente können durch Filtern, Zusammensetzen oder andere Techniken vollständig verändert werden.

Beispiel-SVG-Bild

Nachdem mehrere konkurrierende Formate beim W3C eingereicht, aber nicht vollständig ratifiziert wurden, entstand 1999 SVG. Alle gängigen Browser unterstützen SVG.

Das langsame Laden von SVG ist ein Nachteil. SVG hat Vorteile, einschließlich der Verfügbarkeit einer DOM-Schnittstelle und der fehlenden Notwendigkeit von Erweiterungen von Drittanbietern.

Vorteile der Verwendung von SVG

  • Jeder Texteditor kann zum Erstellen und Bearbeiten von SVG-Bildern verwendet werden.
  • SVG-Bilder können geskriptet, komprimiert, indiziert und durchsucht werden.
  • Bilder in SVG können skaliert werden.
  • Jede Auflösung kann hochwertige Drucke von SVG-Bildern erzeugen.
  • SVG-Bilder können vergrößert werden.
  • Sie behalten ihre gesamte Qualität, wenn SVG-Grafiken vergrößert oder verkleinert werden.
  • SVG-Dateien sind reines XML und ein offener Standard.

Methoden von SVG

SVG dient als Container für verschiedene Grafiken. Es bietet also verschiedene Methoden oder Tags, um selbst Bilder in einem HTML-Dokument zu erstellen. In diesem Artikel werden einige der Elemente und ihre verschiedenen verfügbaren Optionen erläutert.

Kreis mit SVG zeichnen

Verwenden Sie das Tag <Kreis>, um einen einfachen Kreis in SVG zu zeichnen. Es hat verschiedene Attribute, mit denen die Eigenschaften des Kreises festgelegt werden.

Als erstes Beispiel beginnen wir mit dem Zeichnen eines Kreises mit SVG in HTML. Der folgende HTML-Code zeichnet einen Kreis in SVG.

<!DOCTYPE html>
<html>
<body>

<h1>First SVG Demo</h1>

<svg width="150" height="150">
   <circle cx="60" cy="60" r="50" stroke="red" stroke-width="5" fill="yellow" />
   Sorry, SVG is not supported for your browser.
</svg>
</body>
</html>

Der Code wird wie folgt gerendert.

  • Das Element <svg> leitet ein SVG-Bild ein.
  • Die Attribute width und height des Elements <svg> geben die Abmessungen des SVG-Bildes an.
  • Mit dem Element <Kreis> kann ein Kreis gezeichnet werden.
  • Die x- und y-Koordinaten des Kreismittelpunktes werden durch die Attribute cx und cy angegeben.
  • Der Mittelpunkt des Kreises wird auf (0,0) gesetzt, wenn cx und cy nicht gesetzt sind.
  • Das Attribut r gibt den Radius des Kreises an.
  • Das Aussehen des Umrisses einer Form wird durch die Attribute Strich und Strichbreite gesteuert. Wir haben den Umriss des Kreises mit einem roten “Rand” von 5 px versehen.
  • Das Attribut fill bezieht sich auf die Innenfarbe des Kreises.
  • Am Ende schließt das Schließen des Tags </svg> das SVG-Bild.

Wenn der Browser SVG nicht unterstützt, wird die Meldung Entschuldigung, SVG wird in Ihrem Browser nicht unterstützt angezeigt.

Zeichnen Sie ein Rechteck mit SVG

Das Element <rect> in SVG wird verwendet, um eine rechteckige Form zu zeichnen. Ähnlich wie das Element <Kreis> hat es mehrere Attribute, mit denen die Eigenschaften des Rechtecks festgelegt werden können.

Das folgende Codesegment zeichnet ein Rechteck mit SVG.

<!DOCTYPE html>
<html>
<body>

<h1>SVG Rectangle</h1>

<svg width="200" height="200">
   <rect width="200" height="100" style="fill:red;stroke-width:5;stroke:black" />
   Sorry, SVG is not supported for your browser.
</svg>
</body>
</html>
  • Breite und Höhe des Rechtecks werden durch die Attribute width und height des Elements rect bestimmt.
  • Das style-Attribut definiert die CSS-Eigenschaften des Rechtecks.
  • Die CSS-Fülleigenschaft bestimmt die Füllfarbe des Rechtecks.
  • Die CSS-Eigenschaft stroke-width bestimmt die Breite des Rahmens des Rechtecks.
  • Die CSS-Eigenschaft stroke gibt die Rahmenfarbe des Rechtecks an.

SVG <Bild>-Tag

In SVG-Dokumenten enthaltene Bilder werden durch das SVG-Element <image> repräsentiert. Es kann SVG-Dateien oder Rasterbilddateien anzeigen.

JPEG, PNG und andere SVG-Dateien sind die einzigen Bildformate, die die SVG-Software unterstützen muss. Das Verhalten von animierten GIFs ist undefiniert.

Im Folgenden sind die bestimmten Attribute aufgeführt, die für das Tag <image> festgelegt werden müssen.

  • x: Definiert die horizontale Position des Bildes vom Ursprung aus.
  • y: Definiert die vertikale Position des Bildes vom Ursprung.
  • Breite: Die Grösse, in der das Bild gerendert wird. Dieses Attribut ist im Gegensatz zum <img>-Tag in HTML notwendig.
  • height: Die gerenderte Höhe des Bildes. Dieses Attribut ist im Gegensatz zum <img>-Tag in HTML notwendig.
  • xlink und href: Definiert die URL der Bilddatei.
  • preserveAspectRatio: Verwaltet die Skalierung des Bildes.

Das folgende Code-Snippet zeigt eine SVG-Datei mit dem image-Tag in SVG an.

<!DOCTYPE html>
<html>
<body>

<svg width="96" height="96">
  <image xlink:href="/img/DelftStack/logo.svg" width="96" height="96" />
</svg>
</body>
</html>

Ändern Sie die Farbe des SVG-Bildes mit CSS

Wenn Sie die Farbe Ihres SVG-Bildes ändern müssen, können wir die CSS-Eigenschaft filter verwenden, um verschiedene Filter auf ein Foto anzuwenden und seinen Farbton und seine Farben zu ändern. Die Filter-CSS-Eigenschaft verleiht einem Element visuelle Effekte wie Unschärfe oder Farbverschiebung.

Es ist üblich, Filter zu verwenden, um zu ändern, wie Rahmen, Hintergründe und Bilder gerendert werden.

Wenn wir beispielsweise die Farbe des Bildes im vorherigen Beispiel ändern müssen, können wir die folgende Filtereigenschaft verwenden.

.filter-green{
        filter: invert(58%) sepia(69%) saturate(1276%) hue-rotate(76deg) brightness(110%) contrast(109%);
    }

<!DOCTYPE html>
<html>
<body>

<svg class="filter-green" width="96" height="96">
  <image xlink:href="/img/DelftStack/logo.svg" width="96" height="96" />
</svg>
</body>
</html>

Dadurch wird ein Überlagerungseffekt auf dem Bild erzeugt und seine Farbe geändert. Im obigen CSS-Code haben wir die folgenden Filter auf das Bild angewendet.

  • invertieren: Kehrt die Farbe des Bildes um. Beginnend bei 0 % bis 100 %, wobei 100 % das Bild vollständig invertieren.
  • sepia: Dies fügt dem Bild einen Vintage-Effekt hinzu und ändert schließlich seine Farbe in eine metallische Seite.
  • sättigen: Hiermit wird die Farbintensität im Bild eingestellt. Ein höherer Wert bedeutet intensivere und schärfere Farben des Bildes.
  • hue-rotate: Hiermit ändern Sie die Farbtonrotation des Bildes um den Farbkreis des Bildes.
  • Helligkeit: Stellt die Helligkeit des Bildes ein. Ein Wert von 0 bedeutet ganz dunkel und 100 % gibt die ursprüngliche Helligkeit des Bildes an. Ein Wert über 100 macht es heller.
  • Kontrast: Stellt den Kontrast des Bildes ein. Ein Wert von 0 bedeutet ganz dunkel, 100 % zeigt den ursprünglichen Kontrast des Bildes an und ein Wert größer als 100 macht es kontrastreicher.

Verwandter Artikel - CSS Element