SVG-Hintergrundfarbe – Wie ändere ich die Hintergrundfarbe?

Warum eine Hintergrundfarbe für SVG festlegen?

Scalable Vector Graphics (SVG) ist eine XML-basierte Sprache zum Erstellen von 2D-Vektorgrafiken und gemischten Vektor-/Rastergrafiken. Jedes SVG-Dokument basiert auf den wichtigsten Strukturelementen von XML: einer Baumstruktur, Tags, Elementen und Attributen. SVG hat sich in den letzten Jahren zu einer beliebten Wahl im Webdesign entwickelt und ermöglicht Entwicklern und Designern die Erstellung von Bildern mithilfe von Punkten, Linien, Pfaden und Formen. SVG-Bilder eignen sich ideal für Logos, Symbole, einfache Grafiken und Animationen, sind auflösungsunabhängig und können problemlos in jedem Texteditor erstellt und bearbeitet werden. Weitere Informationen zum SVG-Standard finden Sie auf der W3C-Seite.

Eine häufige Aufgabe bei der Arbeit mit SVG ist das Festlegen einer Hintergrundfarbe. Die Hintergrundfarbe in einer SVG-Datei ist wichtig, da sie die visuelle Klarheit verbessert, die Konsistenz des Designs gewährleistet und die Zugänglichkeit verbessert, insbesondere wenn Symbole, Logos oder andere grafische Elemente auf verschiedenen Webseitenhintergründen (mit Mustern oder Texturen) angezeigt werden. Es spielt auch eine entscheidende Rolle bei der Definition von Grenzen in Schichtkompositionen, der Beibehaltung des gewünschten Erscheinungsbilds beim Export oder Druck und der Ermöglichung dynamischer Effekte in interaktiven Grafiken.

In diesem Artikel besprechen wir den Hintergrund von SVG. Außerdem finden Sie SVG-Codebeispiele und eine vollständige Anleitung zum Festlegen oder Ändern einer Hintergrundfarbe.

SVG kann wie HTML gestaltet werden. Allerdings verfügt SVG nicht über eine native background-color-Eigenschaft wie HTML-Elemente. Um eine Hintergrundfarbe zu simulieren, können Sie ein Element verwenden, das die gesamte Leinwand abdeckt, und mithilfe von CSS oder JavaScript eine Hintergrundfarbe anwenden, normalerweise indem Sie auf das Attribut style oder fill des SVG-Elements verweisen.

Was ist SVG-Hintergrund (SVG Background)?

Ein SVG-Hintergrund ist eine visuelle Ebene, die hinter allen anderen Elementen in einem SVG-Bild erscheint. Im Gegensatz zu anderen HTML-Elementen verfügen SVGs nicht über ihre native background-Eigenschaft. Daher besteht ein gängiger Ansatz zum Erstellen eines Hintergrunds darin, ein rechteckiges Element (<rect>) hinzuzufügen, das sich über die gesamte SVG-Leinwand erstreckt. Dieses <rect> fungiert als Hintergrund, deckt den gesamten SVG-Bereich ab und wird normalerweise als erstes untergeordnetes Element im SVG platziert, um sicherzustellen, dass es hinter allen anderen Grafikelementen erscheint.

Das Hintergrund-SVG-Element muss nicht unbedingt ein Rechteck sein; Es kann nach Ihrem Ermessen ein Kreis, ein Polygon usw. sein. Die Wahl eines Rechtecks als Hintergrund ist der häufigste und bequemste Fall. Das Erstellen eines farbigen Hintergrunds erfordert also das Festlegen der Hintergrundfarbe (SVG-Grafikelement). Dies kann auf zwei Arten erfolgen: mithilfe der Attribute eines beliebigen Grafikelements: style (mit der Eigenschaft fill) oder fill.

Fill-Eigenschaft des Style-Attributs

Die SVG-Auffüllfunktion kann im Attribut style festgelegt werden. Die Syntax zum Angeben dieser Eigenschaft lautet wie folgt: style="fill:#ff0000". Dies ist nichts anderes als ein Inline-SVG, da es CSS-Stile direkt auf ein bestimmtes Element im SVG-Code anwendet.

Füllattribut

SVG-Füllung kann im fill-Attribut mit der Syntax bereitgestellt werden: fill="#ff0000". Gemäß dem SVG-Standard ist das fill-Attribut ein Anzeigeattribut, das auf alle SVG-Grafikelemente wie Formen, Pfade und Text angewendet werden kann.

Ändern Sie die SVG-Hintergrundfarbe

Während SVGs keinen inhärenten Hintergrund haben (da sie standardmäßig transparent sind), können Sie einen auf verschiedene Weise festlegen:

SVG direkt ändern. Sie können die Hintergrundfarbe des SVG festlegen, indem Sie ein <rect>-Element als erstes untergeordnetes Element des SVG hinzufügen, um die gesamte Leinwand abzudecken, und das Attribut style oder fill für dieses Rechteck angeben.
SVG-Hintergrundfarbe mit CSS festlegen. Sie können eine SVG-Hintergrundfarbe mithilfe von internem und Inline-CSS auf ein SVG-Element anwenden, das als Hintergrund dient.
SVG-Hintergrundfarbe mit JavaScript festlegen. Wenn Sie die Hintergrundfarbe dynamisch ändern möchten, können Sie JavaScript verwenden, um das Attribut style oder fill der SVG-Datei zu manipulieren.

SVG-Datei direkt ändern

Im folgenden SVG-Codebeispiel verwenden wir die Methode <rect>, um einem SVG-Bild einen Hintergrund hinzuzufügen. Damit der Hintergrund die gesamte SVG-Leinwand abdeckt, geben wir die width="100%" height="100%" des Rechtecks an. Um die Hintergrundfarbe festzulegen, verwenden wir das Attribut fill und setzen den Farbwert auf aliceblue:

1<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
2  <!-- Background rectangle -->
3  <rect width="100%" height="100%" fill="aliceblue" />
4  <!-- Other SVG content -->
5  <circle cx="100" cy="100" r="70" fill="teal" stroke="salmon" stroke-width="10" />
6</svg>

Die Abbildung veranschaulicht das obige Codefragment:

Text „Der SVG-Kreis befindet sich in einem Rechteck, das als Hintergrundfarbe dient.“

Wie Sie mithilfe der Aspose.SVG for .NET-Bibliothek mit SVG-Farben arbeiten und wie Sie die Hintergrundfarbe in SVG-Dateien ändern, erfahren Sie ausführlich anhand von C#-Beispielen im Artikel SVG-Hintergrundfarbe ändern – C#-Beispiele.

Verwendung der Eigenschaft `background-color`

Die SVG-Spezifikation unterstützt background-color nicht als gültige Eigenschaft für das <svg>-Element selbst. Wenn Sie die Eigenschaft background-color für das Attribut style eines <svg>-Elements verwenden, legen Sie nicht wirklich einen Hintergrund für den SVG-Inhalt fest. Stattdessen können Sie die Hintergrundfarbe des Platzes festlegen, den die SVG-Datei in einem Browser einnimmt. Dies kann den Eindruck erwecken, dass die SVG-Datei selbst eine Hintergrundfarbe hat, tatsächlich handelt es sich jedoch um den Hintergrund des umgebenden Containers – den Bereich um oder hinter dem SVG-Inhalt.

Im folgenden SVG-Code zeigen wir, wie diese Eigenschaft “funktioniert”. In der Abbildung, die den Code veranschaulicht, sehen Sie, dass der eigentliche Hintergrund des SVG-Bilds das Rechteck ist, das die gesamte SVG-Leinwand (200 x 200 Pixel) abdeckt. Zusätzlich sehen Sie den Effekt der Eigenschaft style="background-color: lightsteelblue": Der Hintergrund des umgebenden Containers wird mit der Farbe lightsteelblue gefüllt.

