Canvas or SVG?

[violacase]

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? 

[Ihatetomatoes]

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.

 

Cheers

Petr

[GreenSock]

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).

[violacase]

Thanks Petr and Jack, your detailed answers make sense, I expected this kind of reaction   but without the details.

 

Nevertheless good libraries both for SVG and Canvas are here now and evolving. Indeed hard to decide...

[OSUblake]

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.

 

Splat! 

http://jonobr1.github.io/two.js/examples/morph.html

 

Jumping Jack Sack.

http://lab.ultranoir.com/jumping-jack-sack/

 

Two.js Home Page

http://jonobr1.github.io/two.js/

[Jonathan]

Thanks Blake!.. two.js is really cool, thanks for the share!

 

I noticed the Jumping Jack Sack link goes to a not found page.

[OSUblake]

There was a space on the end.

 

http://lab.ultranoir.com/jumping-jack-sack/

 

It's also listed in the projects section

http://jonobr1.github.io/two.js/projects/

[Jonathan]

I love that text twist when the Jumping Jack Sack animates in

[violacase]

Thanks Blake!.. two.js is really cool, thanks for the share!

 

Yep... very interesting.

 

(But what a terrible name. It's a paraphrase on three.js I think which is also a terrible name for a lib)