Convert SVG polygon to path

Question

I have a fairly large SVG file of administrative subdivisions that I need to work with in Raphael.JS (it has 600 polygons and weights 1.2 Mb).

Now, I need to convert

Answer 1

1. Open your SVG in a web browser.

2. Run this code:

   var polys = document.querySelectorAll('polygon,polyline');
   [].forEach.call(polys,convertPolyToPath);
   
   function convertPolyToPath(poly){
     var svgNS = poly.ownerSVGElement.namespaceURI;
     var path = document.createElementNS(svgNS,'path');
     var pathdata = 'M '+poly.getAttribute('points');
     if (poly.tagName=='polygon') pathdata+='z';
     path.setAttribute('d',pathdata);
     poly.parentNode.replaceChild(path,poly);
   }
   

3. Using the Developer Tools (or Firebug) of the browser, use "Copy as HTML" (or Copy SVG) on the element to get the modified source onto the clipboard.

4. Paste into a new file and enjoy.

I have a demo of the above method (slightly modified) on my website:
http://phrogz.net/svg/convert_polys_to_paths.svg

There are two methods in use on that page; one (like the above) uses string-based techniques to get and set the points; the other uses the SVG DOM for accessing points and setting path commands.

---

As noted by @Interactive in the comments, you can do this via text-only transformations by:

1. Convert all and to
2. Change all points=" to d="M

3. For any elements that were , you need to add z as the last character of the d attribute to connect the last point to the first. For example:

   becomes

This 'hack' works because the specifications declare that a moveto command (M or m) followed by multiple coordinates is legal, with all coordinates after the first interpreted as lineto commands.