Hey Charlie,
Did some work with SVGs a while back, I used a combination of svgson package (https://www.npmjs.com/package/svgson) to get data out of svg files (mine needed to have path attributes), and some native html methods on the Path object.
static getSVGPaths(svgString)
{
return svgson.parseSync(
svgString
).children.filter((child) =>
child.name === "path" && child.attributes.d)
.map((child) =>
child.attributes.d);
}
static getPointsFromSVG(svgPath, spacing, scale)
{
const line = [];
const svgEl = document.createElementNS("http://www.w3.org/2000/svg", "path");
svgEl.setAttributeNS(null, "d", svgPath);
const totLength = svgEl.getTotalLength();
let trackLength = 0;
while (trackLength <= totLength)
{
const svgPoint = svgEl.getPointAtLength(trackLength);
line.push({ x: svgPoint.x * scale, y: svgPoint.y * scale });
trackLength += (spacing * scale);
}
return line;
}
static getSVGPathLength(svgPath)
{
const svgEl = document.createElementNS("http://www.w3.org/2000/svg", "path");
svgEl.setAttributeNS(null, "d", svgPath);
return svgEl.getTotalLength();
}