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
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.
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);