Jump to content


DrawSVGPlugin hiccup – solution

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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.


Link to comment
Share on other sites

Cool. Thanks for posting. Good info.

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.