xEthereal
xEthereal

Reputation: 409

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

I have an svg image that contains a continuous path, and I want to extract its cartesian coordinates (x,y) preferably to a csv file.

I’m doing this to recreate 3B1B’s animation of any arbitrary path using epicycles. Link here https://youtu.be/-qgreAUpPwM

Upvotes: 2

Views: 8123

Answers (2)

ezra_vdj
ezra_vdj

Reputation: 223

Chiming in with another solution that worked for me. I needed to convert an SVG curve to X,Y coordinates, with the X coordinates at a fixed interval. This is a 2-part solution using an online tool and Excel.

1. Get the coordinates.

This amazing tool takes your SVG curve and spits out XY coordinates to your specification. Make sure the offset of the output equals 0. Note the more points you export, the better the interpolation will be.

2. Fix the X intervals.

This is if you need your X intervals fixed to a certain distance like I did. The reason the tool doesn't output results this way is because it divides the points along the length of the curve, not along the X axis. You need to do this in Excel. The method here is based off this article.

This is the formula used to interpolate new Y values from know X's and Y's:

=FORECAST(A2, INDEX($C$1:$C$727,MATCH(A2,$B$1:$B$727,1)):INDEX($C$1:$C$727,MATCH(A2,$B$1:$B$727,1)+1), INDEX($B$1:$B$727,MATCH(A2,$B$1:$B$727,1)):INDEX($B$1:$B$727,MATCH(A2,$B$1:$B$727,1)+1))

If you format your data in the same way as the picture below, pasting that formula into E3 and dragging down, it should work perfectly. A is the X position you want to find, B & C are the results from Coordinator, and E is the new Y values given the corresponding A value. Note that E2 doesn't use the formula as the Y value for X = 0 is already known.

enter image description here

Upvotes: 1

Arty
Arty

Reputation: 16747

For example I'm parsing ballons.svg file below.


Variant 1. Using Python (see also Variant 2 using JavaScript).

First I'm using xml.dom module to find path entries inside file. Then path entries are parsed by svg.path library (needs to be installed by pip install svg.path).

There are many different types of objects can be inside path entry, e.g. Line, Arc, CubicBezier, QuadraticBezier, Close, etc.

For each path first I print all objects as they are inside Objects: section. Then if you need coordinates of those objects then there are start/end attributes available in this objects. They point to start/end point of corresponding objects.

Start point (X, Y) of object inside path is (obj.start.real, obj.start.imag). End point (X, Y) of object is (obj.end.real, obj.end.imag). But these are only ending points, intermediate points of curve are not contained inside SVG file and need to be calculated mathematically.

Try it online!

from xml.dom import minidom
from svg.path import parse_path

doc = minidom.parse('ballons.svg')
for ipath, path in enumerate(doc.getElementsByTagName('path')):
    print('Path', ipath)
    d = path.getAttribute('d')
    parsed = parse_path(d)
    print('Objects:\n', parsed, '\n' + '-' * 20)
    for obj in parsed:
        print(type(obj).__name__, ', start/end coords:', ((round(obj.start.real, 3), round(obj.start.imag, 3)), (round(obj.end.real, 3), round(obj.end.imag, 3))))
    print('-' * 20)
doc.unlink()

Output:

