Default background color of SVG root element

Question

I'd like to set a default background color for the entire SVG document, to red for example.

<svg viewBox="0 0 500 600" style="background: red">/* content */</svg>

The solution above works but the background property of the style attribute is unfortunately not a standard one : http://www.w3.org/TR/SVG/styling.html#SVGStylingProperties, and so it gets removed during the cleaning process with SVG Cleaner.

Is there another way to declare this background color?

Instigation

Is there probably also a bug in SVG Cleaner? It removes inline style blocks as well, although they are standard: w3.org/TR/SVG/styling.html#StylingWithCSS – Pamphlet

Answer 1

SVG 1.2 Tiny has viewport-fill I'm not sure how widely implemented this property is though as most browsers are targetting SVG 1.1 at this time. Opera implements it FWIW.

A more cross-browser solution currently would be to stick a <rect> element with width and height of 100% and fill="red" as the first child of the <svg> element, for example:

<rect width="100%" height="100%" fill="red"/>

Baxley

The rect hack sort of works, but it assumes that the aspect ratio of the svg always matches the viewport it gets, so it won't fill the entire viewport in all situations. – Impunity

when the aspect ratio does not match the viewport then using width="10000%" height="10000%" may fix it. if not then add some zeros – Bookout

@Bookout unfortunately adding a value as high as 10000000% didn't work. any other suggestions? – Interrogate

An abandoned viewport-fill caniuse pull request: github.com/Fyrd/caniuse/issues/2186 Why why why did they let SVG die. – Standin

@ErikDahlström Please check the solution at https://mcmap.net/q/37570/-default-background-color-of-svg-root-element – Oeo

@RobertLongson If viewBox does not agree with width and height the radius works, see upload.wikimedia.org/wikipedia/commons/archive/b/bd/… – Oeo

Answer 2

Found this works in Safari. SVG only colors in with background-color where an element's bounding box covers. So, give it a border (stroke) with a zero pixel boundary. It fills in the whole thing for you with your background-color.

<svg style='stroke-width: 0px; background-color: blue;'> </svg>

Agitprop

This causes all sub-element strokes to be zero-width as well, so its not a good "background" option. – Dotted

Answer 3

It is the answer of @Robert Longson, now with code (there was originally no code, it was added later):

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
 <rect width="100%" height="100%" fill="red"/>
</svg>

This answer uses:

• https://mcmap.net/q/37570/-default-background-color-of-svg-root-element
• https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes

Oeo

Answer 4

Let me report a very simple solution I found, that is not written in previous answers. I also wanted to set background in an SVG, but I also want that this works in a standalone SVG file.

Well, this solution is really simple, in fact SVG supports style tags, so you can do something like

<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50">
  <style>svg { background-color: red; }</style>
  <text>hello</text>
</svg>

Bogus

Though this works in general in all browsers, setting the background-color of the <svg> element will make the IE11 render the background color also outside the area defined with the viewBox attribute. This does not matter when using width and height attributes though. – Horrified

@Horrified interesting observation, in theory the style coded inside svg should apply only inside svg. However, setting width and height is almost always necessary. – Bogus

Is there a difference between <svg style"...."></svg> and <svg><style>...</style></svg>, assuming the <style> tag is at the top level? If not, then this answer just seems like the OP's original solution, repackaged under a different syntax. (But maybe this solution survives SVG Cleaner, while <svg style="..."></svg> does not?) – Formyl

@Formyl I was looking for a solutions, saw this question, then found a way to solve it and shared it. I do not know, it looks like the only the attributes reported in this w3.org/TR/SVG/styling.html#SVGStylingProperties are supported. On the other hand the solution I proposed works and I like it also cause you can style other SVG tags, like path, rect, etc. The main feature for me is that it works also for standalone SVGs. – Bogus

Answer 5

I'm currently working on a file like this:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="style.css" ?>
<svg
  xmlns="http://www.w3.org/2000/svg"
  version="1.1"
  width="100%"
  height="100%"
  viewBox="0 0 600 600">
...

And I tried to put this into style.css:

svg {
  background: #bf1f1f;
}

It's working on Chromium and Firefox, but I don't think that it's a good practice. EyeOfGnome image viewer doesn't render it, and Inkscape uses a special namespace to store such a background:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    version="1.1"
    ...
  <sodipodi:namedview
     pagecolor="#480000" ... >

Well, it seems that SVG root element is not part of paintable elements in SVG recommandations.

So I'd suggest to use the "rect" solution provided by Robert Longson because I guess that it is not a simple "hack". It seems to be the standard way to set a background with SVG.

Inject

<rect width="100%" height="100%" fill="white" /> at the beginning solves the problem for eog – Meredithmeredithe

Answer 6

background and background-color are not widely supported

the shortest code without is to draw a circle with a radius of 10000, this does also work for width-height-aspect-ratios different to viewBox.

<circle r="1e5" fill="red"/>

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
 <circle r="1e5" fill="red"/>
</svg>

Oeo

Answer 7

Another workaround might be to use <div> of the same size to wrap the <svg>. After that, you will be able to apply "background-color", and "background-image" that will affect thesvg.

<div class="background">
  <svg></svg>
</div>

<style type="text/css">
.background{
  background-color: black; 
  /*background-image: */
}
</style>

Toddtoddie

This solution is a HTML hack. And may work only if you are using SVG into a web page. This is not a true SVG solution. – Monogram

The background color of the SVG is borrowed from the component it is sitting in. (kinda like svg borrows the page colour, and the default page colour is white). Somehow I don't think it is a hack. – Ignatzia

@clinux: What Charles was trying to say is, it works perfectly for web page rendering but suppose you want to use the same svg as an image with .svg extension for rendering it elsewhere, it may not work. – Bolzano