I am generating a large SVG path string that represents a line chart.

Beneath the chart I have a slider for selecting a time range slice. Behind the slider is a mini preview of the whole line chart.

I am currently scaling down the path to generate the preview however in doing so I am ending up with tens of nodes per pixel and therefore far more detail then is necessary. Of course this gives the browser more rendering to do than it has to.

There is plenty of info available on pressing svg strings (gzipping etc), though little on algorithms that actually simplify the path by reducing the nodes.

I am using Raphaeljs and am looking for a javascript based solution. Any ideas?

I am generating a large SVG path string that represents a line chart.

Beneath the chart I have a slider for selecting a time range slice. Behind the slider is a mini preview of the whole line chart.

I am currently scaling down the path to generate the preview however in doing so I am ending up with tens of nodes per pixel and therefore far more detail then is necessary. Of course this gives the browser more rendering to do than it has to.

There is plenty of info available on pressing svg strings (gzipping etc), though little on algorithms that actually simplify the path by reducing the nodes.

I am using Raphaeljs and am looking for a javascript based solution. Any ideas?

• javascript
• svg
• raphael

• do you have an example of the path 'd' attribute? eg.. <path d="M150 0 L75 200 L225 200 Z" /> – lostsource Commented Dec 5, 2012 at 18:39
• 1 You are already loading the full "resolution" path by displaying it large, the performance hit for displaying it again in a thumbnail should be minimal, much less than having an algorithm simplify the path. – methodofaction Commented Dec 5, 2012 at 19:06
• @Duopixel: I don't think that's true at all. You'd have the same path appear twice in the DOM. I'd be very surprised if Browsers would optimize for that. Also, as I understand it, the mini preview won't be the same aspect ratio as the full path - also the stroke width might be different (would make sense to make it slightly heavier in relation to the full size chart). – Thomas W Commented Dec 6, 2012 at 6:19
• Seems plenty fast to me: jsfiddle/Zs28j – methodofaction Commented Dec 6, 2012 at 7:44

1 Answer 1

Simplify.js is probably what you're looking after.

Given your line chart consists of straight line segments only (which by definition it should), you can use it like this:

  var tolerance = 3
  var pathSegArray = []
  for (var i=0; i<path.pathSegList.numberOfItems; i++) {
    pathSegArray.push(path.pathSegList.getItem(i))
  }
  var newPathArray = simplify(pathSegArray,tolerance)
  var newD = "M";
  for (i=0; i<newPathArray.length; i++) {
    newD += newPathArray[i].x + " " + newPathArray[i].y + " "
  }
  path.setAttribute("d",newD)