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?

Is there probably also a bug in SVG Cleaner? It removes inline style blocks as well, although they are standard: http://www.w3.org/TR/SVG/styling.html#StylingWithCSS — Volker E., May 28 '14 at 03:19

score 171 · Accepted Answer · edited Oct 04 '18 at 22:50

171

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"/>

edited Oct 04 '18 at 22:50

Ben Kane

9,331
6
36
58

answered Jul 02 '12 at 12:35

Robert Longson

118,664
26
252
242

30

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. – Erik Dahlström Jul 02 '12 at 12:48
2

when the aspect ratio does not match the viewport then using `width="10000%" height="10000%"` may fix it. if not then add some zeros – mulllhausen Oct 10 '19 at 02:35
1

@mulllhausen unfortunately adding a value as high as 10000000% didn't work. any other suggestions? – Crashalot Nov 09 '19 at 07:58
An abandoned `viewport-fill` caniuse pull request: https://github.com/Fyrd/caniuse/issues/2186 Why why why did they let SVG die. – Ciro Santilli OurBigBook.com Jun 26 '20 at 22:21
@ErikDahlström Please check the solution at https://stackoverflow.com/a/69899106/6747994 – JoKalliauer Nov 09 '21 at 13:35
@RobertLongson If viewBox does not agree with width and height the radius works, see https://upload.wikimedia.org/wikipedia/commons/archive/b/bd/20211109155946%21Test.svg – JoKalliauer Nov 09 '21 at 16:00

score 57 · Answer 2 · answered Dec 03 '13 at 17:11

57

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>

answered Dec 03 '13 at 17:11

cwingrav

949
1
10
10

7

This causes all sub-element strokes to be zero-width as well, so its not a good "background" option. – duanev Mar 07 '14 at 22:07

JoKalliauer · Answer 3 · 2019-09-19T15:59:56.063

53

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:

edited Sep 19 '19 at 15:59

answered Nov 14 '17 at 21:18

JoKalliauer

1,648
1
13
17

Gianluca Casati · Answer 4 · 2018-10-03T06:46:15.880

37

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>

edited Oct 03 '18 at 06:46

answered May 05 '18 at 16:58

Gianluca Casati

3,303
1
32
20

1

Though this works in general in all browsers, setting the `background-color` of the ` – conceptdeluxe May 13 '18 at 21:35
@conceptdeluxe interesting observation, in theory the style coded inside svg should apply only inside svg. However, setting width and height is almost always necessary. – Gianluca Casati May 15 '18 at 21:03
Is there a difference between `` and ``, assuming the ` – Labrador Jun 22 '18 at 11:26
@Labrador 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 https://www.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. – Gianluca Casati Jun 22 '18 at 13:05

score 11 · Answer 5 · edited May 23 '17 at 12:03

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.

at the beginning solves the problem for eog – nvrandow Feb 20 '17 at 15:22 — nvrandow, Feb 20 '17 at 15:22

JoKalliauer · Answer 6 · 2021-11-09T16:02:08.437

7

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>

edited Nov 09 '21 at 16:02

answered Nov 09 '21 at 13:34

JoKalliauer

1,648
1
13
17

score 3 · Answer 7 · answered Oct 26 '13 at 03:31

3

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>

answered Oct 26 '13 at 03:31

muyueh

1,018
13
16

15

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. – Charles-Édouard Coste Mar 23 '14 at 09:48
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. – clinux Nov 27 '15 at 05:18
1

@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. – Arunkumar Srisailapathi Aug 18 '16 at 07:27

Default background color of SVG root element

7 Answers7

Linked