DrawSVGPlugin hiccup – solution

[meandmybadself]

Wanted to document this in the event that someone comes searching.

 

I was injecting an Illustrator SVG into the DOM via JavaScript, and the animation for polylines would get to about 80%, and then immediately jump to 100%.  After playing w/ CSS properties, I found the root of the issue.

 

Illustrator dumps out SVGs with a lot of linebreaks.  I was escaping the carriage returns in JS like so:

 

'<path fill="none" stroke="#4AC7EB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M161.799,173.924c-6.033,0-10.923,4.891-10.923,10.923c0,1.074,0.87,1.942\

1.942,1.942h17.963c1.072,0,1.943-0.868,1.943-1.942 C172.723,178.814,167.832,173.924,161.799,173.924z"/>'

 

 

Removing the carriage returns smoothed things out immensely and all is good in the world.

 

[Carl]

Cool. Thanks for posting. Good info.

[OSUblake]

It's probably not a good idea to do that because you might accidentally end up with an invalid path. This thread goes over one way to fix it, but a better way would be to run it through SVGO. Just copy and paste your markup, and it will optimize your graphic.

 

Web App: https://jakearchibald.github.io/svgomg/

GitHub: https://github.com/svg/svgo