直接导出高质量矢量pdf或图片的关键在于保留原始svg的矢量结构；html中的元素本身就是标准矢量格式，只要用outerhtml获取完整字符串、补全xml声明与命名空间、确保viewbox存在，并构造blob下载，即可无损导出svg文件；导出pdf应通过svgedit或inkscape等工具进行矢量转换，避免浏览器“打印→保存为pdf”导致栅格化；导出高清png需按目标分辨率设置canvas尺寸并补偿devicepixelratio，优先选用png格式以支持透明背景和无损压缩。
直接导出高质量矢量 PDF 或图片，关键不在于“转换”，而在于**保留原始 SVG 的矢量结构**。HTML 中的 `
导出原生 SVG 文件（最保真）
这是最简单、最可靠的方式——不经过任何栅格化，完全保留路径、文字、渐变、透明度等所有矢量信息，可被 Illustrator、Inkscape、浏览器直接打开编辑。
- 选中页面中目标 `
- 用
outerHTML获取完整字符串（不能用innerHTML，否则丢失根标签和属性） - 手动补全 XML 声明和命名空间：
<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" ...></svg> - 确保
viewBox存在（若缺失，可用getBoundingClientRect()推算宽高） - 构造 Blob 并触发下载：
new Blob([fullSvg], { type: 'image/svg+xml' })
导出为矢量 PDF（保持可缩放、可打印）
SVG 本身不能直接当 PDF 下载，但有两种主流方案，都真正输出矢量内容：
- 浏览器端方案（推荐）：使用 SVGEdit 或 Inkscape Web 版。把 SVG 字符串粘贴进去，再通过其“导出为 PDF”功能生成——它内部将 SVG 转为 PDF 矢量指令，不 rasterize
-
本地工具方案：用 Inkscape 打开 SVG 文件 → “文件 → 另存为” → 选择
PDF (*.pdf)→ 保持默认设置即可。Inkscape 输出的 PDF 是纯矢量，支持文本搜索、缩放不失真
⚠️ 注意：不要用“打印 → 保存为 PDF”这种方式，多数浏览器会将 SVG 渲染成位图再打包，导致文字变糊、线条锯齿。
导出高清 PNG/JPEG（需控制分辨率）
位图导出本质是“栅格化”，质量取决于渲染时的画布尺寸，而非原始 SVG 大小。
- 创建 canvas 时，按所需输出尺寸设定宽高（例如 2× 或 4× 原始 viewBox 尺寸），不是用 CSS 缩放
- 加载 SVG 时，用
img.src = URL.createObjectURL(new Blob([svgStr], ...))避免跨域问题 - 绘制前设置 canvas 的
devicePixelRatio补偿高清屏（如canvas.width *= window.devicePixelRatio） - 导出 PNG 优先于 JPEG——PNG 支持透明背景且无损压缩，更适合图标、UI 元素
避坑提醒：这些操作会毁掉矢量优势
以下做法看似快捷，实则丢失精度，应避免：
- 用 html2canvas 或 dom-to-image 截图整个 HTML 区域——结果是位图，放大即模糊
- 对 SVG 元素用 CSS
transform: scale()后再导出——只是视觉放大，实际分辨率没变 - 把 SVG 当作 img 标签的 src 直接丢进 canvas——部分浏览器会降采样，细节丢失
- 依赖第三方在线工具上传 SVG → 导出 PDF，除非明确说明“矢量导出”，否则大概率后台做了光栅化
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
