0

ALL,

I needed an SVG for my program so I started playing with the inkscape (this software was recommended to me by my *nix distro).

I installed the latest one in their repository and was able to successfully create a test SVG, which was successfully loaded inside my program. However:

In the Inkscape I see a white background.

In my program the background is transparent.

Is there a way to have a white background in my SVG? It means to represent a a piece of white paper, so it needs to be white.

TIA!

EDIT:

Below is the screenshot of what I'm looking at:

enter image description here

I understand that there is a background inside the thin black lines square. I also understand that it is displayed white by default. And I don't want to touch it.

What I do want to change is the background inside the thick black lines and inside the circle to represent a piece of paper with the magnifying glass over its bottom right corner.

Now all I did there is to create a drawing of that paper and the magnifying glass. I didn't do anything else.

(Figured picture worth 1000 words so put it there for clarification).

EDIT 2:

As you can see the Fill color of the circle in the magnifying glass is WHITE (255, 255, 255), but in my program it still shows up as transparent. So the background of the inkscape does not matter - an SVG will be made transparent.

How do I overcome this?

enter image description here

Improve this question
13
  • Not an Inscape user but can't you simply put a white filled rectangle behind whatever your subject is to represent your paper ?
    – Kyle
    Commented Apr 23, 2022 at 4:03
  • @Kyle, I suspect the SVG inkscape does not understand the white color and will use it to indicate transparency. OTOH, I have no idea how to do that - I'm not a graphic designer..
    – Igor
    Commented Apr 23, 2022 at 4:25
  • There re lots of really good Inkscape users on this forum- hopefully one will have a solution or explanation for you.
    – Kyle
    Commented Apr 23, 2022 at 4:46
  • Note.. a white filled rectangle is not the same as the white background of the work area. have you tried using a white filled rectangle as @Kyle suggests? or are you merely guessing that it would be the same as the standard work area, since that's white? A rectangle will work in most applications.
    – Scott
    Commented Apr 23, 2022 at 7:03
  • @Scott, please see my edit for clarification.
    – Igor
    Commented Apr 23, 2022 at 14:31

2 Answers 2

Reset to default
2

Technically, there is no background in an SVG, or in vector graphics more generally speaking. The reason for this is that SVGs are used for graphics on the web, and the background of the web page will become the background you see displayed, below the SVG graphic itself.

By default, Inkscape documents are usually set up to display a white page background, however this is not part of the SVG, it's just a convention Inkscape uses for display purposes. There is no actual physical background there.

However, you can create a rectangle the same size as the page and set the fill to white and stroke to none, then send to the bottom of the stack. You can use snapping to get the rectangle to fit exactly to the page, or select the rectangle, and do Edit > Resize Page to Selection.

I have the Inkscape document set to display a checked background here (you can do this in the Document Properties) rather than the default white, so you can see what is going on.

enter image description here

Improve this answer
8
  • please see my OP edit for clarification..
    – Igor
    Commented Apr 23, 2022 at 14:30
  • @Igor - hmm then not a rectangle, do the same but draw a shape with the Bézier tool, and fill it white, send to the bottom. Same process really. It's a shame the page outline is not just one shape, then you could have just changed the fill - instead you have separate lines which is not ideal.
    – Billy Kerr
    Commented Apr 23, 2022 at 15:28
  • what do you mean by page outline is not just one shape? Also, as far as I understand I need to draw the the same page shape with the white color inside and send it to the bottom. Now the question is - how do I do that?
    – Igor
    Commented Apr 23, 2022 at 15:37
  • @Igor You use the Bezier tool, or start with a square/rectangle, do Path > Object to Path, add some nodes with the Edit Paths by nodes tool, delete any extra nodes, adjust the Bézier handles, add a Stroke, set a Fill. This is all really basic stuff. I suggest you do some tutorials first. There are lots on line. Youtube is good. Search for "Logos by Nick" - an excellent channel with tons of Inkscape tutorials.
    – Billy Kerr
    Commented Apr 23, 2022 at 15:40
  • @Igor Also by "one shape" I mean a closed path (a shape that is joined all the way round), not individual lines. That is how you make a shape fillable in Inkscape - again this is basic functionality in all vector image editing software, not just Inkscape.
    – Billy Kerr
    Commented Apr 23, 2022 at 15:43
0

If I understood what you want to achieve, why just not use the fill property just like this?

<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.1" id="Layer_1" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512">
<path style="fill:#fff;stroke:#1a1a1a;stroke-width:20" d="M 97.375,55.5332 C 87.8715,55.5332 80,65.3986 80,77.4551 V 352.416 c 0,6.022 1.9611,11.569 5.1094,15.631 c 3.1482,4.061 7.5088,6.648 12.2676,6.648 h 89.996 h 89.996 c 4.765,0 8.985,-2.594 11.983,-6.658 c 2.997,-4.064 4.8,-9.607 4.8,-15.621 V 77.4551 c 0,-6.0197 -1.805,-11.477 -4.804,-15.4512 c -3,-3.9742 -7.221,-6.4707 -11.979,-6.4707 H 232.492 H 141.66 Z"/>
<path style="fill:#1a1a1a" d="m 119.255,154.458 h 67.821 v 24.415 h -67.821 z"/>
<path style="fill:#1a1a1a" d="m 119.255,300.949 h 152.209 v 24.415 H 119.255 Z"/>
<path style="fill:#1a1a1a" d="m 119.255,252.119 h 92.129 v 24.415 h -92.129 z"/>
<path style="fill:#1a1a1a" d="m 117.085,104.559 h 67.821 v 24.415 h -67.821 z"/>
<path style="fill:#1a1a1a" d="m 117.085,202.22 h 78.116 v 24.415 h -78.116 z"/>
<path style="fill:none;stroke:#1a1a1a;stroke-width:20" d="m 333.191,362.602 c 5.769,-10.076 8.779,-21.28 8.779,-32.568 c 0,-36.624 -29.767,-66.433 -66.307,-66.433 c -36.54,0 -66.307,29.809 -66.307,66.433 c 0,36.623 29.767,66.432 66.307,66.432 c 11.664,0 23.203,-3.219 33.488,-9.365"/>
<path style="fill:#1a1a1a;stroke:#1a1a1a;stroke-width:20" d="m 309.151,387.101 l 35.286,35.788 c 0.794,0.794 1.923,1.296 3.052,1.296 c 1.129,0 2.258,-0.46 3.052,-1.296 l 18.103,-18.312 c 1.672,-1.714 1.672,-4.39 0,-6.062 l -35.453,-35.913 z"/>
</svg>

This way you add white color to the sheet of paper and black to the magnifying glass handle, so the icon will keep a transparent background just as the glass but the sheet would be white.

This way you add white color to the sheet of paper and black to the magnifying glass handle, so the icon will keep a transparent background just as the glass but the sheet would be white.

enter image description here

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.