In Inkscape, how do I add a white background?

Question

Currently, the saved svg file has a white and gray checkered background, which I assume to be because the background is transparent. I am trying to make this a white background. I viewed other answers, and one said to navigate into the files. I could not find the file button in Inkscape, so I decided to simply add a background square. After doing so, the problem is still unsolved.

Why is nothing working, and how can I fix this problem?

Answer 1

You are correct--that "checked background" is how many programs indicate transparent areas. SVG files have a transparent background. Changing the background color is not part of the SVG standard, so changing the background color in Inkscape won't carry over to the SVG file when its viewed in a browser.

There are a few ways to get a solid background color:

1. If you are exporting a PNG, on the File menu, click Document Properties.
   At the bottom of the Document Properties, click Background Color. Change it to whatever you want. Make sure that A (the alpha channel) is not 0. 255 is solid.
   Note: The page background is not a standard SVG feature, so browsers will probably not honor it. Only use this method if you are just converting the the SVG to a PNG with Inkscape.
2. Put a rectangle in the background.
   Make sure that the fill color for it is white (I believe the default is transparent) and there is no stroke. This is probably the most browser friendly.

Similar question: Default background of svg root element

Answer 2

Tips to make the background rectangle workaround more bearable

As mentioned at: https://graphicdesign.stackexchange.com/a/74920/21867 based on https://stackoverflow.com/questions/11293026/default-background-color-of-svg-root-element the only reliable SVG background color solution seems to be to add a colored rectangle to the background.

Unfortunately, Inkscape does not have an option to export the SVG with that rectangle automatically added, related discussion, so to make things a bit more convenient, you could use the following tips:

• Just make the background rectangle larger than the image, don't worry about making it the exact same size.

  SVG supports objects outside of the viewport, and only what is in the viewport will show in the end.

  Making the background rectangle be exactly as large as the image can be hard when:

  • the image size is not a multiple of the grid size is not a multiple of the grid size, so you have no appropriate snap
  • you keep resizing the image during development to have more room for certain components

  You could also just enter exact coordinates/widths manually in Inkscape, but I don't think there's any advantage in doing so.

  If you have a fixed target size, one alternative is to first make the rectangle, manually enter dimensions, and then Ctrl + Shift + D > "Resize page to drawing" (Ctrl + Shift + R) as mentions at: https://youtu.be/cLIYCJ0DM6Q?t=145

• put the background in a separate layer below the top layer and lock it. Otherwise you are going to keep dragging it around by mistake when you would want to move foreground items instead. This tip is mentioned at: https://www.youtube.com/watch?v=cLIYCJ0DM6Q&t=196s

  This also has the advantage that if you ever want to "Resize page to drawing" (Ctrl + Shift + R ) based on contents without the (oversized) background rectangle, you can just make the background layer invisible before Ctrl + Shift + R, and make it visible again aferwards, as Inkscape does not consider invisible layers for Ctrl + Shift + R.

• Document properties (Ctrl + Shift + D) > Border > "Border on top of drawing", otherwise your background rectangle is going to hide the borders of the viewport, and you lose the notion of where you are inside the drawing.

• Set "Document properties" (Ctrl + Shift + D) > "Checkered Background" to be able to know where your background is, otherwise it is hard to know where the background starts and ends to ensure that the entire canvas is covered

  Alternatively, you can also add a border to the background rectangle. But I'd rather keep the potential for noise on the output to a minimum.

-b on the command line for PNG export

E.g. to get a white background instead of the now default transparent:

inkscape -b FFFFFF -h 1024 input.svg -o output.png

Tested on Inkscape 1.0.1, Ubuntu 20.10.

Related: https://superuser.com/questions/249860/how-can-i-change-inkscapes-default-export-background-color-from-yellow-to-white