SVG-Hintergrundfarbe – hinzufügen oder ändern

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. SVG ist auflösungsunabhängig, gut editierbar und ideal für Logos, Icons, einfache Grafiken und Animationen. Eine Hintergrundfarbe verbessert die visuelle Klarheit, hält das Design auf gemusterten Seiten konsistent und unterstützt die Barrierefreiheit, wenn SVGs über unterschiedlichen Webseitenhintergründen erscheinen. Weitere Informationen zum SVG-Standard finden Sie in der W3C SVG specification.

Quick Answer: SVG hat keine native background-color-Eigenschaft für die Zeichenfläche. Die zuverlässigste Methode, eine SVG-Hintergrundfarbe hinzuzufügen oder zu ändern, ist ein <rect> als erstes Kind von <svg>. Setzen Sie width="100%", height="100%" und die gewünschte Farbe mit fill.

1<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
2  <rect width="100%" height="100%" fill="aliceblue" />
3  <circle cx="100" cy="100" r="70" fill="teal" />
4</svg>

Diese Anleitung erklärt, was ein SVG-Hintergrund ist, warum background-color auf <svg> irreführend sein kann und wie Sie einen Hintergrund mit einem Rechteck, inline CSS, internem CSS oder JavaScript setzen.

Was ist ein SVG-Hintergrund?

Ein SVG-Hintergrund ist eine visuelle Ebene hinter allen anderen Elementen in einem SVG-Bild. Anders als HTML-Elemente hat SVG-Inhalt keine eigene Hintergrundebene. Deshalb wird häufig ein Rechteckelement (<rect>) hinzugefügt, das den gesamten SVG canvas bedeckt. Dieses <rect> wirkt als Hintergrund, deckt den ganzen SVG-Bereich ab und steht normalerweise als erstes Kindelement im SVG, damit es hinter allen anderen grafischen Elementen gerendert wird.

Das Hintergrundelement muss nicht zwingend ein Rechteck sein. Es kann auch ein Kreis, Polygon, path oder eine andere Form sein, wenn das zur Grafik passt. Für einen Hintergrund über die gesamte Zeichenfläche ist ein Rechteck jedoch die einfachste und verlässlichste Wahl. Um einen farbigen Hintergrund zu erstellen, definieren Sie die fill-Farbe dieses Elements. SVG unterstützt dafür zwei häufige Schreibweisen:

Methode	Beschreibung	Typischer Einsatz
`fill="..."`	Verwendet ein SVG presentation attribute	Bevorzugt für einfache, gut lesbare Hintergrundrechtecke
`style="fill:..."`	Wendet fill über eine inline CSS declaration an	Nützlich, wenn das SVG visuelle styles bereits in `style`-Attributen speichert

Wenn sowohl fill als auch style="fill:..." auf demselben Element gesetzt sind, gewinnt die inline style-Deklaration normalerweise in der CSS cascade. Für einen einfachen statischen Hintergrund ist das fill-Attribut vorzuziehen, außer das SVG nutzt bereits CSS-basiertes Styling.

So fügen Sie SVG-Hintergrundfarbe hinzu

Fügen Sie ein <rect>-Element als erstes Kind innerhalb des <svg>-Elements hinzu.
Setzen Sie width="100%" und height="100%", oder passen Sie das Rechteck an die viewBox-Abmessungen an.
Setzen Sie die Hintergrundfarbe mit fill, zum Beispiel fill="aliceblue" oder fill="#f0f0f0".
Platzieren Sie alle sichtbaren Grafikelemente nach dem Hintergrundrechteck, damit sie darüber gerendert werden.
Verwenden Sie inline CSS, eine interne CSS-Klasse oder JavaScript nur dann, wenn der Hintergrund einem vorhandenen style system folgen oder sich dynamisch ändern muss.

SVG-Hintergrundfarbe ändern

Aufbauend auf dem oben erklärten Konzept ist die zuverlässigste Methode, einen SVG-Hintergrund hinzuzufügen, ein <rect>-Element einzufügen, das die gesamte Zeichenfläche bedeckt.

Ein Rechteckelement als SVG-Hintergrund verwenden

Empfohlener Ansatz: Ein <rect> als erstes Kindelement ist das zuverlässigste SVG-Markup-Muster, weil der Hintergrund Teil der Zeichnung selbst wird.

Platzieren Sie das <rect> als erstes Kind, damit es hinter allen anderen Grafiken liegt. Damit der Hintergrund den gesamten SVG canvas bedeckt, setzen Sie die Rechteckattribute auf width="100%" und height="100%". Die Hintergrundfarbe setzen Sie mit dem fill-Attribut und dem Farbwert 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 zeigt das Codebeispiel oben:

