Jump to content
Search Community

Canvas or SVG?

violacase test
Moderator Tag

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

Hi folks,


Not a specific GSAP related question I guess, but perhaps still a bit...


In this forum a lot of focus is put on SVG manipulation and just a little bit on canvas. 

I would like to know what display 'system' javascript experts would choose in the year 2016 and why if they would start a blank web page project with lots of GSAP. SVG or Canvas? 

Link to comment
Share on other sites

Hey violacase, it really depends on the concept of you animations and the effects you are trying to create.


I wouldn't say lets use only Canvas or only SVG, both are suitable options.


As a general rule I would choose SVG for any vector based effects, that can be created in Illustrator and then exported as SVG.


Canvas might be more suitable for image sprites or more complex animations and would give you some performance benefits, but might be harder for debug in a browser.


I don't have much experience with Canvas, but I like the SVG approach because of the more natural workflow - draw > export > animate.


Hope that helps.




  • Like 3
Link to comment
Share on other sites

Yep, I'd echo Petr's sentiments. Both of strengths and weaknesses. 


If you want to morph a vector shape into another shape, SVG is probably your only option. It's also amazing for responsive graphics that are razor sharp on every display. However, if you're doing a ton of animation with many elements simultaneously, SVG's weakness is going to be rendering performance because it has to constantly fabricate pixels on the fly and manage mouse/touch events on all the elements whereas canvas doesn't care - it's just a big blob of pixels. Certain complex filter effects are also only available on canvas (see PixiJS examples). 


If you're doing a video game, for example, SVG would almost surely be a poor choice. Canvas would blow the doors off of SVG performance-wise in that case. Then again, it's not accessible or semantic at all. SVG keeps each element and text completely inspectable and selectable. 


It's just too complex to say "people should use canvas in 2016" (or SVG). It's more nuanced. You've gotta keep all the strengths and weaknesses in mind (which is kinda hard, I know).

  • Like 2
Link to comment
Share on other sites

Do you want to work with pixels or vectors? Why not both? There is a really interesting library called two.js that is renderer agnostic, meaning you can use whatever renderer you want, canvas, svg, webgl. One downside to it right now is that it doesn't support images.


These demos always put a smile on my face.





Jumping Jack Sack.



Two.js Home Page


  • Like 4
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.
  • Create New...