Path 0
Objects:
 Path(Move(to=(144.042+167.583j)), CubicBezier(start=(144.042+167.583j), control1=(143.489+157.013j), control2=(148.337+146.4j), end=(157.00900000000001+139.192j)), Arc(start=(157.00900000000001+139.192j), radius=(35.8+35.8j), rotation=0.0, arc=False, sweep=True, end=(177.39800000000002+130.84300000000002j)), Arc(start=(177.39800000000002+130.84300000000002j), radius=(7.929+7.929j), rotation=0.0, arc=False, sweep=False, end=(178.22400000000002+130.74300000000002j)), CubicBezier(start=(178.22400000000002+130.74300000000002j), control1=(190.431+128.57700000000003j), control2=(206.53600000000003+128.52800000000002j), end=(224.794+130.60100000000003j)), Arc(start=(224.794+130.60100000000003j), radius=(8+8j), rotation=0.0, arc=False, sweep=False, end=(231.431+117.07400000000003j)), CubicBezier(start=(231.431+117.07400000000003j), control1=(221.173+106.52800000000002j), control2=(213.358+96.59500000000003j), end=(208.203+87.55000000000003j)), Arc(start=(208.203+87.55000000000003j), radius=(7.962+7.962j), rotation=0.0, arc=False, sweep=False, end=(207.756+86.85000000000002j)), Arc(start=(207.756+86.85000000000002j), radius=(35.82+35.82j), rotation=0.0, arc=False, sweep=True, end=(201.143+65.83200000000002j)), CubicBezier(start=(201.143+65.83200000000002j), control1=(201.143+47.13700000000002j), control2=(214.906+31.932000000000023j), end=(231.824+31.932000000000023j)), Arc(start=(231.824+31.932000000000023j), radius=(28.568+28.568j), rotation=0.0, arc=False, sweep=True, end=(250.75400000000002+39.16400000000002j)), Arc(start=(250.75400000000002+39.16400000000002j), radius=(8+8j), rotation=0.0, arc=False, sweep=False, end=(261.24600000000004+39.16400000000002j)), Arc(start=(261.24600000000004+39.16400000000002j), radius=(28.568+28.568j), rotation=0.0, arc=False, sweep=True, end=(280.17600000000004+31.932000000000023j)), CubicBezier(start=(280.17600000000004+31.932000000000023j), control1=(297.09400000000005+31.932000000000023j), control2=(310.857+47.142000000000024j), end=(310.857+65.83700000000002j)), Arc(start=(310.857+65.83700000000002j), radius=(35.82+35.82j), rotation=0.0, arc=False, sweep=True, end=(304.244+86.85500000000002j)), Arc(start=(304.244+86.85500000000002j), radius=(7.962+7.962j), rotation=0.0, arc=False, sweep=False, end=(303.797+87.55500000000002j)), CubicBezier(start=(303.797+87.55500000000002j), control1=(298.64200000000005+96.60000000000002j), control2=(290.827+106.53300000000002j), end=(280.569+117.07900000000002j)), Arc(start=(280.569+117.07900000000002j), radius=(8+8j), rotation=0.0, arc=False, sweep=False, end=(287.206+130.60600000000002j)), CubicBezier(start=(287.206+130.60600000000002j), control1=(305.464+128.53300000000002j), control2=(321.567+128.58300000000003j), end=(333.776+130.74800000000002j)), Arc(start=(333.776+130.74800000000002j), radius=(7.929+7.929j), rotation=0.0, arc=False, sweep=False, end=(334.60200000000003+130.848j)), Arc(start=(334.60200000000003+130.848j), radius=(35.8+35.8j), rotation=0.0, arc=False, sweep=True, end=(354.99+139.19600000000003j)), CubicBezier(start=(354.99+139.19600000000003j), control1=(355.923+139.97100000000003j), control2=(356.821+140.79600000000002j), end=(357.663+141.64100000000002j)), Line(start=(357.663+141.64100000000002j), end=(369.017+130.36800000000002j)), CubicBezier(start=(369.017+130.36800000000002j), control1=(367.817+129.16200000000003j), control2=(366.542+127.99300000000002j), end=(365.217+126.89300000000003j)), Arc(start=(365.217+126.89300000000003j), radius=(51.746+51.746j), rotation=0.0, arc=False, sweep=False, end=(336.168+114.92100000000003j)), Arc(start=(336.168+114.92100000000003j), radius=(151.429+151.429j), rotation=0.0, arc=False, sweep=False, end=(305.437+113.18500000000003j)), Arc(start=(305.437+113.18500000000003j), radius=(136.436+136.436j), rotation=0.0, arc=False, sweep=False, end=(317.5+95.82200000000003j)), Arc(start=(317.5+95.82200000000003j), radius=(51.744+51.744j), rotation=0.0, arc=False, sweep=False, end=(326.861+65.83000000000003j)), CubicBezier(start=(326.861+65.83000000000003j), control1=(326.861+38.312000000000026j), control2=(305.92+15.930000000000028j), end=(280.18+15.930000000000028j)), Arc(start=(280.18+15.930000000000028j), radius=(44.6+44.6j), rotation=0.0, arc=False, sweep=False, end=(256+23.13400000000003j)), Arc(start=(256+23.13400000000003j), radius=(44.6+44.6j), rotation=0.0, arc=False, sweep=False, end=(231.824+15.92500000000003j)), CubicBezier(start=(231.824+15.92500000000003j), control1=(206.084+15.92500000000003j), control2=(185.14300000000003+38.312000000000026j), end=(185.14300000000003+65.83000000000003j)), Arc(start=(185.14300000000003+65.83000000000003j), radius=(51.738+51.738j), rotation=0.0, arc=False, sweep=False, end=(194.50500000000002+95.82200000000003j)), Arc(start=(194.50500000000002+95.82200000000003j), radius=(136.32+136.32j), rotation=0.0, arc=False, sweep=False, end=(206.56000000000003+113.18000000000004j)), Arc(start=(206.56000000000003+113.18000000000004j), radius=(151.568+151.568j), rotation=0.0, arc=False, sweep=False, end=(175.83000000000004+114.91600000000004j)), Arc(start=(175.83000000000004+114.91600000000004j), radius=(51.746+51.746j), rotation=0.0, arc=False, sweep=False, end=(146.78000000000003+126.88800000000003j)), CubicBezier(start=(146.78000000000003+126.88800000000003j), control1=(134.24600000000004+137.30700000000004j), control2=(127.24900000000002+152.83200000000002j), end=(128.06300000000005+168.41700000000003j)), Close(start=(128.06300000000005+168.41700000000003j), end=(144.042+167.583j))) 
