Skip to content

Instantly share code, notes, and snippets.

@andytlr
Last active August 1, 2023 08:02
Show Gist options
  • Star 35 You must be signed in to star a gist
  • Fork 7 You must be signed in to fork a gist
  • 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.
@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