1<svg width="200" height="200" style="background-color: lightsteelblue" xmlns="http://www.w3.org/2000/svg">
2  <!-- Background rectangle -->
3  <rect width="100%" height="100%" fill="aliceblue" />
4  <!-- Other SVG content -->
5  <circle cx="100" cy="100" r="70" fill="teal" stroke="salmon" stroke-width="10" />
6</svg>

Die Abbildung veranschaulicht das obige Codefragment:

Text „Der SVG-Kreis befindet sich in einem Rechteck, das als Hintergrundfarbe dient.“

Da dieses Verhalten nicht Standard ist, funktioniert es möglicherweise nicht konsistent über verschiedene Browser oder Plattformen hinweg. Was in einem Browser funktioniert, funktioniert möglicherweise in einem anderen nicht, was zu potenziellen Problemen mit dem Layout und der Rendering-Konsistenz führen kann.

Empfehlung: Um sicherzustellen, dass Ihre SVG-Datei einen konsistenten und zuverlässigen Hintergrund hat, sollten Sie eine Methode verwenden, die mit allen Browsern und Plattformen kompatibel ist, z. B. das Hinzufügen eines <rect>-Elements innerhalb der SVG-Datei, das als Hintergrund dient.

Festlegen der SVG-Hintergrundfarbe mithilfe von CSS

Inline-CSS für SVG

Bei Inline-CSS werden CSS-Stile mithilfe des Attributs style direkt in einzelne SVG-Elemente eingebettet. Mit dieser Methode können Sie von Fall zu Fall bestimmte Stile auf Elemente anwenden, ohne dass externe oder interne Stylesheets erforderlich sind.

Im folgenden SVG-Code verwenden wir Inline-CSS, um Stile für den SVG-Hintergrund festzulegen: <rect>-Element. Das Attribut style wird verwendet, um Inline-CSS direkt auf das Element <rect> anzuwenden und dessen Eigenschaften width, height und fill festzulegen.

1<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
2  <!-- Background rectangle -->
3  <rect style="width: 100%; height: 100%; fill: aliceblue;" />
4  <!-- Other SVG content -->
5  <circle cx="100" cy="100" r="70" fill="teal" stroke="salmon" stroke-width="10" />
6</svg>

Zu den Vorteilen von Inline-CSS in SVG gehören die präzise Kontrolle über einzelne Elemente und die einfache Portabilität. Wenn jedoch mehrere Elemente denselben Stil haben, kann dies zu sich wiederholendem Code führen, was die Wartung insbesondere bei großen SVGs erschwert.

Internes CSS für SVG

Um mithilfe von internem CSS eine Hintergrundfarbe für eine SVG-Datei festzulegen, können Sie das Tag <style> innerhalb der SVG-Datei selbst verwenden und so zentralisierte Stilregeln erstellen, die auf mehrere Elemente angewendet werden können. Diese Methode bietet eine sauberere und einfacher zu verwaltende Möglichkeit, konsistente Stile auf eine SVG-Datei anzuwenden.

Da das <svg>-Element die Eigenschaft background-color nicht nativ unterstützt, ist es üblich, ein zusätzliches Element wie <rect> zu verwenden, um einen Hintergrund zu simulieren. In diesem Beispiel wird das Tag <style> verwendet, um eine CSS-Klasse .background zu definieren. Diese Klasse wird dann mithilfe des Attributs class auf das Element <rect> angewendet. Die Klasse .background setzt die Eigenschaft fill auf aliceblue, färbt <rect> ein und erstellt die Hintergrundfarbe.

 1<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
 2  <style>
 3    .background {
 4      fill: aliceblue;
 5    }
 6  </style>
 7  <!-- Background rectangle -->
 8  <rect width="100%" height="100%" class="background" />
 9  <!-- Other SVG content -->