SVG-Kreis auf einem vollflächigen Rechteck, das als zuverlässige SVG-Hintergrundfarbe dient

Programmgesteuerte C#-Beispiele zum Hinzufügen, Ändern oder Aktualisieren von Hintergrundelementen in vorhandenen SVG-Dateien finden Sie unter SVG-Hintergrundfarbe ändern – C#-Beispiele.

Warum background-color für SVG-Inhalt nicht funktioniert

Die SVG specification definiert background-color nicht als paint layer für SVG-Inhalt. Wenn Sie die Eigenschaft background-color im style-Attribut eines <svg>-Elements verwenden, fügen Sie dem SVG-Markup keine echte Hintergrundform hinzu. Stattdessen kann die Eigenschaft die Hintergrundfarbe des Bereichs setzen, den das SVG im Browser einnimmt. Dadurch kann der Eindruck entstehen, das SVG selbst habe eine Hintergrundfarbe. Tatsächlich ist es aber der Hintergrund des umgebenden Containers, also der Bereich um oder hinter dem SVG-Inhalt.

Im folgenden SVG-Code zeigen wir, wie diese Eigenschaft „funktioniert“. In der Abbildung zum Code sehen Sie, dass der eigentliche Hintergrund des SVG-Bildes das Rechteck ist, das den gesamten SVG canvas (200x200 px) bedeckt. Außerdem sehen Sie den Effekt von style="background-color: lightsteelblue": Der Hintergrund des umgebenden Containers wird mit 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 zeigt das Codebeispiel oben:

SVG background-color auf dem svg-Element im Vergleich mit einem echten Rechteckhintergrund

Da dieser Effekt kein echter SVG-Inhaltshintergrund ist, kann er sich in Browsern, Renderern, Exporten oder Einbettungskontexten unterschiedlich verhalten. Was im Browser korrekt aussieht, kann verschwinden oder sich ändern, wenn das SVG konvertiert, wiederverwendet oder von einem anderen Tool verarbeitet wird.

Empfehlung: Verwenden Sie für einen konsistenten und zuverlässigen SVG-Hintergrund eine Methode, die in Browsern und Plattformen stabil funktioniert: Fügen Sie ein <rect>-Element innerhalb des SVG hinzu und verwenden Sie es als Hintergrund.

Inline CSS für SVG-Hintergrundfarbe

Inline CSS bedeutet, CSS styles direkt in einzelne SVG-Elemente über das style-Attribut einzubetten. Diese Methode erlaubt es, bestimmte styles elementweise anzuwenden, ohne externe oder interne stylesheets zu benötigen.

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>

Inline CSS in SVG bietet präzise Kontrolle über einzelne Elemente und ist leicht portierbar. Wenn jedoch mehrere Elemente denselben style teilen, entsteht wiederholter Code. Das erschwert die Wartung, besonders in großen SVG-Dateien.

Internes CSS für SVG-Hintergrundfarbe

Um eine SVG-Hintergrundfarbe mit internem CSS zu setzen, verwenden Sie das <style>-Tag innerhalb des SVG selbst. Dadurch können Sie zentrale style rules erstellen, die auf mehrere Elemente angewendet werden.

In diesem Beispiel definiert das <style>-Tag die CSS-Klasse .background. Diese Klasse wird über das class-Attribut auf das <rect>-Element angewendet. Die Klasse .background setzt die fill-Eigenschaft auf aliceblue, färbt das <rect> und erzeugt so den farbigen Hintergrund.

 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 erlaubt aber, styles über mehrere Elemente hinweg wiederzuverwenden, reduziert Code-Duplikation und erleichtert spätere Änderungen.

JavaScript für dynamische SVG-Hintergründe

JavaScript kann innerhalb von SVG verwendet werden, um Elemente ähnlich wie in HTML zu manipulieren, sofern der Einbettungskontext scripts erlaubt. Das ist nützlich für interaktive Grafiken, Animationen und zustandsabhängige Hintergrundänderungen. Für einen statischen Icon- oder Logo-Hintergrund sollten Sie JavaScript nicht verwenden.

Im folgenden Beispiel enthält das SVG ein <rect>, das als Hintergrund dient und den gesamten SVG canvas füllt. Beim Klick auf das SVG schaltet eine JavaScript-Funktion die Hintergrundfarbe zwischen 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    document.getElementById("mySvg").addEventListener("click", function() {
10      var rect = document.querySelector("#mySvg rect");
11      rect.setAttribute("fill", rect.getAttribute("fill") === "aliceblue" ? "mistyrose" : "aliceblue");
12    });
13  </script>
14</svg>

