+ 21

SVG vs Canvas

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

19th Apr 2017, 8:00 AM
Pao
Pao - avatar
13 Answers
+ 13
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
20th Apr 2017, 12:52 AM
Kirk Schafer
Kirk Schafer - avatar
+ 17
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.
19th Apr 2017, 10:35 PM
Gami
Gami - avatar
+ 14
@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 💜👌
19th Apr 2017, 11:16 PM
Pao
Pao - avatar
+ 13
@Burey nice, thank you for the links! 👌
19th Apr 2017, 6:39 PM
Pao
Pao - avatar
+ 12
@Will thanks! I really like your Mario code :D
20th Apr 2017, 1:07 AM
Pao
Pao - avatar
+ 12
@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 :)
20th Apr 2017, 1:20 AM
Pao
Pao - avatar
+ 10
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/
19th Apr 2017, 8:07 AM
Burey
Burey - avatar
+ 5
i personally prefer Canvas, as you can see on my codes
19th Apr 2017, 11:22 PM
Welliton Malta
Welliton Malta - avatar
+ 4
thanks @Paola, it's personally one of my favourites too haha Nice codes also
20th Apr 2017, 1:45 AM
Welliton Malta
Welliton Malta - avatar
+ 4
Thanks that was super informative 😁
21st May 2017, 12:02 AM
Peter Cruckshank
Peter Cruckshank - avatar
0
ذخسپپطک بی؟پررئط»*
13th Nov 2019, 1:31 PM
‎امیر مهدی صفار‎
‎امیر مهدی صفار‎ - avatar
2nd Apr 2020, 9:22 AM
SAN
SAN - avatar
11th Apr 2020, 4:48 PM
Kishore Kumar BP
Kishore Kumar BP - avatar