EXPLAIN

When the SVG element is embedded into the current web page, you can access HTML
elements from within the SVG. However, you can also embed elements directly in SVG,
using the SVG foreignObject element. This element allows us to embed XHTML,
MathML, RDF, or any other XML-based syntax.

In both solutions, I was able to use getElementById(). However, if I want to manipulate
the elements using other methods, such as getElementsByTagName(),

I have to be care‐
ful about which version of the method I use. For instance, I can use getElementsByTag
Name() for the outer canvas element, but I would need to use the namespace version of
the method, getElementsByTagNameNS, if the contained object is XML,

such as RDF/
XML. Because the embedded object in the solution is HTML5, a namespace wasn’t
necessary.
Once you have the canvas context, use the element like you would from script within
HTML: add rectangles, draw paths, create arcs, and so on.

Canvas? Or SVG?

Why would you use Canvas over SVG, or SVG over Canvas? The canvas element is
faster in frame-type animations. With each animation, the browser only needs to redraw
the changed pixels, not re-create the entire scene.

However, the advantage you get with
the canvas element animation lessen when you have to support a variety of screen sizes,
from smartphone to large monitor. SVG scales beautifully.

Another advantage to SVG is that it figures in rich data visualizations with the assistance
of powerful libraries, . But then, Canvas is used with 3D systems,
such as WebGL, .

But why choose one over the other? One use of SVG and Canvas together is to provide
a fallback for the canvas element: the SVG writes to the DOM and persists even if Java‐
Script is turned off, while the canvas element does not.