--------------------
Move , start/end coords: ((144.042, 167.583), (144.042, 167.583))
CubicBezier , start/end coords: ((144.042, 167.583), (157.009, 139.192))
Arc , start/end coords: ((157.009, 139.192), (177.398, 130.843))
Arc , start/end coords: ((177.398, 130.843), (178.224, 130.743))
CubicBezier , start/end coords: ((178.224, 130.743), (224.794, 130.601))
Arc , start/end coords: ((224.794, 130.601), (231.431, 117.074))
CubicBezier , start/end coords: ((231.431, 117.074), (208.203, 87.55))
Arc , start/end coords: ((208.203, 87.55), (207.756, 86.85))
Arc , start/end coords: ((207.756, 86.85), (201.143, 65.832))
CubicBezier , start/end coords: ((201.143, 65.832), (231.824, 31.932))
Arc , start/end coords: ((231.824, 31.932), (250.754, 39.164))
Arc , start/end coords: ((250.754, 39.164), (261.246, 39.164))
Arc , start/end coords: ((261.246, 39.164), (280.176, 31.932))
CubicBezier , start/end coords: ((280.176, 31.932), (310.857, 65.837))
Arc , start/end coords: ((310.857, 65.837), (304.244, 86.855))
Arc , start/end coords: ((304.244, 86.855), (303.797, 87.555))
CubicBezier , start/end coords: ((303.797, 87.555), (280.569, 117.079))
Arc , start/end coords: ((280.569, 117.079), (287.206, 130.606))
CubicBezier , start/end coords: ((287.206, 130.606), (333.776, 130.748))
Arc , start/end coords: ((333.776, 130.748), (334.602, 130.848))
Arc , start/end coords: ((334.602, 130.848), (354.99, 139.196))
CubicBezier , start/end coords: ((354.99, 139.196), (357.663, 141.641))
Line , start/end coords: ((357.663, 141.641), (369.017, 130.368))
CubicBezier , start/end coords: ((369.017, 130.368), (365.217, 126.893))
Arc , start/end coords: ((365.217, 126.893), (336.168, 114.921))
Arc , start/end coords: ((336.168, 114.921), (305.437, 113.185))
Arc , start/end coords: ((305.437, 113.185), (317.5, 95.822))
Arc , start/end coords: ((317.5, 95.822), (326.861, 65.83))
CubicBezier , start/end coords: ((326.861, 65.83), (280.18, 15.93))
Arc , start/end coords: ((280.18, 15.93), (256.0, 23.134))
Arc , start/end coords: ((256.0, 23.134), (231.824, 15.925))
CubicBezier , start/end coords: ((231.824, 15.925), (185.143, 65.83))
Arc , start/end coords: ((185.143, 65.83), (194.505, 95.822))
Arc , start/end coords: ((194.505, 95.822), (206.56, 113.18))
Arc , start/end coords: ((206.56, 113.18), (175.83, 114.916))
Arc , start/end coords: ((175.83, 114.916), (146.78, 126.888))
CubicBezier , start/end coords: ((146.78, 126.888), (128.063, 168.417))
Close , start/end coords: ((128.063, 168.417), (144.042, 167.583))
--------------------
Path 1
Objects:
 Path(Move(to=(272.924+205.044j)), Arc(start=(272.924+205.044j), radius=(7.852+7.852j), rotation=0.0, arc=False, sweep=False, end=(272.67199999999997+204.251j)), CubicBezier(start=(272.67199999999997+204.251j), control1=(271.53+201.213j), control2=(270.472+197.863j), end=(269.525+194.293j)), Arc(start=(269.525+194.293j), radius=(13.993+13.993j), rotation=0.0, arc=False, sweep=False, end=(242.47499999999997+194.293j)), CubicBezier(start=(242.47499999999997+194.293j), control1=(241.52799999999996+197.862j), control2=(240.47499999999997+201.21200000000002j), end=(239.32799999999997+204.25j)), Arc(start=(239.32799999999997+204.25j), radius=(7.852+7.852j), rotation=0.0, arc=False, sweep=False, end=(239.07599999999996+205.043j)), Arc(start=(239.07599999999996+205.043j), radius=(36.468+36.468j), rotation=0.0, arc=False, sweep=True, end=(200.85499999999996+231.812j)), Line(start=(200.85499999999996+231.812j), end=(199.14499999999995+247.721j)), Arc(start=(199.14499999999995+247.721j), radius=(48.387+48.387j), rotation=0.0, arc=False, sweep=False, end=(204.30699999999996+247.997j)), Arc(start=(204.30699999999996+247.997j), radius=(52.047+52.047j), rotation=0.0, arc=False, sweep=False, end=(237.36699999999996+235.86800000000002j)), Arc(start=(237.36699999999996+235.86800000000002j), radius=(53.056+53.056j), rotation=0.0, arc=False, sweep=False, end=(247.99999999999997+223.94600000000003j)), Line(start=(247.99999999999997+223.94600000000003j), end=(247.99999999999997+296j)), Line(start=(247.99999999999997+296j), end=(264+296j)), Line(start=(264+296j), end=(264+223.946j)), Arc(start=(264+223.946j), radius=(53.741+53.741j), rotation=0.0, arc=False, sweep=False, end=(284.343+242.3j)), Line(start=(284.343+242.3j), end=(291.65700000000004+228.07100000000003j)), Arc(start=(291.65700000000004+228.07100000000003j), radius=(37.536+37.536j), rotation=0.0, arc=False, sweep=True, end=(284.857+223.57100000000003j)), Arc(start=(284.857+223.57100000000003j), radius=(35.815+35.815j), rotation=0.0, arc=False, sweep=True, end=(272.92400000000004+205.04400000000004j)), Close(start=(272.92400000000004+205.04400000000004j), end=(272.924+205.044j))) 
