SVG vs Canvas

Question

Which one do you prefer for web animations and games, SVG or Canvas, and why? ☺

Answer 1

SVG has its own DOM; more elements => lag. It's visible (mobile) in Nikolay's awesome maze-solver. I could only reliably un-lag it by converting his full walk path (thousands of DOM objects) to a sliding tail (so DOM count stayed down).

Similar lag's in Yaroslav Pieskov's 3D Sphere (I took this apart too; it's not SVG, but lots of DOM div's -- with GPU acceleration tricked on) and--before he fixed it--ValentinHacker's LOOM (the fix reminds me of SVG lagfixes: weird). It's nobody's fault; it's all great stuff--just people pushing limits.

Online, SVG-problems were mostly: it's supposed to handle 10,000 elements but dogs down way too fast (or works only some places). Solutions felt hackish (like...don't draw borders a certain way). The keywords: Palantir, SVG and github pull up several posts in this area.

Canvas has been better for me. I've been fiddling with 2D and OpenGL and haven't had these issues. Burey's been an additional good optimization example for me.

* Burey's link; the "SVG DOM caution" seems understated.
* Lag is CPU (and Javascript is single-threaded):
** Canvas and CSS can be sent to the GPU (as textures) instead.
** RequestAnimationFrame and +1 hidden canvas for speed.
** HTML5 web workers for intense calculations
* SVG DOMs are directly compatible with 3D printing / MakerBots

Answer 2

I like Canvas more because it is more simple and I can understand it a lot better... However there are some stuff that I can not understand like, what is ctx.clip or restore.

Answer 3

@Gami thank you! I saw a guy on youtube testing the same animation on a cellphone in svg and canvas formats and the svg one would load faster. It's good to know you feel canvas is easier to understand since I'd like to learn both. Btw, your ping pong game code using canvas is so great 💜👌

Answer 4

@Burey nice, thank you for the links! 👌

Answer 5

@Will thanks! I really like your Mario code :D

Answer 6

@Kirk Thank you for sharing your knowledge and expertise 👌👏 I wish SoloLearn would include a whole course for animation. Also, great codes! If you happen to have a blog or something I would love to subscribe :)

Answer 7

personally i never used svg and canvas just so easy to manipulate (and fun >:p )

svg is vector based while canvas based on pixel manipulation, there are scenarios best suited for each

take a look here for comparisons

http://mobile.htmlgoodies.com/html5/other/html5-canvas-vs.-svg-choose-the-best-tool-for-the-job.html

https://www.sitepoint.com/canvas-vs-svg-choosing-the-right-tool-for-the-job/

Answer 8

i personally prefer Canvas, as you can see on my codes

Answer 9

thanks @Paola, it's personally one of my favourites too haha Nice codes also

Answer 10

Thanks that was super informative 😁

Answer 11

ذخسپپطک بی؟پررئط»*

Answer 12

Hey!

------Svg vs canvas-------
Svg
https://code.sololearn.com/W0txWg4obC59/?ref=app
Canvas
https://code.sololearn.com/WV5GMtCTD2st/?ref=app

Answer 13

https://www.sololearn.com/learn/HTML/2202/

You can refer here