SVG—Canvas comparisons

The <canvas> HTML element takes longer to load than the other elements and its behavior depends on JavaScript—it allows the element to be handled with JavaScript in a simpler way, while the SVG describes instantly the shapes to load.

Another important thing about the <canvas> element is that it is displayed like a raster image, as opposed to SVG, which is displayed like HTML elements: vector.

SVG (inline):

<svg viewBox="0 0 100 100" width="100" height="100">
  <path
    fill="none"
    stroke="red"
    stroke-width="5"
    d="
      M   0   0 <!--moveTo-->
      L 100   0 <!--lineTo-->
      L  50 100 <!--lineTo-->
      z         <!--closePath-->
    "
  />
</svg>

JavaScript (for the <canvas> element):

const canvas = document.querySelector('canvas')
const context = canvas.getContext('2d')
context.lineWidth = 5
context.strokeStyle = 'red'
context.beginPath()
context.moveTo(  0,   0)
context.lineTo(100,   0)
context.lineTo( 50, 100)
context.closePath()
context.stroke()