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    lt svg viewBox  0 0 500 600  style  background  red  gt    content    lt  svg gt    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

User · Answer

I m currently working on a file like this    lt  xml version  1 0  encoding  UTF-8  standalone  no   gt   lt  xml-stylesheet type  text css  href  style css    gt   lt svg   xmlns  http   www w3 org 2000 svg    version  1 1    width  100     height  100     viewBox  0 0 600 600  gt        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    lt  xml version  1 0  encoding  UTF-8  standalone  no   gt   lt svg     xmlns  http   www w3 org 2000 svg      xmlns sodipodi  http   sodipodi sourceforge net DTD sodipodi-0 dtd      version  1 1             lt sodipodi namedview      pagecolor   480000       gt    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

User · Answer

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   lt svg xmlns  http   www w3 org 2000 svg  width  50  height  50  gt     lt style gt svg   background-color  red    lt  style gt     lt text gt hello lt  text gt   lt  svg gt

User · Answer

It is the answer of  Robert Longson  now with code  there was originally no code  it was added later     x000D   x000D   lt  xml version  1 0  encoding  UTF-8   gt  x000D   lt svg version  1 1  xmlns  http   www w3 org 2000 svg  gt  x000D    lt rect width  100   height  100   fill  red   gt  x000D   lt  svg gt  x000D   x000D   x000D    This answer uses    https   stackoverflow com a 11293812 6747994 https   developer mozilla org en-US docs Web SVG Tutorial Fills and Strokes

User · Answer

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  lt rect gt  element with width and height of 100  and fill  red  as the first child of the  lt svg gt  element  for example    lt rect width  100   height  100   fill  red   gt

User · Answer

Another workaround might be to use  lt div gt  of the same size to wrap the  lt svg gt   After that  you will be able to apply  background-color   and  background-image  that will affect thesvg    lt div class  background  gt     lt svg gt  lt  svg gt   lt  div gt    lt style type  text css  gt   background    background-color  black       background-image        lt  style gt

User · Answer

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    lt svg style  stroke-width  0px  background-color  blue   gt   lt  svg gt

[svg] Default background color of SVG root element

Examples related to svg