Inkscape: round coordinates

Question

Is there a command in Inkscape to round coordinates of a path to the closest integer value.

For instance, to replace this path:

m 0,0 261.98828,-890.8828 -299.999999,-900 2593.486319,54.4063 -253.9941,850.09565 264.3594,870.83005 z

by this:

m 0,0 262,-891 -300,-900 2593,54 -254,850 264,871 z

score 5 · Answer 1 · answered Jul 24 '20 at 05:55

5

Yes, there is way to set coordinates precision.

File -> Save as...
Save it as "Optimized SVG"
In the first dialog setting, set the coordinate "precision" to 3 or whatever you want

answered Jul 24 '20 at 05:55

Rytis Guntulis

181
2
5

ADJenks · Answer 2 · 2020-09-22T18:19:28.953

The example below shows 3 circles/points and a line connecting them. The points are rounded integers, whereas the line has trailing decimal values.

The javascript waits 2 seconds (so you can compare) before transforming all of the paths (just one) and aligning them to the nearest integer. This can be seen by the alignment of the path corners to the circles.

Load your SVG in a browser, run the JavaScript in the browser console, then export the DOM by right clicking on a node and copying the outerHTML. That should do.

setTimeout(() => {
  document.querySelectorAll('path').forEach((p) => {
    p.setAttribute(
      'd',
      p.getAttribute('d')
      .split(/(\d*\.?\d*)/g)
      .map((e) => {
        return isNaN(parseFloat(e)) ?
          e :
          Math.round(parseFloat(e), 0)
      }).join(''))
  })
}, 2000)

html,
body {
  margin: 0;
  height: 100vh;
  overflow: hidden;
}

<svg viewBox="0 0 50 30" height="100%">
  <g fill="none">
    <circle cx="5" cy="21" r="1" stroke="green" stroke-width=".5" />
    <circle cx="43" cy="6" r="1" stroke="green" stroke-width=".5" />
    <circle cx="35" cy="24" r="1" stroke="green" stroke-width=".5" />
    <path
      stroke="red" 
      d="
       M 5.4131 20.555
       L 43.345 5.666
       L 34.822 24.22222
       Z"
     stroke-width=".5"
     />
  </g>
</svg>

It takes all the path elements and edits all the d attributes, rounding any numbers to the nearest integer.

score 2 · Accepted Answer · answered May 05 '18 at 22:01

Option 1: You'd need to use snapping when you create the path, or snap the nodes after creating the path. Set a grid to be 1px by 1px, and snap while drawing.

Option 2: Or you'd need to write a script that finds all 'd' attributes in the SVG file, and rounds the values in them to integer numbers.

There are two ways to set the numeric precision (for the SVG itself and when saving to Optimized SVG) - BUT those only define the length of the whole number - so if you set it to 4, you can get 200.1 as well as 1200 or 12.48 , so that's not going to help in this case.

Inkscape: round coordinates

3 Answers3