DrawSVG plugin Browser Support

[jstafford]

Hello. I realize that the GSAP DrawSVG plugin is only available to greensock members, but what is the support in browsers like IE and others that have poor support for svg path animation like this? Does this plugin handle this cross browser support and fallback with unchanged draw effect?

[Jonathan]

Hello jstafford, and Welcome to the GreenSock Forum!

 

GSAP is the standard for animating your SVG and all other objects and properties. Even SVG animation (SMIL) does not work in any version of IE. But GSAP does!

 

I hope the following links help you out!

 

SVG is not supported in IE8 and below. Only in IE9 and above! SVG is supported in Firefox, Chrome, and Safari (desktop and mobile versions)

 

Here are some helpful links about the DrawSVGPlugin:

 

DrawSVGPlugin Docs: http://greensock.com/docs/#/HTML5/GSAP/Plugins/DrawSVGPlugin/

 

https://greensock.com/drawSVG

 

http://greensock.com/gsap-1-18-0 (scroll down to: Tween complex string-based values)

 

http://greensock.com/svg-tips

 

Taken from that page GSAP svg tips page:

 

Other SVG Gotchas

GSAP does a lot to remove the hurdles of animating with SVG, but there are still a few things to keep in mind:

• The current SVG spec does not account for 3D transforms. Browser support is varied. Best to test thoroughly and have fallbacks in place.
• There are quite a few browser bugs related to CSS transforms on SVG elements, some of which can interfere with GSAP's ability to animate things properly so we'd strongly recommend only using GSAP to apply transform-related properties like scale, rotation, x, y, etc.
  1. In Chrome (at least as of June 2015), getComputedStyle() returns the WRONG transform values on SVG elements. It doesn't recognize any non-identity values. So, for example, if you apply a class to an SVG element and it has transform: scale(0), Chrome will say its computed scale is 1. Doh! The same goes for any transforms - if you rotate or move or whatever in CSS, Chrome reports it as scale:1, rotation:0, translate:0, etc. So when GSAP asks the browser for the current value, it'll get bogus data.
  2. In Firefox, if you apply a CSS transform to an SVG element, it overrides any transform that is applied via the transform attribute. So if you inspect the element in Dev Tools, you'll see that GSAP is animating the values perfectly in the SVG's transform attribute, but visually you'll see no changes because the CSS class defines something like transform: scale(0) which takes precedence over the transform attribute. As far as we know, there's no way for GSAP to work around this, so it's best to just avoid defining transforms via CSS and use GSAP directly, like TweenLite.set(..., {scale:2, rotation:30, ...})
• Most browsers don't GPU-accelerate SVG elements. GSAP can't change that.
• SVG is lightweight and resolution-independent, but that also can be costly when it comes to performance because rather than just shoving rasterized pixels around (which GPUs are really good at), browsers have to calculate the geometry/paths on each frame. Flash developers will remember converting vectors to bitmaps using cacheAsBitmap. In Flash Player this led to considerable performance gains. Will be interesting to see if browsers offer developers a similar option.

Browser support

All SVG features in this article will work in IE9+ (IE8 doesn't support SVG) and all other major desktop and mobile browsers unless otherwise noted. If you find any cross-browser inconsistencies please don't hesitate to let us know in our support forums.

 

Let us know if you have any other questions!

[jstafford]

Thanks for all this information Jonathan.

 

I am only looking at using the SVG Plugin to do a CSS keyframe animation on the stroke-dashoffset of an SVG path to create an animated

handwriting effect (something like here, 

See the Pen qdWQjL) by tutsplus (@tutsplus) on CodePen

. According to your information, it doesn't sound like

this will be a problem for GSAP on browsers like IE and Safari that are notorious for struggling to handle CSS animation on SVG elements. Do you agree?

 

I appreciate your help.

 

John

[Jonathan]

The GSAP DrawSVG plugin is great at manipulating the stroke dash-offset of an SVG path. You can also use GSAP to animate various CSS properties on your SVG elements as well.

 

Check out this youtube  video by GreenSock on how to use the DrawSVGPlugin:

 

 

[jstafford]

Thanks Jonathan.