SVG vs Canvas graphics. Why canvas when you have SVG?

Question

I've been pondering over this for sometime now 🤔. If SVG Graphics are scalable infinitely without loss in resolution and don't need JavaScript, why is there even canvas? I mean, canvas graphics pixel based, which makes them resolution-dependent, while it's the vice versa for SVG. In what way is Canvas graphics better than SVG Graphics 😐? I'm curious! Waiting for your answer!
Upvote Discussion!!

Oh! And by the way, an SVG code of mine! Leave an upvote! Thanx!
https://code.sololearn.com/WRj9kS2bPsT3/?ref=app

Answer 1

It depends on the main purpose for example … if you need to paint pixels to the screen and have concerns about the ability to retrieve and modify yo shapes, canvas is probably the better choice. If, on the other hand, you need to be able to access and chang specific aspects of your graphics, SVG might be more appropriate.

Answer 2

SVG is a language for describing 2D graphics in XML. Canvas draws 2D graphics, on the fly (with a JavaScript). SVG is XML based, which means that every element is available within the SVG DOM. ... In canvas, once the graphic is drawn, it is forgotten by the browser.

Answer 3

Alright, but how is Canvas better than SVG, is my main question here.

Answer 4

Based on the HTML tutorial available, canvas is more suitable for graphic-intensive games than svg:
https://www.sololearn.com/learn/HTML/2202/

Answer 5

I prefer the Canvas, because I learned making "games" with it. Like the getContext("2d") and things like that. I started with it, so naturally it seems easier to me.