--------------------
Move , start/end coords: ((272.924, 205.044), (272.924, 205.044))
Arc , start/end coords: ((272.924, 205.044), (272.672, 204.251))
CubicBezier , start/end coords: ((272.672, 204.251), (269.525, 194.293))
Arc , start/end coords: ((269.525, 194.293), (242.475, 194.293))
CubicBezier , start/end coords: ((242.475, 194.293), (239.328, 204.25))
Arc , start/end coords: ((239.328, 204.25), (239.076, 205.043))
Arc , start/end coords: ((239.076, 205.043), (200.855, 231.812))
Line , start/end coords: ((200.855, 231.812), (199.145, 247.721))
Arc , start/end coords: ((199.145, 247.721), (204.307, 247.997))
Arc , start/end coords: ((204.307, 247.997), (237.367, 235.868))
Arc , start/end coords: ((237.367, 235.868), (248.0, 223.946))
Line , start/end coords: ((248.0, 223.946), (248.0, 296.0))
Line , start/end coords: ((248.0, 296.0), (264.0, 296.0))
Line , start/end coords: ((264.0, 296.0), (264.0, 223.946))
Arc , start/end coords: ((264.0, 223.946), (284.343, 242.3))
Line , start/end coords: ((284.343, 242.3), (291.657, 228.071))
Arc , start/end coords: ((291.657, 228.071), (284.857, 223.571))
Arc , start/end coords: ((284.857, 223.571), (272.924, 205.044))
Close , start/end coords: ((272.924, 205.044), (272.924, 205.044))
--------------------
Path 2
Objects:
 Path(Move(to=(248+312j)), Line(start=(248+312j), end=(264+312j)), Line(start=(264+312j), end=(264+496j)), Line(start=(264+496j), end=(248+496j)), Close(start=(248+496j), end=(248+312j))) 
