Trying to get cooresponding Bezier curve in path from svg polyline.
Polyline:
<svg ...> <polyline id="Svg" points="184.48463439941406,120.62457275390625 184.48463439941406,120.62457275390625 177.38907849829351,182.11945392491467 175.02389078498294,257.80546075085323 172.65870307167233,333.4914675767918 172.65870307167233,357.1433447098976 179.7542662116041,437.5597269624573 182.11945392491467,456.481228668942 186.84982935153582,548.7235494880546 191.580204778157,574.7406143344709 203.40614334470988,671.7133105802047 210.50170648464163,690.6348122866893 227.0580204778157,768.6860068259385 227.0580204778157,787.6075085324231 234.15358361774742,858.5631399317406 236.51877133105802,903.5017064846415 236.51877133105802,920.0580204778156 234.15358361774742,981.5529010238907 231.78839590443684,1002.839590443686 245.97952218430032,1057.2389078498293 245.97952218430032,1090.3515358361774 255.44027303754265,1118.7337883959044 253.07508532423208,1132.924914675768 253.07508532423208,1158.9419795221843 250.7098976109215,1184.9590443686006 255.44027303754265,1206.245733788396 250.7098976109215,1236.9931740614334 248.3447098976109,1246.4539249146758 250.7098976109215,1258.2798634812286 250.7098976109215,1263.0102389078497 253.07508532423208,1272.4709897610921 253.07508532423208,1279.566552901024 257.80546075085323,1286.6621160409557 264.901023890785,1296.1228668941978 274.3617747440273,1303.2184300341296 279.09215017064844,1307.9488054607507 312.20477815699655,1324.5051194539249 350.0477815699659,1336.3310580204777 364.23890784982933,1338.6962457337884 423.3686006825938,1352.8873720136519 480.13310580204774,1362.348122866894 532.1672354948805,1367.0784982935154 593.6621160409557,1371.8088737201365 655.1569965870307,1371.8088737201365 676.4436860068259,1374.174061433447 763.9556313993173,1374.174061433447 825.4505119453925,1371.8088737201365 917.692832764505,1362.348122866894 1031.221843003413,1355.2525597269623 1104.542662116041,1348.1569965870306 1173.1331058020478,1341.0614334470988 1215.706484641638,1341.0614334470988 1284.296928327645,1341.0614334470988 1298.4880546075085,1343.4266211604095 1355.2525597269623,1348.1569965870306 1390.730375426621,1352.8873720136519 1402.556313993174,1355.2525597269623 1440.3993174061434,1369.4436860068258 1449.8600682593856,1371.8088737201365 1480.607508532423,1374.174061433447 1539.7372013651877,1378.9044368600682 1568.1194539249145,1381.2696245733787 1601.2320819112626,1381.2696245733787 1650.901023890785,1381.2696245733787 1667.4573378839589,1381.2696245733787 1691.1092150170648,1378.9044368600682 1736.0477815699658,1378.9044368600682 1799.9078498293513,1374.174061433447 1833.0204778156997,1364.7133105802047 1851.9419795221843,1362.348122866894 1866.1331058020478,1355.2525597269623 1894.5153583617746,1345.7918088737201 1901.6109215017063,1338.6962457337884 1915.8020477815699,1331.6006825938566 1929.9931740614334,1322.1399317406142 1932.358361774744,1319.7747440273038 1937.0887372013651,1315.0443686006824 1934.7235494880545,1303.2184300341296 1937.0887372013651,1300.853242320819 1939.4539249146758,1284.296928327645 1944.1843003412969,1227.5324232081912 1941.8191126279862,1208.6109215017063 1963.1058020477815,1135.2901023890784 1974.9317406143343,1076.1604095563139 1991.4880546075085,1033.5870307167236 2008.0443686006824,967.3617747440272 2017.5051194539249,946.0750853242321 2022.235494880546,896.4061433447099 2019.8703071672353,842.0068259385665 2026.965870307167,768.6860068259385 2022.235494880546,728.4778156996587 2010.409556313993,683.5392491467577 2005.679180887372,650.4266211604095 2000.9488054607507,614.9488054607508 1993.853242320819,560.5494880546075 1993.853242320819,541.6279863481228 1982.027303754266,513.2457337883959 1974.9317406143343,465.9419795221843 1967.8361774744026,428.098976109215 1967.8361774744026,402.0819112627986 1956.0102389078497,352.4129692832764 1953.645051194539,338.22184300341297 1948.914675767918,307.4744027303754 1941.8191126279862,279.09215017064844 1939.4539249146758,248.3447098976109 1939.4539249146758,236.51877133105802 1927.6279863481227,212.8668941979522 1932.358361774744,184.48464163822524 1932.358361774744,165.5631399317406 1929.9931740614334,153.7372013651877 1929.9931740614334,151.37201365187713 1927.6279863481227,144.2764505119454 1927.6279863481227,144.2764505119454 1925.2627986348123,144.2764505119454 1925.2627986348123,144.2764505119454 1922.8976109215016,146.64163822525597 1922.8976109215016,149.00682593856655 1918.1672354948805,144.2764505119454 1922.8976109215016,146.64163822525597 1911.0716723549488,149.00682593856655 1903.976109215017,144.2764505119454 1868.4982935153582,144.2764505119454 1856.6723549488054,144.2764505119454 1828.2901023890784,141.9112627986348 1778.6211604095563,139.54607508532422 1764.4300341296928,139.54607508532422 1679.283276450512,141.9112627986348 1657.9965870307167,144.2764505119454 1603.5972696245733,149.00682593856655 1558.6587030716723,151.37201365187713 1539.7372013651877,153.7372013651877 1466.4163822525597,151.37201365187713 1376.5392491467576,151.37201365187713 1317.409556313993,151.37201365187713 1281.9317406143343,149.00682593856655 1267.7406143344708,146.64163822525597 1192.0546075085324,149.00682593856655 1142.38566552901,144.2764505119454 1123.4641638225255,141.9112627986348 1045.4129692832764,139.54607508532422 1028.8566552901023,139.54607508532422 955.5358361774744,139.54607508532422 938.9795221843003,139.54607508532422 901.136518771331,141.9112627986348 860.9283276450511,139.54607508532422 808.8941979522184,139.54607508532422 771.0511945392491,139.54607508532422 730.8430034129692,139.54607508532422 690.6348122866893,139.54607508532422 657.5221843003412,137.18088737201364 612.5836177474403,137.18088737201364 574.7406143344709,139.54607508532422 541.6279863481228,139.54607508532422 508.5153583617747,139.54607508532422 496.6894197952218,139.54607508532422 439.9249146757679,139.54607508532422 390.2559726962457,139.54607508532422 376.06484641638224,139.54607508532422 340.5870307167235,139.54607508532422 300.37883959044365,139.54607508532422 279.09215017064844,139.54607508532422 255.44027303754265,141.9112627986348 205.77133105802048,149.00682593856655 189.2150170648464,149.00682593856655 158.46757679180885,163.19795221843003 151.37201365187713,163.19795221843003 139.54607508532422,175.02389078498294 127.72013651877133,212.8668941979522 120.62457337883959,205.77133105802048" stroke="#000000" stroke-width="2" fill-opacity="0"></polyline> </svg>
to Path:
<svg ...> <path style="stroke:#000000; fill:none;" d="..."></path> </svg>
How to achieve this prefering using javascript otherwise python?
Edit: i finaly work with big size then convert the polyline points to line L and then downsize on desired size, it’s look like curve and work for my need. Much more simpler than curve. The @enxaneta answer work too!
Advertisement
Answer
In order to change a polyline in a path you need a d attribute where the first command is M.
For example if you have a polyline with
points="184.48463439941406,120.62457275390625 184.48463439941406,120.62457275390625...
you can transform it in a d attribute for a <path> by adding an M command at the begining:
d="M184.48463439941406,120.62457275390625 184.48463439941406,120.62457275390625...
After the first 2 values of the move to M, if you don’t add any command you will get lines:
d="M184.48463439941406,120.62457275390625 L184.48463439941406,120.62457275390625...
In order to transform a line in a cubic bézier you can use the starting and ending points of the line as control points like so:
d="M184.48463439941406,120.62457275390625 C184.48463439941406,120.62457275390625 //the first control point 184.48463439941406,120.62457275390625 // the second control point 184.48463439941406,120.62457275390625 // the bézier ends here
In the next example you can see your original polyline at the left and a path made of beziers at the right.
let ry = Svg.getAttribute("points").split(" ");
let ary = [];
ry.forEach((el,i) => {
ary.push(el.split(","));
});
let d = `M ${ary[0][0]},${ary[0][1]}`;
for (let i = 1; i < ary.length; i++) {
d += ` C ${ary[i - 1][0]},${ary[i - 1][1]} ${ary[i][0]},${ary[i][1]} ${
ary[i][0]
},${ary[i][1]}`;
}
bez.setAttribute("d", d);svg{outline:1px solid;margin:1em;}<svg viewBox="120 120 2000 1300" width="200"> <polyline id="Svg" points="184.48463439941406,120.62457275390625 184.48463439941406,120.62457275390625 177.38907849829351,182.11945392491467 175.02389078498294,257.80546075085323 172.65870307167233,333.4914675767918 172.65870307167233,357.1433447098976 179.7542662116041,437.5597269624573 182.11945392491467,456.481228668942 186.84982935153582,548.7235494880546 191.580204778157,574.7406143344709 203.40614334470988,671.7133105802047 210.50170648464163,690.6348122866893 227.0580204778157,768.6860068259385 227.0580204778157,787.6075085324231 234.15358361774742,858.5631399317406 236.51877133105802,903.5017064846415 236.51877133105802,920.0580204778156 234.15358361774742,981.5529010238907 231.78839590443684,1002.839590443686 245.97952218430032,1057.2389078498293 245.97952218430032,1090.3515358361774 255.44027303754265,1118.7337883959044 253.07508532423208,1132.924914675768 253.07508532423208,1158.9419795221843 250.7098976109215,1184.9590443686006 255.44027303754265,1206.245733788396 250.7098976109215,1236.9931740614334 248.3447098976109,1246.4539249146758 250.7098976109215,1258.2798634812286 250.7098976109215,1263.0102389078497 253.07508532423208,1272.4709897610921 253.07508532423208,1279.566552901024 257.80546075085323,1286.6621160409557 264.901023890785,1296.1228668941978 274.3617747440273,1303.2184300341296 279.09215017064844,1307.9488054607507 312.20477815699655,1324.5051194539249 350.0477815699659,1336.3310580204777 364.23890784982933,1338.6962457337884 423.3686006825938,1352.8873720136519 480.13310580204774,1362.348122866894 532.1672354948805,1367.0784982935154 593.6621160409557,1371.8088737201365 655.1569965870307,1371.8088737201365 676.4436860068259,1374.174061433447 763.9556313993173,1374.174061433447 825.4505119453925,1371.8088737201365 917.692832764505,1362.348122866894 1031.221843003413,1355.2525597269623 1104.542662116041,1348.1569965870306 1173.1331058020478,1341.0614334470988 1215.706484641638,1341.0614334470988 1284.296928327645,1341.0614334470988 1298.4880546075085,1343.4266211604095 1355.2525597269623,1348.1569965870306 1390.730375426621,1352.8873720136519 1402.556313993174,1355.2525597269623 1440.3993174061434,1369.4436860068258 1449.8600682593856,1371.8088737201365 1480.607508532423,1374.174061433447 1539.7372013651877,1378.9044368600682 1568.1194539249145,1381.2696245733787 1601.2320819112626,1381.2696245733787 1650.901023890785,1381.2696245733787 1667.4573378839589,1381.2696245733787 1691.1092150170648,1378.9044368600682 1736.0477815699658,1378.9044368600682 1799.9078498293513,1374.174061433447 1833.0204778156997,1364.7133105802047 1851.9419795221843,1362.348122866894 1866.1331058020478,1355.2525597269623 1894.5153583617746,1345.7918088737201 1901.6109215017063,1338.6962457337884 1915.8020477815699,1331.6006825938566 1929.9931740614334,1322.1399317406142 1932.358361774744,1319.7747440273038 1937.0887372013651,1315.0443686006824 1934.7235494880545,1303.2184300341296 1937.0887372013651,1300.853242320819 1939.4539249146758,1284.296928327645 1944.1843003412969,1227.5324232081912 1941.8191126279862,1208.6109215017063 1963.1058020477815,1135.2901023890784 1974.9317406143343,1076.1604095563139 1991.4880546075085,1033.5870307167236 2008.0443686006824,967.3617747440272 2017.5051194539249,946.0750853242321 2022.235494880546,896.4061433447099 2019.8703071672353,842.0068259385665 2026.965870307167,768.6860068259385 2022.235494880546,728.4778156996587 2010.409556313993,683.5392491467577 2005.679180887372,650.4266211604095 2000.9488054607507,614.9488054607508 1993.853242320819,560.5494880546075 1993.853242320819,541.6279863481228 1982.027303754266,513.2457337883959 1974.9317406143343,465.9419795221843 1967.8361774744026,428.098976109215 1967.8361774744026,402.0819112627986 1956.0102389078497,352.4129692832764 1953.645051194539,338.22184300341297 1948.914675767918,307.4744027303754 1941.8191126279862,279.09215017064844 1939.4539249146758,248.3447098976109 1939.4539249146758,236.51877133105802 1927.6279863481227,212.8668941979522 1932.358361774744,184.48464163822524 1932.358361774744,165.5631399317406 1929.9931740614334,153.7372013651877 1929.9931740614334,151.37201365187713 1927.6279863481227,144.2764505119454 1927.6279863481227,144.2764505119454 1925.2627986348123,144.2764505119454 1925.2627986348123,144.2764505119454 1922.8976109215016,146.64163822525597 1922.8976109215016,149.00682593856655 1918.1672354948805,144.2764505119454 1922.8976109215016,146.64163822525597 1911.0716723549488,149.00682593856655 1903.976109215017,144.2764505119454 1868.4982935153582,144.2764505119454 1856.6723549488054,144.2764505119454 1828.2901023890784,141.9112627986348 1778.6211604095563,139.54607508532422 1764.4300341296928,139.54607508532422 1679.283276450512,141.9112627986348 1657.9965870307167,144.2764505119454 1603.5972696245733,149.00682593856655 1558.6587030716723,151.37201365187713 1539.7372013651877,153.7372013651877 1466.4163822525597,151.37201365187713 1376.5392491467576,151.37201365187713 1317.409556313993,151.37201365187713 1281.9317406143343,149.00682593856655 1267.7406143344708,146.64163822525597 1192.0546075085324,149.00682593856655 1142.38566552901,144.2764505119454 1123.4641638225255,141.9112627986348 1045.4129692832764,139.54607508532422 1028.8566552901023,139.54607508532422 955.5358361774744,139.54607508532422 938.9795221843003,139.54607508532422 901.136518771331,141.9112627986348 860.9283276450511,139.54607508532422 808.8941979522184,139.54607508532422 771.0511945392491,139.54607508532422 730.8430034129692,139.54607508532422 690.6348122866893,139.54607508532422 657.5221843003412,137.18088737201364 612.5836177474403,137.18088737201364 574.7406143344709,139.54607508532422 541.6279863481228,139.54607508532422 508.5153583617747,139.54607508532422 496.6894197952218,139.54607508532422 439.9249146757679,139.54607508532422 390.2559726962457,139.54607508532422 376.06484641638224,139.54607508532422 340.5870307167235,139.54607508532422 300.37883959044365,139.54607508532422 279.09215017064844,139.54607508532422 255.44027303754265,141.9112627986348 205.77133105802048,149.00682593856655 189.2150170648464,149.00682593856655 158.46757679180885,163.19795221843003 151.37201365187713,163.19795221843003 139.54607508532422,175.02389078498294 127.72013651877133,212.8668941979522 120.62457337883959,205.77133105802048" stroke="#000000" stroke-width="20" fill-opacity="0"></polyline> </svg> <svg viewBox="120 120 2000 1300" width="200"> <path id="bez" stroke="#000000" stroke-width="20" fill-opacity="0" /> </svg>
Observation: since your polyline has lots of points (maybe you used a drawing app) you can reduce some of the points. This will make the path smoother.
For this instead of for (let i = 1; i < ary.length; i++) you can try using for (let i = 1; i < ary.length; i+=n) where n can be 2 or 3 or whatever you consider. If n is very big please make sure you use the last point of the array.