Skip to content

Instantly share code, notes, and snippets.

@andytlr
Last active August 1, 2023 08:02
Show Gist options
  • Save andytlr/9283541 to your computer and use it in GitHub Desktop.
Save andytlr/9283541 to your computer and use it in GitHub Desktop.
Convert SVG <polyline> to <path> so they can be animated with D3 etc.

Convert SVG polyline to path

Replace all instances of <polyline with <path and points=" with d="M.

 <?xml version="1.0" encoding="utf-8"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1000px" height="1000px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
-<polyline fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" points="100.712,141.534 582.904,227.835 425.37,478.521
+<path fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M100.712,141.534 582.904,227.835 425.37,478.521
 	711.671,552.493 345.918,810.027 900.713,859.343 "/>
 </svg>

To close the path, you can also add z before the closing ". E.g. 900.713,859.343z "/>.

Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@prathibhasathyajith
Copy link

prathibhasathyajith commented Nov 2, 2016

thank uuu

@rachelreveley
Copy link

I just tried the same and couldn't get it to work...

@tmcw
Copy link

tmcw commented Feb 14, 2017

👍 Note for folks that find this: svgo has an automated process for converting shapes to paths, example:

svgo --pretty  --config='{"full":true}' --enable=convertShapeToPath file.svg

@patiljs
Copy link

patiljs commented Mar 30, 2017

Its work for me Thank You

@danihall
Copy link

wow, didn't think it could be so simple. incredible.
thanks!

@dgroh
Copy link

dgroh commented Feb 16, 2018

brilliant

@painedpineapple
Copy link

painedpineapple commented May 10, 2018

It should also be noted that in order to convert all shape types (including ellipse, circles, etc) within node, you need to add the convertArcs property and set it to true. Like so:

const svgo = new SVGO({
  full: true, // <- This is also necessary each time you use the plugins array, otherwise it'll use the default plugin settings.
  plugins: [
    { convertShapeToPath:  { convertArcs: true }} ,
    ...
  ],
})

const response = await svgo.optimize(testString)

The documentation on using svgo within Node isn't very clear. The README simply links to the test.js file, which doesn't use any params (like convertArcs). Without digging through the code, I wouldn't have known about params or how to use them with the plugins. It would be nice to add docs on how to use svgo within the node env as well as parameter options within each of the plugins. If there are docs already for Node and param usage, maybe a link on the root README file?

Thanks for the great lib! It's a big help in making it possible to animate svgs.

@jessuppi
Copy link

Thanks for the simple explanation @andytlr

I was wondering why a few conversion tools were not working, your explanation helped me to understand it clearly. Then I found another tool that seems to work a lot better: https://jsfiddle.net/kirillbelyaev/u88m7fa2/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment