2

Does Inkscape have a way to put points on a curve or line so the coordinates of the points will be written to the svg file? I seem so close to doing this, but perhaps I need a different program.

The example image shows a Bezier curve (using c in the svg) with two nodes, markers on each of the two nodes (but no more), and a dotted stroke between the nodes.enter image description here

I think if each of the "dots" of the stroke could be written out as coordinates, my objective might be reached. I have been able to add nodes, and I could add them to each of those dots and it will work, but will be difficult for large drawings. If nodes are the only way to get coordinates it would be good to know, and if the nodes can be evenly spaced, that will be ideal.

I am omitting the svg file contents for brevity, but I have made some progress on my objective of getting circles centered on the points describing a curve by editing the svg file (see this post for example). I have discerned some relationships between x,y coords of nodes, circle, m, c, z records in the svg, but that is in progress. So far - not always straight forward. Processing will ultimately need to be done with command-line tools such as awk,bash,sed when the number of points is large enough.

UPDATE : I just found this SO post which will help - I just started working on this though :

How to extract the cartesian coordinates (x,y) of an svg image?

the curve in svg format:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   width="210mm"
   height="297mm"
   viewBox="0 0 210 297"
   version="1.1"
   id="svg5"
   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
   sodipodi:docname="inkscape_curve_01_23feb23a.svg"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">
  <sodipodi:namedview
     id="namedview7"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageshadow="2"
     inkscape:pageopacity="0.0"
     inkscape:pagecheckerboard="0"
     inkscape:document-units="mm"
     showgrid="false"
     inkscape:zoom="1"
     inkscape:cx="397"
     inkscape:cy="560.5"
     inkscape:window-width="1680"
     inkscape:window-height="986"
     inkscape:window-x="0"
     inkscape:window-y="0"
     inkscape:window-maximized="1"
     inkscape:current-layer="layer1" />
  <defs
     id="defs2" />
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1">
    <path
       style="fill:none;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       d="m 53.049246,151.83874 c 2.08256,-72.783154 80.316864,-35.42292 80.316864,-35.42292"
       id="path857"
       sodipodi:nodetypes="cc" />
  </g>
</svg>
Improve this question
4
  • I dont think your approach is ultimately very productive. As svg does not guarantee what you want. First theres no guarantee that the scale of your points is what you want, also not nesseserly written in absolute coordinates and so on. so you should not really rely on svg text parsing for anything
    – joojaa
    Feb 23 at 18:07
  • 1
    also this seems like a xy question as in your asking what you think will solve your problem. Not describing your actual problem. Your also most probably in wrong place for asking.
    – joojaa
    Feb 23 at 18:15
  • Have to agree, this does appear to be an XY problem. Why do you want to do this? What problem are you actually trying to solve by doing this? Why does it matter if the dots have co-ordinates? You can add extra nodes using the Insert Nodes button in the Controls Bar when you have the Edit Paths by Nodes tool selected. - select one or more segments, and hit the button repeatedly
    – Billy Kerr
    Feb 23 at 18:35
  • this thread might help : stackoverflow.com/questions/15857818/python-svg-parser ... think about xml or svg parser modules in python. The thread has a nifty script to get coordinates. I'm still trying to understand how to use it, so the nodes are elusive at the moment.
    – Bryan-StackExchange
    Mar 1 at 20:02

2 Answers 2

Reset to default
1

Inkscape has an extension that may be useful here. The extension is written in Python, so you may be able to modify it if you need more functionality. The extension file is located in the share\inkscape\extensions directory, and is named addnodes.py

Anyway . . .

If you draw a path with two nodes, and curves, click on Extensions > Modify Path > Add nodes, you can then add the nodes you want. There are two methods to do it: either by maximum segment length, or by number of segments.

enter image description here

If you then select a node, using the Edit Paths tool N - you can see the x,y co-oridnate of the selected node in the controls bar.

enter image description here

Improve this answer
2
  • Indeed, this works for the curve above. I simply note that adding 40 nodes makes the d="m 53.0492... line in the svg file longer as the nodes are added. The nodetypes is unchanged (cc), yet there are three "smooth nodes" in with the remainder of "corner nodes". Just things to be aware of - very useful to work with further - perhaps when getting x,y coordinates from them in plain-text.
    – Bryan-StackExchange
    Mar 3 at 15:28
  • making the rounds - this is a good answer - didn't have a checkmark - but I figure it should be checkmarked, even if there are other checkmarks. Slowly I learn.
    – Bryan-StackExchange
    Mar 13 at 15:14
1

A way to get coordinates from svg:

Use this website. The website takes an svg file and outputs json or csv format x,y coordinates - e.g. to plot on a graph.

Another way to get coordinates from an svg file:

svg-path-interpolator. See this Stack Overflow post. One technical note : I had strange output when a shape such as a letter "G" had quadratic (q in the svg) parts of the path (I refrain from examples here). This Stack Overflow post suggests to try cairosvg input.svg -o output.svg which converts all quadratics q to cubics c. This discusses an example of how font can be affected by this issue, and this explains the mathematics relating cubic Bezier curves with quadratics.

Back to the example at hand :

Copy/paste the svg file of the example curve into the above website and follow instructions (the precise code above might be off - I have a number of these files laying around - it gets the idea across). Pay attention that the settings make no scale or translations calculations. The website allows a wide range of dots, I picked 40. The x/y coordinates are provided as plain text. Copy/paste, remove , and x,y. I wrote this awk script to make circles (red, radius 60, etc.) from the x y coordinates :

#!/bin/bash
# make circles from coordinates
awk '{    x[NR] = $1 ; y[NR] = $2;  \

     printf ("    <circle\n")
     printf ("       style=\"fill:none;fill-opacity:0.25;stroke:\#ff0000;stroke-width:0.264999;stroke-opacity:1\"\n")
     printf ("       id=\"circle%2.0f\"\n", NR)
     printf ("       cx=\"%3.6f\"\n", x[NR])
     printf ("       cy=\"%3.6f\"\n", y[NR])
     printf ("       r=\"60\"/>\n")
}' $1

Copy/paste the output of svg circles into the original curve svg so the circles go between a id="defs2" /> and <g in this way :

<!-- begin svg file excerpt -->
  <defs
     id="defs2" />
<!-- here comes example code of one of the circles --> 
    <circle
       style="fill:none;fill-opacity:0.25;stroke:#ff0000;stroke-width:0.264999;stroke-opacity:1"
       id="circle40"
       cx="130.847946"
       cy="115.304962"
       r="60"/>
<!--... lots more circles here not shown.. -->
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1">
<,!-- end of svg file excerpt -->

There might be better ways to edit that.

Here is the result viewed in Inkscape :enter image description here

It is clear from clicking the circles that the centers line up precisely with the curve.

The svg-path-interpolator approach will also work - I might share some helpful scripts in the future.

This answer satisfies the question : how to get dots/points on a curve/line in an svg file into x,y coordinates.

Improve this answer

Your Answer

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

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