3

In Inkscape 1.2.2 on Windows 10 I'm tryint to create an SVG that completely starts off from px measurements, and I'm trying to get the base measurements (widths, heights, stroke widths, etc) all in integer values.

Whatever I try, it keeps smudging tiny fractions from those integers in the .svg file... Here's a repro:

  • Create a new document...
    • Document Properties, front page format "Custom" and in "px" measurements
    • Width 120,000 and Height at 50,000 (same for viewbox)
    • Scale at 1,000000 "px per user unit"
    • Display units set to px (same for Preferences > Interface > Grids, both kinds)
  • Create a rectangle, and for example the most outer rectangle set to
    • X: 0,000
    • Y: 0,000
    • W: 120,000
    • H: 50,000 ("px" in the dropdown right to it)

The first thing that's weird to me is that the "Stroke style" Width is 1,999 px, and if I set it to 2,000 then the X/Y/W/H values change for the worse. So for now I just fixate the X/Y/W/H and let the stroke width sit at a non-integer value.

  • Save the document as an Inkscape .svg file

Result, relevant pieces:

<svg
   width="120.00001"
   height="50.000004"
   viewBox="0 0 120.00001 50.000004"

I'm already confused now... ๐Ÿ˜ฎ, and after a few bits of metadata the content is equally weird:

<g
  inkscape:label="mylabel"
  inkscape:groupmode="layer"
  id="layer1"
  transform="translate(-97.913445,-31.265988)">
  <rect
     style="fill:none;stroke:#333333;stroke-width:1.999;stroke-dasharray:none"
     id="rect8092"
     width="118.00083"
     height="48.000835"
     x="98.913025"
     y="32.265568"
     inkscape:label="outerbox" />
</g>

That just really doesn't match my UI in Inkscape:

screenshot of inkscape UI with integer values marked in red everywhere

I understand that I'm working on a vector image, not a raster image. But surely I at least can get Inkscape to be precise in following my inputs in the UI?!

I suspect that I'm missing a key point here (is there some kind of scaling somewhere?!) and that this also relates to the Stroke style width issue.

What am I missing!?

8
  • Hi. Welcome to GDSE. I'm having difficulty reproducing this, but I see you have a transform going on. Did you resize the rectangle? Looks like these are probably rounding errors. If you create the rectangle by snapping to the page (not rescaling) you can avoid the transform entirely. Here's my Inkscape Plain SVG output
    – Billy Kerr
    Jan 25, 2023 at 21:34
  • If this fixes it for you, let me know and I can add it as an answer.
    – Billy Kerr
    Jan 25, 2023 at 21:36
  • Thanks for the replies! I really just installed Inkscape and hit "New document" with mentioned changes/settings.... never explicitly set any transform. Looking now where I could delete such a thing. - Also, thanks for the other tip, but I'll first have to find out then what "snapping to the page" means ๐Ÿ˜…. Either way I'll try some more stuff with your input, will keep y'all posted.
    – Jeroen
    Jan 25, 2023 at 22:00
  • You can enable snapping to page borders in the snapping controls - so that when you draw a rectangle it will snap to the page border. shown here
    – Billy Kerr
    Jan 25, 2023 at 22:06
  • Also there's an extension on github here for applying transforms (i.e. remove them) but if you are new to Inkscape I don't know how you would feel about installing an extension. It throws an error but still works, it needs to be updated for Inkscape 2.2.x - but only one line of code. You can find the fix in the github issues page Under "Deprecated multiplication operator". The fix is to edit a single * character, and change it to an @ character
    – Billy Kerr
    Jan 25, 2023 at 22:12

2 Answers 2

2

The width and height of the document being off by tiny fractions is probably a result of the technical limitations of floating point arithmetic for computers. These rounding errors often compound and cause more and more inaccuracies down the line, which is why the dimensions of objects are even more off.

The best way to avoid this is to set these values directly and not let them be recalculated by Inkscape, since computing floating point numbers is what might introduce rounding errors. Restarting Inkscape before setting your document dimensions may also help.

If you want to be 100% sure that you're using the correct numbers, you can use the 'Edit โ†’ XML Editor...' and set the width, height and viewBox attributes on the <svg>-element directly.

Also, make sure to use the 64-bit version of Inkscape (if possible), as 32-bit may introduce bigger rounding errors and more inaccuracies.

Another thing that you can do in Inkscape to mitigate rounding errors is opening the preferences, going to 'Input/Output โ†’ SVG Output' and changing the 'Numeric precision' and the 'Minimum exponent' settings. If you keep having problems with rounding errors, you may want to decrease the former and increase the latter a bit.

Note, however that 'precision' here does not mean the number of digits after the decimal point, but the number of significant digits in the whole number โ€“ i.e. 123.45678 with a precision of 4 would result in 123.4 not 123.4568. What this means is that, instead of rounding errors, this may now introduce precision errors, so keep this value at a reasonable range. The default (8) is usually a pretty good setting, but going down one or two may help.

Alternatively, you can also 'File โ†’ Save as...' your final document as a 'Optimized SVG' and set the 'Number of significant digits for coordinates' in the following dialog, plus a few other useful optimizations. The same caveat explained above applies here as well, though. Just make sure to keep an 'Inkscape SVG' file around, in case you want to edit it later.

