选SVG；SVG天然支持无损缩放，设好viewBox并用CSS控制宽高即可等比重绘，而Canvas需手动适配devicePixelRatio，否则缩放会模糊。
需要响应式缩放且保持清晰？选 SVG
SVG 天然支持无损缩放，只要设好 viewBox，再用 CSS 控制 width 和 height，浏览器会自动等比重绘。Canvas 则必须手动适配 window.devicePixelRatio：比如在 Retina 屏上，canvas.width 和 canvas.height 得设为 CSS 尺寸 × 2，绘图坐标也得同步缩放，否则一拉大就模糊。
常见错误现象：<img src="chart.svg"> 引入 SVG 后发现无法改颜色、加点击事件——这是把它当静态图用了，实际应内联 SVG 或用 <object> / <iframe> 加载，才能访问内部 DOM 节点。
- 图标、按钮图形、流程图节点 → 直接用
<svg>+<circle>等标签，CSS 控制fill和hover - 统计图表（如 ECharts 的 SVG 渲染模式）→ 每根柱子是独立
<rect>，可单独绑定 tooltip 或 drill-down 逻辑 - 地图标注点 →
<g transform="translate(120,85)"><circle r="4"/></g>组合位移，比 Canvas 手算坐标快得多
每秒重绘上千个对象？选 Canvas
Canvas 不维护图形状态，每次 requestAnimationFrame 都要清屏 + 全量重绘，看似麻烦，实则是性能可控的关键。SVG 超过 5000 个 <circle> 就可能卡顿，因为浏览器得持续更新 DOM 树、计算样式、触发 layout。
常见错误现象：在 Canvas 上画了 1000 个粒子后，试图用 canvas.getElementById('particle-342') 找某个粒子——这根本不存在，Canvas 没有元素 ID 概念，所有状态得你自己存进数组或 Map。
立即学习“前端免费学习笔记（深入）”；
- 实时仪表盘（温度曲线滚动、设备状态闪烁）→ 每帧只调
ctx.clearRect()+ctx.lineTo()连线，不操作 DOM - 粒子动画、烟花效果 → 用
Float32Array存位置/速度，GPU 友好，JS 层负担轻 - 截图导出为 PNG → 直接
canvas.toDataURL('image/png')，SVG 得靠canvg或服务端中转
要支持点击某条线就弹窗？优先 SVG
SVG 中每个 <path>、<polyline> 都是真实 DOM 节点，addEventListener('click', ...) 直接可用，连坐标计算都省了。Canvas 必须自己实现碰撞检测：监听 canvas 的 click 事件，用 getBoundingClientRect() 换算鼠标位置，再遍历所有图形的几何边界做判断——代码量翻倍，精度还容易出偏差。
使用场景差异明显：用户点击地图上的某个省区看人口数据？SVG 的 <path id="guangdong"> 一行事件绑定搞定；Canvas 里就得维护一个省区路径数组，每次点击都跑一遍 isPointInPath()。
- 交互式图表（悬停高亮某条折线、点击钻取）→ SVG 更省力，无障碍支持也天然更好
- 带右键菜单的流程图节点 →
contextmenu事件直接绑在<g class="node">上 - SEO 或屏幕阅读器需求 → SVG 内容可被爬虫索引，Canvas 只能靠
aria-label补充，效果有限
想混用 SVG 和 Canvas？注意资源加载陷阱
不能直接 ctx.drawImage(svgElement) 把 SVG 元素画到 Canvas 上——多数浏览器会报 SecurityError 或留白。正确做法是先序列化 SVG 为字符串，再转 Blob URL：
const serializer = new XMLSerializer();
const svgStr = serializer.serializeToString(svgEl);
const blob = new Blob([svgStr], { type: 'image/svg+xml' });
const url = URL.createObjectURL(blob);
const img = new Image();
img.onload = () => { ctx.drawImage(img, 0, 0); };
img.src = url;
但要注意：这样渲染出来的只是位图快照，放大照样糊，且 SVG 里的 <image href="logo.png"> 或 CSS 样式可能丢失。真正难的不是语法，是判断“这个图形会不会被用户缩放”“要不要支持右键另存为”“点击区域是否需要精确到 2px 内”。这些决策点一旦定错，后面补救成本远高于初期多花十分钟评估。
