Extensible Markup Language (XML) is a set of rules for encoding documents in machine-readable form. It is a means to structure information.
Many application programming interfaces (APIs) have been developed to process XML data, such as Google Earth.
Hundreds of XML-based languages have been developed, including RSS, Microsoft Office Open XML, Apple's iWork...
XML documents must contain a root element. This element is "the parent" of all other elements.
The elements in an XML document form a document tree. The tree starts at the root and branches to the lowest level of the tree.
All elements can have sub elements (child elements).
The terms parent, child, and sibling are used to describe the relationships between elements. Parent elements have children. Children on the same level are called siblings (brothers or sisters).All elements can have text content and attributes, like HTML.
SVG is a high-level XML-based markup language, where you draw by creating XML elements to define the image.
Each element in SVG is an object that may be targeted using an identifier (id). This also means that each graphic element must be inserted into the XML file. 1000 rectangles would require inserting 1000 elements into the XML file.
SVG does offer the ability to draw and animate by combining svg and css, and you may create SVG graphics using programs such as Illustrator. SVG is a good solution for vector imagery. SVG Reference; Wikipedia widely uses SVG
The canvas tag is a rectangular area similar to a div, but it allows you to draw sophisticated graphics inside it using JavaScript.
Apple developed it to render user interface widgets and images for the Mac OS and Safari. Apple released its patents under the W3C royalty-free licensing, meaning that Apple provides royalty-free licensing for canvas when it appears within W3C HTML recommendations.
The rectangle is the only native primitive shape. The canvas tag is a container, javascript draws the graphics into the html canvas tag.
Canvas drawing instructions are executed the moment they are called. Canvas allows for dynamic, scriptable rendering of 2d shapes and bitmap images.
Canvas supports both vectors and bitmap images. However, the final viewable output from Canvas is always bitmap, regardless of how the image was generated. This means that zooming content in the canvas tag will pixelate.
There is no data structure for visual elements in the Canvas tag. You can not apply events to items drawn within Canvas, because they are only transient drawing operations (not objects). Fully exploiting Canvas requires one to be proficient in JavaScript. However libraries such as p5.js and paper.js offer an entry point.
Canvas Tutorials: HTML5 Canvas Tutorials, Mozilla