4
  • Thx for the additional insights! I initially suspected something like this too. The other answer was the right answer for my specific situation (apart from the snapping bug I encountered it worked for me) and I'd accepted it as such. But your answer gives another useful perspective that might help others who do an internet search for their specific problem and land on this Q&A thread ๐Ÿ‘
    – Jeroen
    Jan 26, 2023 at 13:58
  • @Jeroen Xrott is right though. My transform/translate thing was a red herring. Should really give correct answer to him.
    – Billy Kerr
    Jan 26, 2023 at 14:04
  • Oohhhh.... such a plot twist! ๐Ÿ˜… Interesting that a side effect of your answer and tips were still enough to get my SVG into integers, probably because it made sure I didn't trigger those floating point issues. - It seems useful indeed to leave both answers here. Future readers might benefit from all of the information here. Thanks to both of ya!
    – Jeroen
    Jan 26, 2023 at 14:26
  • @Jeroen There's more. With the rectangle selected using the Select Tool (S), it shows the bounding box size, which includes the stroke width in the H&W dimensions. To see the actual rect element size or to adjust it by typing in new values, you need to have the Rectangle tool selected.
    – Billy Kerr
    Jan 26, 2023 at 15:29
1

This looks like a rounding error to me. I also notice there is a Transform in your SVG, and I suspect that is what is causing the problem. I suspect you may have moved or scaled the rectangle after drawing it.

Instead, if you draw your rectangle, by first enabling snapping to Page Borders in the Advanced Snapping controls, so that the rectangle snaps directly to the page, then you can avoid the transform entirely any scaling.

enter image description here

Here's my Inkscape Plain SVG code when I do that.

<svg
   width="120"
   height="50"
   viewBox="0 0 120 50"
   version="1.1"
   id="svg5"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">
  <defs
     id="defs2" />
  <g
     id="layer1">
    <rect
       style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:2;stroke-dasharray:none;paint-order:fill markers stroke;stop-color:#000000"
       id="rect4607"
       width="120"
       height="50"
       x="0"
       y="0" />
  </g>
</svg>

Transforms can be quite annoying and there is actually an Apply Transform extension available which can remove transforms by baking them in. This might be one option for you. The link to get it is on github here. Unfortunately, while this works in 1.2.2 it throws a Python deprecation error, but if you follow the instructions in the deprecation error message and change the * character to an @ character in the code, you should be able to run the extension without the error.

Update: Actually looks like Xrott is correct here. The OP should really give the correct answer to him. It is indeed caused by rounding errors when Inkscape recalculates a size after scaling or resizing the rectangle, not the transform/translate. I've struck through these parts of my answer as that was a a red herring. I am going to leave this answer here, as my solution still works as a method to fix it. But you can also select the object, switch to the Rectangle tool, and type in the values in the control bar along the top.

8
  • This is most likely the correct answer! Can't fully test or accept it yet because the "snapping" part gives me (on Windows with v1.2.2) this fatal crash of Inkscape that's supposedly fixed in later versions. I'll try to remember and come back here when I get the new version to report back further details if I have 'em. For now I'll accept the answer as it's most likely the right one. Ty!
    – Jeroen
    Jan 25, 2023 at 22:43
  • The transform on the layer-element has only a 'translate()' instruction inside, so it only affects the 'x' and 'y' attributes of the rectangle, not the width and height, so that is not really the problem. The thing that is causing issues are the rounding errors introduced by Inkscape on the 'width' and 'height' attributes on the svg-element.
    – Xrott
    Jan 26, 2023 at 8:25
  • @Xrott - I am well aware it's rounding errors. Did you not read the very first sentence of my answer? If the translate isn't the direct cause, then it must be because the OP resized the rectangle at some point after drawing it, causing Inkscape to recalculate the dimensions, introducing the rounding error. However, re-entering the sizes directly should fix this, but the OP is having problems with the UI not displaying the figures they get when saving the SVG. I can't actually replicate the issue myself, not even the crash they report when trying to use snapping.
    – Billy Kerr
    Jan 26, 2023 at 10:03
  • Yes, I did read your answer, but you didn't go on to resolve the issue and instead talked about transforms, which are not the problem. Have you read the question? The transform on the layer was not added by scaling the rectangle, but by changing the document dimensions. That's when Inkscape automatically adds a translation to all layers to keep the contents in the same place. If the rectangle was scaled, then there would be a transform-attribute on the rectangle โ€“ not on the layer โ€“ and there isn't. The rounding error is on the <svg> element, not the rectangle.
    – Xrott
    Jan 26, 2023 at 10:15
  • @Xrott Not sure you have actually read the question yourself to be honest. The OP's UI is showing the correct size of the rectangle, but the output SVG has different sizes. As I said already, I can't actually reproduce this issue, so I was kind of working blind to try to resolve it. Also if you read the chat I had with the OP, they did in fact scale the rectangle by clicking and dragging the scale handles. I think something else is going on here, perhaps the order they did things. Perhaps there has been a recent update that introduced a bug. I'm on Inkscape 1.2.2 (732a01da63, 2022-12-09)
    – Billy Kerr
    Jan 26, 2023 at 10:37

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.