10  <circle cx="100" cy="100" r="70" fill="teal" stroke="salmon" stroke-width="10" />
11</svg>

Internes CSS ist etwas komplexer als Inline-CSS. Es ermöglicht Ihnen jedoch, Stile über mehrere Elemente hinweg wiederzuverwenden, was die Coderedundanz reduziert und die Aktualisierung von Stilen für die Elemente, auf die sie angewendet werden, erleichtert.

Ändern Sie die Hintergrundfarbe mit JavaScript

JavaScript kann in SVG verwendet werden, um seine Elemente zu manipulieren, genau wie in HTML. JavaScript in SVG eignet sich besonders zum Erstellen interaktiver Grafiken, Animationen und dynamischer Änderungen an SVG-Inhalten.

In diesem Beispiel enthält die SVG-Datei ein Rechteck <rect>, das als Hintergrund fungiert und die gesamte Leinwand der SVG-Datei ausfüllt. Wenn auf die SVG-Datei geklickt wird, schaltet eine JavaScript-Funktion die Hintergrundfarbe zwischen den beiden Farben aliceblue und mistyrose um.

 1<svg id="mySvg" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
 2  <!-- Background rectangle -->
 3  <rect width="100%" height="100%" fill="aliceblue" />
 4
 5  <!-- Some content in the SVG -->
 6  <circle cx="100" cy="100" r="50" fill="#f3622a" />
 7
 8  <script type="text/javascript">
 9    // JavaScript to change the background color on click
10    document.getElementById("mySvg").addEventListener("click", function() {
11      var rect = document.querySelector("#mySvg rect");
12      rect.setAttribute("fill", rect.getAttribute("fill") === "aliceblue" ? "mistyrose" : "aliceblue");
13    });
14  </script>
15</svg>

Dieses SVG-Bild veranschaulicht den obigen Codeausschnitt. Klicken Sie auf SVG und ändern Sie die Hintergrundfarbe!

Abschluss

Während SVG wie HTML-Elemente über keine native background-color-Eigenschaft verfügt, gibt es mehrere effektive Möglichkeiten, den Hintergrund in SVG festzulegen. Sie können ein <rect>-Element hinzufügen, internes oder Inline-CSS anwenden oder JavaScript verwenden, um den Hintergrund dynamisch zu ändern. Jede Methode hat ihre eigenen Vorteile, von präziser Steuerung und Portabilität bis hin zu einfacher Wartung und Interaktivität. Ihre Wahl hängt von der Komplexität Ihres SVG ab und davon, wie Sie es pflegen oder wiederverwenden möchten.

Um mehr über SVG-Dateien, ihre Struktur, die Vor- und Nachteile dieses Formats und die Geschichte von SVG zu erfahren, besuchen Sie den Dokumentationsartikel Was ist eine SVG-Datei?
Wie Sie neue SVG-Elemente hinzufügen und ihre Farbeigenschaften festlegen, behandeln wir im Artikel SVG-Dateien bearbeiten ausführlich mit C#-Beispielen.
Wie Sie mit der Aspose.SVG for .NET-Bibliothek mit SVG-Farben arbeiten und wie Sie die Farbe von SVG-Elementen oder die Hintergrundfarbe in SVG-Dateien ändern, erfahren Sie ausführlich anhand von C#-Beispielen im Artikel Anleitung SVG-Farbe ändern.
Wenn Sie die gewünschte Farbe finden möchten, können Sie zwei Farben mit einem kostenlosen Online- Farbmischer mischen. Mit der Anwendung können Sie zwei Farben in unterschiedlichen Mengen mischen und das Ergebnis nach dem Mischen sehen. Schauen Sie sich unseren Farbmischer an, um Spaß zu haben und die Natur der Farbe zu erkunden!

SVG-Farbe SVG-eingebetteter Inhalt