--------------------
Move , start/end coords: ((248.0, 312.0), (248.0, 312.0))
Line , start/end coords: ((248.0, 312.0), (264.0, 312.0))
Line , start/end coords: ((264.0, 312.0), (264.0, 496.0))
Line , start/end coords: ((264.0, 496.0), (248.0, 496.0))
Close , start/end coords: ((248.0, 496.0), (248.0, 312.0))
--------------------
Path 3
Objects:
 Path(Move(to=(272+56j)), Line(start=(272+56j), end=(288+56j)), Line(start=(288+56j), end=(288+72j)), Line(start=(288+72j), end=(272+72j)), Close(start=(272+72j), end=(272+56j))) 
--------------------
Move , start/end coords: ((272.0, 56.0), (272.0, 56.0))
Line , start/end coords: ((272.0, 56.0), (288.0, 56.0))
Line , start/end coords: ((288.0, 56.0), (288.0, 72.0))
Line , start/end coords: ((288.0, 72.0), (272.0, 72.0))
Close , start/end coords: ((272.0, 72.0), (272.0, 56.0))
--------------------
Path 4
Objects:
 Path(Move(to=(496+288j)), Line(start=(496+288j), end=(496+284j)), Arc(start=(496+284j), radius=(28.032+28.032j), rotation=0.0, arc=False, sweep=False, end=(468+256j)), Line(start=(468+256j), end=(450.4+256j)), Arc(start=(450.4+256j), radius=(182.459+182.459j), rotation=0.0, arc=False, sweep=False, end=(436.52099999999996+217.525j)), Arc(start=(436.52099999999996+217.525j), radius=(28.012+28.012j), rotation=0.0, arc=False, sweep=False, end=(412.68399999999997+176.008j)), Arc(start=(412.68399999999997+176.008j), radius=(40.037+40.037j), rotation=0.0, arc=False, sweep=False, end=(339.308+176.008j)), Arc(start=(339.308+176.008j), radius=(28.012+28.012j), rotation=0.0, arc=False, sweep=False, end=(315.471+217.525j)), CubicBezier(start=(315.471+217.525j), control1=(302.719+243.207j), control2=(296+272.96500000000003j), end=(296+304j)), CubicBezier(start=(296+304j), control1=(296+337.20799999999997j), control2=(303.692+368.956j), end=(318.244+395.812j)), Arc(start=(318.244+395.812j), radius=(8+8j), rotation=0.0, arc=False, sweep=False, end=(325.278+400j)), Line(start=(325.278+400j), end=(368+400j)), Line(start=(368+400j), end=(368+496j)), Line(start=(368+496j), end=(384+496j)), Line(start=(384+496j), end=(384+400j)), Line(start=(384+400j), end=(426.722+400j)), Arc(start=(426.722+400j), radius=(8+8j), rotation=0.0, arc=False, sweep=False, end=(433.756+395.812j)), Arc(start=(433.756+395.812j), radius=(180.656+180.656j), rotation=0.0, arc=False, sweep=False, end=(450.4+352j)), Line(start=(450.4+352j), end=(458+352j)), Arc(start=(458+352j), radius=(38.043+38.043j), rotation=0.0, arc=False, sweep=False, end=(496+314j)), Line(start=(496+314j), end=(496+304j)), Line(start=(496+304j), end=(480+304j)), Line(start=(480+304j), end=(480+314j)), Arc(start=(480+314j), radius=(22.025+22.025j), rotation=0.0, arc=False, sweep=True, end=(458+336j)), Line(start=(458+336j), end=(453.56+336j)), Arc(start=(453.56+336j), radius=(211.056+211.056j), rotation=0.0, arc=False, sweep=False, end=(453.56+272j)), Line(start=(453.56+272j), end=(468+272j)), Arc(start=(468+272j), radius=(12.013+12.013j), rotation=0.0, arc=False, sweep=True, end=(480+284j)), Line(start=(480+284j), end=(480+288j)), Close(start=(480+288j), end=(496+288j)), Move(to=(433.907+352j)), Line(start=(433.907+352j), end=(318.09299999999996+352j)), Arc(start=(318.09299999999996+352j), radius=(192.116+192.116j), rotation=0.0, arc=False, sweep=True, end=(318.09299999999996+256j)), Line(start=(318.09299999999996+256j), end=(391.99999999999994+256j)), Line(start=(391.99999999999994+256j), end=(391.99999999999994+240j)), Line(start=(391.99999999999994+240j), end=(323.17699999999996+240j)), Arc(start=(323.17699999999996+240j), radius=(159.556+159.556j), rotation=0.0, arc=False, sweep=True, end=(330.128+224j)), Line(start=(330.128+224j), end=(421.87199999999996+224j)), Arc(start=(421.87199999999996+224j), radius=(159.556+159.556j), rotation=0.0, arc=False, sweep=True, end=(428.823+240j)), Line(start=(428.823+240j), end=(408+240j)), Line(start=(408+240j), end=(408+256j)), Line(start=(408+256j), end=(433.907+256j)), Arc(start=(433.907+256j), radius=(192.116+192.116j), rotation=0.0, arc=False, sweep=True, end=(433.907+352j)), Close(start=(433.907+352j), end=(433.907+352j)), Move(to=(340+192j)), Arc(start=(340+192j), radius=(12.077+12.077j), rotation=0.0, arc=False, sweep=True, end=(342.923+192.357j)), Arc(start=(342.923+192.357j), radius=(8+8j), rotation=0.0, arc=False, sweep=False, end=(352.646+186.44j)), Arc(start=(352.646+186.44j), radius=(24.009+24.009j), rotation=0.0, arc=False, sweep=True, end=(399.35400000000004+186.44j)), Arc(start=(399.35400000000004+186.44j), radius=(8+8j), rotation=0.0, arc=False, sweep=False, end=(409.07700000000006+192.357j)), Arc(start=(409.07700000000006+192.357j), radius=(12.016+12.016j), rotation=0.0, arc=False, sweep=True, end=(424.00000000000006+204j)), Arc(start=(424.00000000000006+204j), radius=(11.949+11.949j), rotation=0.0, arc=False, sweep=True, end=(423.32000000000005+208j)), Line(start=(423.32000000000005+208j), end=(328.68000000000006+208j)), Arc(start=(328.68000000000006+208j), radius=(12.015+12.015j), rotation=0.0, arc=False, sweep=True, end=(340.00000000000006+192j)), Close(start=(340.00000000000006+192j), end=(340+192j)), Move(to=(330.128+384j)), Arc(start=(330.128+384j), radius=(159.556+159.556j), rotation=0.0, arc=False, sweep=True, end=(323.17699999999996+368j)), Line(start=(323.17699999999996+368j), end=(428.823+368j)), Arc(start=(428.823+368j), radius=(159.556+159.556j), rotation=0.0, arc=False, sweep=True, end=(421.87199999999996+384j)), Close(start=(421.87199999999996+384j), end=(330.128+384j))) 
