Feature request: option to convert it back to the SVG path string

[benkeen]

As described. That'd be very handy!

[hughsk]

Sorry @benkeen, I don't have enough time to spare to prioritise this :') My suggestion would be to write an independent package that does this, and shares the same format as this one. Cheers!

[Phrogz]

@benkeen Here's a function to do what you want:

function pathData(data){
  var params = ['rx','ry','xAxisRotation','largeArc','sweep','x1','y1','x2','y2','x','y'];
  var lastCode;
  return data.map(function(cmd){
    var a = [];
    params.forEach(function(param){
      if (param in cmd) {
        var val = cmd[param]*1; // *1 for true/false values on arc
        if (a.length && val>=0) a.push(',');
        a.push(val);
      }
    });
    var result = (lastCode===cmd.code?(a[0]<0?'':','):cmd.code) + a.join('');
    lastCode=cmd.code;
    return result;
  }).join('');
}

In Action: https://jsfiddle.net/js7zo38o/

The function does a bit of work to try to make the resulting path command string as short as possible:

• Sequential commands of the same type do not restate the command code.
• Negative values omit the preceding comma/whitespace.
• No whitespace between commands.

Original Path String:

M3,7 5-6 L1,7 1e2-.4 m-10,10 l10,0
V27 89 H23           v10 v-4 h10           
C33,43 38,47 43,47   c0,5 5,10 10,10   
S63,67 63,67         s-10,10 10,10     
Q50,50 73,57         q20,-5 0,-10      
T70,40               t0,-15            
A5,5 45 1,0 40,20    a5,5 20 0,1 -10-10  Z

Parsed and Recreated:

M3,7L5-6,1,7-100-0.4m-10,10l10,0V27,89H23v10-4h10C33,43,38,47,43,47
c0,5,5,10,10,10S63,67,63,67s-10,10,10,10Q50,50,73,57q20-5,0-10T70,40
t0-15A5,5,45,1,0,40,20a5,5,20,0,1-10-10Z

Optimizations that it does not do:

• It makes no attempt to constrain decimal precision (usually your biggest problem)
• A moveto followed by an absolute lineto will still include the L (which is not needed).
• No attempt is made to convert an absolute or relative command into a shorter equivalent.
• No attempt is made to convert an explicit Bézier command (C/c/Q/q) to a shorthand equivalent (S/s/T/t) when possible.

[benkeen]

Wow, thanks @Phrogz - and @hughsk for responding.

Terrific stuff, I'll give it a go.