-
Open your SVG in a web browser.
-
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.getAttributeNames().forEach(function(name){ if(name !== 'points') path.setAttribute(name, poly.getAttribute(name)) }) poly.parentNode.replaceChild(path,poly); }
-
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.
-
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:
-
Convert all
<polyline
and<polygon
to<path
-
Change all
points="
tod="M
-
For any elements that were
<polygon>
, you need to addz
as the last character of thed
attribute to connect the last point to the first. For example:<polygon points="1,2 3,-4 5,6"/>
becomes
<path d="M1,2 3,-4 5,6z"/>
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.