HTML元素直接调用toSvg()会失败，因DOM结构不等于SVG语法；仅原生SVG元素或Canvas重录绘制指令可导出有效SVG，需补全XML声明、命名空间及viewBox。
HTML元素直接调用toSvg()会失败，因为不是所有HTML都能转SVG
浏览器根本不允许把 <div>、<p> 或 CSS 渲染的按钮直接塞进 <svg> 标签里生成有效矢量图——DOM 结构 ≠ SVG 语法。你看到的“空白”或 DOMException: Failed to execute 'createElementNS' 错误，不是代码写错了，是底层模型冲突。
真正能导出为可缩放、可编辑 SVG 的，只有两类内容：
- 页面中已存在的原生
<svg>元素（比如 D3、Chart.js v4+ SVG 模式、MindElixir 内联渲染） - Canvas 绘制内容，但必须在绘制时同步记录指令（如
ctx.lineTo()），而不是事后截图
用 html2canvas、toDataURL('image/png') 或浏览器“另存为”得到的全是位图，放大就糊，和 SVG 无关。
已有内联SVG怎么安全导出为文件
这是最稳、零兼容问题的路径：选中目标 <svg>，提取字符串，补全 XML 声明和命名空间，再 Blob 下载。
立即学习“前端免费学习笔记（深入）”；
- 必须用
outerHTML，不是innerHTML——否则丢失<svg>根标签和属性 - 必须手动添加
<?xml version="1.0" encoding="UTF-8"?>和xmlns="http://www.w3.org/2000/svg"，否则 Inkscape、Illustrator 打不开 -
viewBox属性不能丢，否则缩放失真；若原 SVG 没设，可用getBoundingClientRect()推算
示例关键逻辑：
const svgEl = document.querySelector('#my-chart')
const svgStr = svgEl.outerHTML
const fullSvg = `<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" ${svgEl.getAttribute('viewBox') || `viewBox="0 0 ${svgEl.width.baseVal.value} ${svgEl.height.baseVal.value}"`} >${svgEl.innerHTML}</svg>`
const blob = new Blob([fullSvg], { type: 'image/svg+xml' })
Canvas绘图想导出SVG，必须重写绘制逻辑
Canvas 是像素画布，SVG 是几何描述。没有“一键转换”，只有“重录意图”。你不能对已画完的 <canvas> 调 getSerializedSvg()——那只会返回空或占位符。
- 必须在绘图前就用
canvas2svg替换上下文：const ctx = new Canvas2SVG(width, height).getContext('2d') - 所有
ctx.arc()、ctx.fillText()调用，实际都在构建<path d="">或<text>字符串 - 渐变、阴影、
globalAlpha等 Canvas 特性，需手动映射到 SVG 的<defs>和 opacity/fill 属性 - 坐标系一致（左上为原点），但 Canvas 的
strokeStyle = 'rgba(0,0,0,0.5)'得转成stroke="rgba(0,0,0,0.5)"，不能直接拷贝对象
用 html-to-image 库导出图表，要防字体和图片失效
像 Chart.js 默认用 Canvas 渲染，html-to-image 的 toSvg() 实际是先将 DOM 渲染成临时 Canvas，再转 SVG——它本质仍是位图中间态，但做了字体嵌入和图片 data:URL 化处理，勉强可用。
- 必须显式传
width和height，否则默认按 100×100 导出，图表被裁切 - 外部图片（
<img src="xxx.png">）必须提前转成data:URL，否则导出后“裂开”；onImageError回调里可 fallback 为占位 SVG - 字体要用
preferredFontFormat: 'woff2'+ 内联@font-face，否则文字变成方块或默认字体 -
includeStyleProperties列表得明确写上['fill', 'stroke', 'font-size']，否则 CSS 样式不继承
真正复杂图表（带滤镜、混合模式、clipPath）仍会降级或错位，这不是库的问题，是 HTML/CSS 渲染模型和 SVG 规范之间的表达鸿沟。
最容易被忽略的是 viewBox 和坐标系映射——哪怕导出成功，没设 viewBox 的 SVG 在不同设备上缩放行为不可控；Canvas 转 SVG 时漏掉 y 轴翻转处理，图形会上下颠倒。这些细节不报错，但结果肉眼可见地不对。
