I'm trying to parse the d attribute in SVG Path element, and so far I found that fabric.js can parse SVG, but till now I still don't know how.

I need to parse the path in order to get the shapes in it (lines arcs) and draw squares over them, and most importantly return the attributes of these squares.

any idea how to do this using fabric.js?? or any other library?? or does anyone have a different approach?

the following image has a rectangle and a line both have squares that I drew on their boundaries, and I'm trying to do the same on the path element

I'm trying to parse the d attribute in SVG Path element, and so far I found that fabric.js can parse SVG, but till now I still don't know how.

I need to parse the path in order to get the shapes in it (lines arcs) and draw squares over them, and most importantly return the attributes of these squares.

any idea how to do this using fabric.js?? or any other library?? or does anyone have a different approach?

the following image has a rectangle and a line both have squares that I drew on their boundaries, and I'm trying to do the same on the path element

• javascript
• parsing
• svg
• path
• fabricjs

4 Answers 4

I found this

var cmdRegEx = /[a-z][^a-z]*/ig;
var mands = d.match(cmdRegEx);

which can get each mand with its parameters, but you need to trim each mand from spaces

Based on zeacuss answer and Mark K Cowan suggestion, I'm using:

var cmdRegEx = /([MLQTCSAZVH])([^MLQTCSAZVH]*)/gi
var mands = d.match(cmdRegEx);

Stamped into the same problem. You can use the regep /-?\d+/ig which produces just the numbers, striped from letters, white spaces. and mas.

Python's svgpathtools library might be useful for your needs. This is a list of its features (from the documentation):

Some included tools:

read, write, and display SVG files containing Path (and other) SVG elements
convert Bézier path segments to numpy.poly1d (polynomial) objects
convert polynomials (in standard form) to their Bézier form
pute tangent vectors and (right-hand rule) normal vectors
pute curvature
break discontinuous paths into their continuous subpaths.
efficiently pute intersections between paths and/or segments
find a bounding box for a path or segment
reverse segment/path orientation
crop and split paths and segments
smooth paths (i.e. smooth away kinks to make paths differentiable)
transition maps from path domain to segment domain and back (T2t and t2T)
pute area enclosed by a closed path
pute arc length
pute inverse arc length
convert RGB color tuples to hexadecimal color strings and back