Dieses SVG-Bild veranschaulicht das Codebeispiel oben. Klicken Sie auf das SVG, um die Hintergrundfarbe zu ändern.

Hinweis: Verwenden Sie JavaScript nur für interaktive oder zustandsabhängige Hintergründe. Für statische SVG-Dateien wie Icons oder Logos ist ein <rect> mit fill einfacher, zuverlässiger und leichter zu exportieren.

Häufige Fehler und Korrekturen

Problem	Ursache	Lösung
Hintergrund erscheint transparent	Es wurde kein `<rect>`-Element hinzugefügt	Fügen Sie ein `<rect>` als erstes Kind hinzu, das 100 % Breite und Höhe bedeckt
`background-color` scheint nur in einem Browser zu funktionieren	Die Eigenschaft wirkt auf den äußeren SVG-Container, nicht auf den canvas	Verwenden Sie einen `<rect>`-Hintergrund für konsistentes Verhalten in Browsern und Exporten
Inline styles kollidieren mit externem CSS	Auf demselben Element gibt es doppelte `fill`-Definitionen	Fassen Sie styles mit internem CSS oder class selectors zusammen
JavaScript ändert die Farbe nicht	Falscher selector, fehlende `id`, deaktivierte scripts oder ein Einbettungskontext, der SVG-scripts nicht ausführt	Stellen Sie sicher, dass das Rechteck eindeutig selektierbar ist, etwa mit `#mySvg rect`, und verwenden Sie JavaScript nur dort, wo SVG-scripts erlaubt sind
SVG skaliert, aber der Hintergrund füllt das viewBox nicht	Das Rechteck verwendet feste Pixelmaße	Verwenden Sie `width="100%" height="100%"` oder passen Sie das Rechteck an die `viewBox`-Abmessungen an

Schnelle Rezepte

Einfarbigen Hintergrund mit <rect> hinzufügen

1<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
2  <rect width="100%" height="100%" fill="#f0f0f0"/>
3  <!-- your graphics -->
4</svg>

Hintergrund ändern, wenn der Mauszeiger über dem SVG steht

1<svg class="hover-bg" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
2  <style>
3    .hover-bg:hover rect { fill: #ffebcd; }
4  </style>
5  <rect width="100%" height="100%" fill="aliceblue"/>
6  <circle cx="100" cy="100" r="70" fill="teal"/>
7</svg>

Hintergrund mit JavaScript umschalten

1<svg id="toggleSvg" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
2  <rect width="100%" height="100%" fill="aliceblue"/>
3  <script>
4    document.getElementById('toggleSvg').addEventListener('click', function(){
5      const r = this.querySelector('rect');
6      r.setAttribute('fill', r.getAttribute('fill') === 'aliceblue' ? 'mistyrose' : 'aliceblue');
7    });
8  </script>
9</svg>

Hintergrundklasse mit internem CSS wiederverwenden

1<svg width="250" height="250" xmlns="http://www.w3.org/2000/svg">
2  <style>.bg{fill:#e6e6fa;}</style>
3  <rect class="bg" width="100%" height="100%"/>
4  <!-- other elements -->
5</svg>

FAQ – SVG-Hintergrundfarbe

Kann SVG eine background-color-Eigenschaft haben?

Nicht auf dieselbe Weise wie ein HTML-Element. background-color auf <svg> kann den reservierten Browserbereich färben, erzeugt aber keine Hintergrundebene innerhalb der SVG-Zeichnung. Verwenden Sie für einen zuverlässigen SVG-Hintergrund ein erstes <rect>-Element mit fill.

Wie mache ich einen SVG-Hintergrund transparent?

Fügen Sie kein Hintergrundrechteck hinzu oder entfernen Sie das vorhandene Hintergrundelement. SVG-Inhalt ist standardmäßig transparent, solange keine Form, kein Bild und kein style den canvas füllt.

Warum funktioniert background-color im Browser, aber nicht nach dem Export?

Der Browser kann den Bereich malen, den das <svg>-Element einnimmt, während Exporter und Renderer oft nur tatsächlichen SVG-Inhalt berücksichtigen. Ein <rect>-Hintergrund wird Teil des SVG-Markups und ist beim Export besser vorhersehbar.

Soll ich fill oder style für ein SVG-Hintergrundrechteck verwenden?

Verwenden Sie fill für den einfachsten statischen Hintergrund. Verwenden Sie style="fill:..." oder eine CSS-Klasse, wenn das SVG styles bereits zentralisiert oder themenabhängige Änderungen benötigt.