--------------------
Move , start/end coords: ((496.0, 288.0), (496.0, 288.0))
Line , start/end coords: ((496.0, 288.0), (496.0, 284.0))
Arc , start/end coords: ((496.0, 284.0), (468.0, 256.0))
Line , start/end coords: ((468.0, 256.0), (450.4, 256.0))
Arc , start/end coords: ((450.4, 256.0), (436.521, 217.525))
Arc , start/end coords: ((436.521, 217.525), (412.684, 176.008))
Arc , start/end coords: ((412.684, 176.008), (339.308, 176.008))
Arc , start/end coords: ((339.308, 176.008), (315.471, 217.525))
CubicBezier , start/end coords: ((315.471, 217.525), (296.0, 304.0))
CubicBezier , start/end coords: ((296.0, 304.0), (318.244, 395.812))
Arc , start/end coords: ((318.244, 395.812), (325.278, 400.0))
Line , start/end coords: ((325.278, 400.0), (368.0, 400.0))
Line , start/end coords: ((368.0, 400.0), (368.0, 496.0))
Line , start/end coords: ((368.0, 496.0), (384.0, 496.0))
Line , start/end coords: ((384.0, 496.0), (384.0, 400.0))
Line , start/end coords: ((384.0, 400.0), (426.722, 400.0))
Arc , start/end coords: ((426.722, 400.0), (433.756, 395.812))
Arc , start/end coords: ((433.756, 395.812), (450.4, 352.0))
Line , start/end coords: ((450.4, 352.0), (458.0, 352.0))
Arc , start/end coords: ((458.0, 352.0), (496.0, 314.0))
Line , start/end coords: ((496.0, 314.0), (496.0, 304.0))
Line , start/end coords: ((496.0, 304.0), (480.0, 304.0))
Line , start/end coords: ((480.0, 304.0), (480.0, 314.0))
Arc , start/end coords: ((480.0, 314.0), (458.0, 336.0))
Line , start/end coords: ((458.0, 336.0), (453.56, 336.0))
Arc , start/end coords: ((453.56, 336.0), (453.56, 272.0))
Line , start/end coords: ((453.56, 272.0), (468.0, 272.0))
Arc , start/end coords: ((468.0, 272.0), (480.0, 284.0))
Line , start/end coords: ((480.0, 284.0), (480.0, 288.0))
Close , start/end coords: ((480.0, 288.0), (496.0, 288.0))
Move , start/end coords: ((433.907, 352.0), (433.907, 352.0))
Line , start/end coords: ((433.907, 352.0), (318.093, 352.0))
Arc , start/end coords: ((318.093, 352.0), (318.093, 256.0))
Line , start/end coords: ((318.093, 256.0), (392.0, 256.0))
Line , start/end coords: ((392.0, 256.0), (392.0, 240.0))
Line , start/end coords: ((392.0, 240.0), (323.177, 240.0))
Arc , start/end coords: ((323.177, 240.0), (330.128, 224.0))
Line , start/end coords: ((330.128, 224.0), (421.872, 224.0))
Arc , start/end coords: ((421.872, 224.0), (428.823, 240.0))
Line , start/end coords: ((428.823, 240.0), (408.0, 240.0))
Line , start/end coords: ((408.0, 240.0), (408.0, 256.0))
Line , start/end coords: ((408.0, 256.0), (433.907, 256.0))
Arc , start/end coords: ((433.907, 256.0), (433.907, 352.0))
Close , start/end coords: ((433.907, 352.0), (433.907, 352.0))
Move , start/end coords: ((340.0, 192.0), (340.0, 192.0))
Arc , start/end coords: ((340.0, 192.0), (342.923, 192.357))
Arc , start/end coords: ((342.923, 192.357), (352.646, 186.44))
Arc , start/end coords: ((352.646, 186.44), (399.354, 186.44))
Arc , start/end coords: ((399.354, 186.44), (409.077, 192.357))
Arc , start/end coords: ((409.077, 192.357), (424.0, 204.0))
Arc , start/end coords: ((424.0, 204.0), (423.32, 208.0))
Line , start/end coords: ((423.32, 208.0), (328.68, 208.0))
Arc , start/end coords: ((328.68, 208.0), (340.0, 192.0))
Close , start/end coords: ((340.0, 192.0), (340.0, 192.0))
Move , start/end coords: ((330.128, 384.0), (330.128, 384.0))
Arc , start/end coords: ((330.128, 384.0), (323.177, 368.0))
Line , start/end coords: ((323.177, 368.0), (428.823, 368.0))
Arc , start/end coords: ((428.823, 368.0), (421.872, 384.0))
Close , start/end coords: ((421.872, 384.0), (330.128, 384.0))
--------------------
Path 5
Objects:
 Path(Move(to=(336+280j)), Line(start=(336+280j), end=(352+280j)), Line(start=(352+280j), end=(352+296j)), Line(start=(352+296j), end=(336+296j)), Close(start=(336+296j), end=(336+280j))) 
