Use canvas (or any other HTML element) inside a SVG with SVG foreignObject element.

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <svg height="500" width="500">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
    <foreignObject x="100" y="100" width="100%" height="100%">
      <div style="position:relative;">
        <canvas id="myCanvas" width="200" height="100" style="border:3px solid #000000;">
        </canvas>
        <strong style="position:absolute;top:10px;left:10px;">Canvas inside SVG<br>as foreignObject</strong>
      </div>
    </foreignObject>
  </svg>
  
  <script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(0, 0, 200, 100);
  </script>
</body>

</html>