I am not familiar with Svg and canvas. Could anyone elaborate the usage of the two? | Sololearn: Learn to code for FREE!
New course! Every coder should learn Generative AI!
Try a free lesson
+ 6

I am not familiar with Svg and canvas. Could anyone elaborate the usage of the two?

I want to create dynamic animations for my site. I learnt from somewhere that svg images could be used to produce animations but unfortunately I ended up learning nothing about the same. I wonder if you could teach me this art through examples.

16th Jul 2017, 12:10 PM
็Ž‹ไน‰้˜ณ~Dharmarajaditya
็Ž‹ไน‰้˜ณ~Dharmarajaditya - avatar
12 Answers
+ 6
SVG, as Canvas, is a new feature of Html5... Both are complementary, and handle their content very differently: SVG handle vector graphics, as Canvas handle bitmaps. SVG compose image with element accessible through DOM, while Canvas comes with a JS api for drawing on surface of element. SVG can handle bitmaps, but isn't design for that puropose, and conversely, Canvas can handle vectors graphics, but isn't adapted too... A third specialized container for drawing exist also with html5, designed for handle 3D through another specialized JS api: WebGL...
16th Jul 2017, 12:18 PM
visph
visph - avatar
+ 4
It sounds cool ๐Ÿ˜€
16th Jul 2017, 12:45 PM
็Ž‹ไน‰้˜ณ~Dharmarajaditya
็Ž‹ไน‰้˜ณ~Dharmarajaditya - avatar
+ 4
Oh sorry about that... I am new to this platform and don't know much about it. I was checking what does that tick mark do but I failed. ๐Ÿ˜‚๐Ÿ˜‚
16th Jul 2017, 12:49 PM
็Ž‹ไน‰้˜ณ~Dharmarajaditya
็Ž‹ไน‰้˜ณ~Dharmarajaditya - avatar
+ 3
DOM is a headache for me. Well, thanks for introducing a new element to me. ๐Ÿ˜Š
16th Jul 2017, 12:23 PM
็Ž‹ไน‰้˜ณ~Dharmarajaditya
็Ž‹ไน‰้˜ณ~Dharmarajaditya - avatar
+ 3
DOM is not heck ^^ It stand for Document Object Model, and is the internal data structure handling a web document content (html page) in an object oriented model ;)
16th Jul 2017, 12:26 PM
visph
visph - avatar
+ 3
I know DOM and I can use it as well. What I was talking about is "WebGL".
16th Jul 2017, 12:28 PM
็Ž‹ไน‰้˜ณ~Dharmarajaditya
็Ž‹ไน‰้˜ณ~Dharmarajaditya - avatar
+ 3
WebGL is quite heck ;P ... and it would be advised to handle it through ready made libraries/frameworks ^^
16th Jul 2017, 12:29 PM
visph
visph - avatar
+ 3
Haha Yeah since it works with 3D animations, it might be complicated to manage with the code ๐Ÿ˜‚๐Ÿ˜‚
16th Jul 2017, 12:32 PM
็Ž‹ไน‰้˜ณ~Dharmarajaditya
็Ž‹ไน‰้˜ณ~Dharmarajaditya - avatar
+ 3
I will try to learn it ๐Ÿ˜Š Have you ever used it in your code?
16th Jul 2017, 12:40 PM
็Ž‹ไน‰้˜ณ~Dharmarajaditya
็Ž‹ไน‰้˜ณ~Dharmarajaditya - avatar
+ 3
Can I ask you why you set and immediatly unset the 'best answer' mark to my first answer?
16th Jul 2017, 12:48 PM
visph
visph - avatar
+ 2
WebGL use OpenGL 3d language description, which is hard to dive in and master... It's not impossible, but will require much time even for basics (there's near to none basics, as 3d coding needs a wide range of 'basics' making them complicated... but powerful of these language come also from the ability to low level handling ;))
16th Jul 2017, 12:37 PM
visph
visph - avatar
+ 2
No: I'm stand to lazy (and have other topics to master) still now, even to take time to learn some related frameworks/libraries (all the more as I love low level coding/handling from scratch and reinvent the wheel :P)...
16th Jul 2017, 12:42 PM
visph
visph - avatar