[feature] 添加SVG画布支持

[AMagicPear]

建议增加一项新功能，可选用SVG取代Canvas来绘图。好处是可以无损缩放。

效果见AMagicPear新主页测试，具体实现代码见 https://github.com/AMagicPear/amagicpear.github.io/blob/neo/src/lib/PerryWaves.svelte 。需要做的核心代码更改如下：
首先要给每个circle一个id，并用键值对存储：

let particleElements: { [key: string]: SVGCircleElement } = {};
particles.forEach((particle) => {
  const element = svg.querySelector(`#${particle.id}`);
  if (element) {
    particleElements[particle.id] = element as SVGCircleElement;
  }
});

然后更改animate()中的部分代码：

    function animate() {
-      ctx.clearRect(0, 0, canvas.width, canvas.height);
      let disperseFactor = 1;
      let scatterStrength = 0;
-     if (mouse.speed > 220) {
-           scatterStrength = Math.min((mouse.speed - 220) / 8, 16);
-      }
-      for (let p of particles) {
-        p.update(mouse, disperseFactor, scatterStrength);
-        ctx.beginPath();
-        ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
-        ctx.fillStyle = p.color;
-        ctx.fill();
      
+      if (mouse.speed > 220) {
+        scatterStrength = Math.min((mouse.speed - 220) / 8, 16);
+      }
+      
+      particles.forEach(particle => {
+        particle.update(mouse, disperseFactor, scatterStrength);
+        const element = particleElements[particle.id];
+        if (element) {
+          element.setAttribute('cx', particle.x.toString());
+          element.setAttribute('cy', particle.y.toString());
+        }
+      });
      
      requestAnimationFrame(animate);
    }