--------------------
Move , start/end coords: ((336.0, 280.0), (336.0, 280.0))
Line , start/end coords: ((336.0, 280.0), (352.0, 280.0))
Line , start/end coords: ((352.0, 280.0), (352.0, 296.0))
Line , start/end coords: ((352.0, 296.0), (336.0, 296.0))
Close , start/end coords: ((336.0, 296.0), (336.0, 280.0))
--------------------
Path 6
Objects:
 Path(Move(to=(392+312j)), Line(start=(392+312j), end=(408+312j)), Line(start=(408+312j), end=(408+328j)), Line(start=(408+328j), end=(392+328j)), Close(start=(392+328j), end=(392+312j))) 
--------------------
Move , start/end coords: ((392.0, 312.0), (392.0, 312.0))
Line , start/end coords: ((392.0, 312.0), (408.0, 312.0))
Line , start/end coords: ((408.0, 312.0), (408.0, 328.0))
Line , start/end coords: ((408.0, 328.0), (392.0, 328.0))
Close , start/end coords: ((392.0, 328.0), (392.0, 312.0))
--------------------

................................

Variant 2. Using JavaScript

There is a svg-path-interpolator library.

Install it npm install -g svg-path-interpolator.

Write config.json with content e.g.

{
  "joinPathData": false,
  "minDistance": 0.5,
  "roundToNearest": 0.25,
  "sampleFrequency": 0.001,
  "pretty": false,
  "prettyIndent": 0
}

Run it svgpi config.json ballons.svg ballons.json, output ballons.json will contain rendered (X, Y) points of all paths/lines/curves.

In your code you may use library like this:

import SVGPathInterpolator from 'SVGPathInterpolator';
const svgString = `
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="792px" height="612px" viewBox="0 0 792 612" enable-background="new 0 0 792 612" xml:space="preserve">
    <g>
        <path id="path3789" d="M287.168,442.411
        c-8.65,0-15.652,7.003-15.652,15.653
        c0,8.65,7.003,15.69,15.652,15.69
        s15.653-7.04,15.653-15.69
        "/>
    </g>
</svg>
`;
const config = {
    joinPathData: false,
    minDistance: 0.5,
    roundToNearest: 0.25,
    sampleFrequency: 0.001
};
const interpolator = new SVGPathInterpolator(config);
const pathData = interpolator.processSvg(svgString);

Upvotes: 4

Related Questions