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
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
Share Improve this question edited Mar 2, 2023 at 21:10 Makyen♦ 33.4k12 gold badges92 silver badges125 bronze badges asked Jan 22, 2021 at 18:22 xEtherealxEthereal 4091 gold badge6 silver badges11 bronze badges 2-
you can use the javascript method
getBBox()
for the path – enxaneta Commented Jan 22, 2021 at 20:25 - 1 After thoroughly searching the internet, I have found this remarkable site that does what I want! spotify.github.io/coordinator – xEthereal Commented Jan 23, 2021 at 11:37
2 Answers
Reset to default 4For 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/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);
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.