SVG vs Canvas | SoloLearn: Learn to code for FREE!

+19

SVG vs Canvas

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

4/19/2017 8:00:26 AM

Pao

13 Answers

New Answer

+12

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

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

+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 💜👌

+13

@Burey nice, thank you for the links! 👌

+12

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

+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 :)

+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/

+5

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

+4

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

+4

Thanks that was super informative 😁

0

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

0

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

0

https://www.sololearn.com/learn/HTML/2202/ You can refer here