SVG Background Color – How to change background color?

Why Set a Background Color for SVG?

Scalable Vector Graphics (SVG) is an XML-based language for creating 2D vector and mixed vector/raster graphics. Each SVG document is based on XML’s main structural elements: a tree-like structure, tags, elements, and attributes. SVG has become a popular choice in web design in recent years, allowing developers and designers to create images using points, lines, paths, and shapes. Ideal for logos, icons, simple graphics, and animations, SVG images are resolution-independent and can be easily created and edited in any text editor. For more information about SVG Standard, please see the W3C page.

One common task when working with SVGs is setting a background color. The background color in an SVG is important because it enhances visual clarity, ensures design consistency, and improves accessibility particularly when displaying icons, logos, or other graphical elements over various (patterned or textured) webpage backgrounds. It also plays a crucial role in defining boundaries in layered compositions, maintaining intended appearances during export or printing, and enabling dynamic effects in interactive graphics.

In this article, we will discuss what background is in SVG. You will also find SVG code examples and a comprehensive guide on how to set or change a background color.

SVG can be styled like HTML. However, SVG does not have a native background-color property like HTML elements. To simulate a background color, you can use an element covering the entire canvas and apply a background color via CSS or JavaScript, typically by targeting the SVG element’s style or fill attribute.

What is SVG Background?

An SVG background is a visual layer that appears behind all other elements in an SVG image. Unlike other HTML elements, SVGs do not have their native background property, so a common approach to creating a background is to add a rectangle element (<rect>) that spans the entire SVG canvas. This <rect> acts as a background, covering the entire SVG area, and is typically positioned as the first child element in the SVG to ensure that it appears behind all other graphic elements.

The background SVG element may not necessarily be a rectangle; it can be a circle, a polygon, etc., at your discretion. Choosing a rectangle as a background is the most common and convenient case. So, creating a colored background involves setting the color for the background (graphic SVG element). This can be done in two ways: using the attributes of any graphic element – style (with the fill property) or fill.

Fill Property of the Style Attribute

SVG fill feature can be set in the style attribute. The syntax for specifying this property is as follows: style="fill:#ff0000". This is nothing more than inline SVG, as it directly applies CSS styles to a specific element within the SVG code.

Fill Attribute

SVG fill can be given in the fill attribute with such the syntax: fill="#ff0000". According to the SVG standard, the fill attribute is a presentation attribute that can be applied to all SVG graphic elements, such as shapes, paths, and text.

Change SVG Background Color

While SVGs do not inherently have a background (as they are transparent by default), you can set one in several ways:

Modifying SVG Directly. You can set the SVG background color by adding a <rect> element as the first child in the SVG to cover the entire canvas and specify the style or fill attribute for this rectangle.
Setting SVG Background Color Using CSS. You can apply an SVG background color using both inline and internal CSS to an SVG element that serves as a background.
Setting SVG Background Color Using JavaScript. If you want to change the background color dynamically, you can use JavaScript to manipulate the SVG’s style or fill attribute.

Modify SVG File Directly

In the following SVG code example, we use the <rect> method to add a background for an SVG image. To make the background cover the entire SVG canvas, we specify the width="100%" height="100%" of the rectangle. To set the background color, we use the fill attribute and set the color value to “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>

The figure illustrates the code snippet above:

Text “SVG circle is located on a rectangle, which serves as a color background.”

How to work with SVG color using the Aspose.SVG library for .NET and how to change the background color in SVG files, we covered in detail with C# examples in the article Change SVG Background Color – C# Examples.

Using `background-color` Property

The SVG specification does not support background-color as a valid property for the <svg> element itself. When you use the background-color property in the style attribute of an <svg> element, it does not actually set a background of the SVG content. Instead, it can set the background color of the space that the SVG occupies in a browser. This can give the impression that the SVG itself has a background color, but it is actually the background of the surrounding container – the area around or behind the SVG content.

In the following SVG code, we show how this property “works”. In the figure that illustrates the code, you will see that the actual background for the SVG image is the rectangle that covers the entire SVG canvas (200x200 px). Also, you will see the effect of the style="background-color: lightsteelblue" property applying – the background of the surrounding container is filled by lightsteelblue color.

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>

The figure illustrates the code snippet above:

Text “SVG circle is located on a rectangle, which serves as a color background.”

Since this behavior is not standard, it might not work consistently across different browsers or platforms. What works in one browser might not work in another, leading to potential issues with design consistency and rendering.

Recommendation: To ensure that your SVG has a consistent and reliable background, you should use a method that is supported across all browsers and platforms, such as adding a <rect> element inside the SVG to serve as the background.

Setting SVG Background Color Using CSS

Inline CSS for SVG

Inline CSS involves directly embedding CSS styles into individual SVG elements using the style attribute. This method allows you to apply specific styles to elements on a case-by-case basis without the need for external or internal style sheets.

In the following SVG code we use inline CSS to set styles for the SVG background – <rect> element. The style attribute is used to apply inline CSS directly on the <rect> element, setting its width, height, and fill properties.

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>

The advantages of inline CSS in SVG include precise control over individual elements and easy portability. However, if multiple elements share the same style, it can lead to repetitive code, which makes maintenance challenging, especially in large SVGs.

Internal CSS for SVG

To set a background color for an SVG using internal CSS, you can use the <style> tag within the SVG itself, allowing you to create centralized style rules that can be applied to multiple elements. This method provides a cleaner and more manageable way to apply consistent styles across an SVG.

Since the <svg> element doesn’t support a background-color property natively, it is common to use an additional element such as <rect> to simulate a background. In this example, the <style> tag is used to define a CSS class .background. This class is then applied to the <rect> element via the class attribute. The .background class sets the fill property to aliceblue, coloring the <rect> and creating the color background.

 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>

Internal CSS is a little more complex than inline CSS. However, it allows you to reuse styles across multiple elements, reducing code redundancy and making it easier to update styles across elements they apply to.

Change Background Color Using JavaScript

JavaScript can be used within SVG to manipulate its elements, just like in HTML. JavaScript in SVG is particularly useful for creating interactive graphics, animations, and dynamic changes to SVG content.

In this example, the SVG contains a rectangle <rect> that acts as the background, filling the entire SVG canvas. When the SVG is clicked, a JavaScript function toggles the background color between two colors aliceblue and mistyrose.

 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>

This SVG image illustrates the code snippet above. Click on SVG and change the background color!

Conclusion

While SVG lacks a native background-color property like in HTML elements, there are several effective ways to set the background in SVG. You can add a <rect> element, apply inline or internal CSS, or use JavaScript to change the background dynamically. Each method has its own advantages, from precise control and portability to ease of maintenance and interactivity. Your choice between them will depend on the complexity of your SVG and how you plan to maintain or reuse it.

To learn more about SVG files, their structure, the pros and cons of this format, and SVG history, please visit the documentation article What is an SVG File?
How to add new SVG elements and set their color properties, we covered in detail C# examples in the article Edit SVG Files.
How to work with SVG color using the Aspose.SVG for .NET library and how to change the color of SVG elements or the background color in SVG files, we covered in detail with C# examples in the article How to change SVG color.
If you want to find a required color, you can mix two colors using a free online Color Mixer. The application allows to mix two colors in different quantities and see the result after mixing. Check our Color Mixer to get fun and investigate a color nature!

SVG Color SVG Embedded Content