Florian Ludwig wrote on 13.06.2007:
Hi,
is it possible to set a background color (or image)? Like in html 0:-) I tried to open a simple svg in iceweasel / firefox I created with inkscape, but the background appeared white...
Thanks,
Florian
Hi Florian,
Yes, you can set a background colour, but like you I was not able to do it with Inkscape's Document Options. If you open the XML editor inside Inkscape, you will find a tag called <sodipodi:namedview id="base">, and by inspecting that further you will find an attribute called "pagecolor". That's the color you set under File -> Document Options. I save my files as regular SVG, which means none-standard tags and attributes like "pagecolor" are not included.
So, how to proceed? According to the SVG specification over at the World Wide Web Consortium, www.w3.org/TR/SVG/, the "svg" element itself cannot have a "fill" attribute, but we can use a rectangle - the "rect"element - as our background.
The "rect" element's upper left corner is determined from the x and y attribute, and the lower right corner from the width and height attributes. We probably want x and y set to zero, which will start in the upper left corner of our browser's main viewport. Set width and height to 100% in both the svg element and the rectangle element, and we have our coloured background. By using percentages in stead of pixels we make sure our background fills the main viewport regardless of the current window size.
But we want more, right? Yes, we want that colour in a nice stylesheet, so we can change the background or other coloured elements easily. This is from the spec, lightly edited to give us a rectangle that covers our entire background:
<?xml version="1.0" standalone="no"?> <?xml-stylesheet href="mystyle2.css" type="text/css"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect x="0" y="0" width="100%" height="100%"/> </svg>
Notice the second line, which references our stylesheet. The stylesheet looks like this:
rect { fill: red; }
This was just an example, so please remember to use class or id in your SVG elements and reference those in your stylesheet, rather than colouring every rect element red. Now that we know how the files should look like when saved, we can try to do it with Inkscape. :-)
Cheers, Haakon