HTML元素无法直接转SVG，因<div>、<p>等非SVG元素本质是栅格化结果或布局树，非矢量路径；强行塞入<svg>标签会空白或报DOMException错误。
HTML源码不能直接保存为有效SVG代码——只有原生<svg>元素或Canvas绘制指令重录后的内容，才能生成真正可缩放、可编辑的SVG。
为什么<div>和<p>复制进<svg>标签里会空白或报错
浏览器渲染的HTML元素（比如用CSS画的按钮、Flex布局的卡片）本质是栅格化像素或布局树，不是矢量路径。强行把document.body.innerHTML塞进<svg>标签，会触发DOMException: Failed to execute 'createElementNS'，这不是你漏写了xmlns，而是底层模型不匹配。
常见错误现象：
- 下载后的SVG在Inkscape里打不开，提示“无法解析文档”
- 用
innerHTML提取<svg>内容再拼接，结果丢失viewBox或宽高，缩放后图形被裁切 - 对
<canvas>调toDataURL('image/svg+xml')返回空字符串或data:,
安全导出已有<svg>元素的完整步骤
这是唯一零兼容风险、无需第三方库的方式，适用于D3、Chart.js v4+ SVG模式、内联图标等场景。
立即学习“前端免费学习笔记（深入）”；
- 必须用
outerHTML，不是innerHTML：前者包含根<svg>标签及其所有属性（如width、height、viewBox） - 手动补全XML声明和命名空间：
<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg">，否则AI或设计软件拒绝打开 -
viewBox不能丢：若原<svg>没设，可用getBoundingClientRect()推算，例如viewBox="0 0 ${el.clientWidth} ${el.clientHeight}" - 导出为Blob时，
type必须是'image/svg+xml'，不是'text/plain'或'application/xml'
简短示例：
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.clientWidth} ${svgEl.clientHeight}"`} >
${svgEl.innerHTML}
</svg>`;
const blob = new Blob([fullSvg], { type: 'image/svg+xml' });
const url = URL.createObjectURL(blob);
// 后续用 <a download="chart.svg" href="${url}">下载</a>
Canvas内容想转SVG？必须重写绘制逻辑
Canvas是位图，SVG是几何描述。不存在“截图转矢量”的魔法函数。你不能对已画完的<canvas>调任何方法得到真实SVG。
- 必须在绘图前就用
canvas2svg接管上下文：const ctx = new Canvas2SVG(width, height).getContext('2d') - 所有
ctx.lineTo()、ctx.arc()调用，实际都在构建<path d="">字符串，不是画像素 - Canvas的
strokeStyle = 'linear-gradient(...)'不能直接拷贝到SVG；得提前定义<linearGradient id="grad1">，再用stroke="url(#grad1)" -
globalAlpha需转为opacity或rgba()颜色值，SVG没有全局透明度属性
别踩这些坑：伪SVG导出方案的实际后果
很多方案看似“能跑”，但输出的不是真正SVG：
-
html-to-image的toSvg()：它其实是把HTML先转成Canvas，再用Canvas像素生成base64 PNG——名字带SVG，实际是位图 -
html2canvas+toDataURL('image/svg+xml')：浏览器根本不支持这个MIME类型，多数返回空或报错 - 浏览器“另存为网页，全部”：生成的是HTML+文件夹，不是单个SVG文件，且图片/CSS都是外链，离线即失效
- 用JSoup解析HTML再手写SVG标签：只能处理极简文本，对CSS布局、Flex/Grid、伪元素、字体渲染完全无能为力
真正需要矢量输出时，绕不开两个事实：要么页面里本来就有<svg>，要么Canvas绘制从一开始就得按SVG语义来写——没有中间态。
