SVG打印模糊等问题源于渲染引擎对矢量描述的解释差异；需显式设置viewBox与物理单位尺寸匹配，文本转路径或嵌入字体，禁用滤镜等不兼容特性，并依场景选用Inkscape等可控导出路径。
SVG图形在屏幕上清晰锐利，但直接打印或导出为PDF时容易出现模糊、错位、文字乱码、颜色偏差等问题。核心原因在于：SVG是描述性矢量格式，而打印和PDF生成依赖渲染引擎对它的解释方式——不同工具链处理路径、字体、viewBox、CSS样式和背景的方式各不相同。要保障输出质量，关键不是“能不能转”，而是“怎么让每一步都可控”。
确保 viewBox 与尺寸匹配
viewBox 是 SVG 打印保真的第一道门槛。它定义了坐标系范围和缩放基准，若缺失或设置不当，浏览器或 PDF 引擎会按默认规则拉伸填充，导致比例失真。
- 必须显式声明 viewBox，例如：
<svg width="210mm" height="297mm" viewBox="0 0 595 842">（对应 A4 尺寸） - width/height 建议用物理单位（mm 或 in），而非像素，避免 DPI 解释歧义
- 避免仅设 width/height 而忽略 viewBox，否则多数 PDF 工具会以原始画布尺寸强行适配，引发压缩或裁剪
字体与文本需内联或转为路径
SVG 中的文本若引用系统字体（如 "Helvetica", "Microsoft YaHei"），在无该字体的设备或 PDF 阅读器中会被替换，造成乱码或字形崩坏。
- 导出前将关键文本转为轮廓（path），尤其用于 logo、标题等不可妥协内容
- 若需保留可编辑文本，使用 Web 安全字体 + font-family fallback，并嵌入字体子集（需工具支持，如 Inkscape 的“嵌入字体”选项）
- Excalidraw、SVGEdit 等工具默认不嵌入字体，导出 SVG 后务必检查
<text>元素是否含font-family且目标环境是否支持
慎用高级 SVG 特性
滤镜（feDropShadow、feTurbulence）、蒙版（mask）、图案（pattern）和 CSS 动画在 PDF 中兼容性极差。多数 PDF 渲染器（包括 Chrome 的 printToPDF）会静默降级或完全忽略。
- Excalidraw 的手绘抖动效果基于 SVG 滤镜，导出 PDF 时必然丢失——应先导出 SVG，再用 Illustrator/Inkscape 手动简化为基础路径
- 渐变推荐用
<linearGradient>，避免 radialGradient + stop-offset 复杂插值，部分引擎解析异常 - 禁用
pointer-events、transform: scale()等交互/动态属性，它们在静态导出中无意义且易触发渲染错误
选择合适导出路径
不同场景适用不同流程，没有“万能方案”，只有“最稳路径”：
- 追求最高印刷精度：用 Inkscape 打开 SVG → 检查路径与字体 → 文件 → 另存为 PDF（勾选“嵌入所有字体”“导出文本为路径”）
- 批量办公交付：上传至 iLoveOFD 等可信在线工具 → 转换为单个 PDF → 下载后用 Acrobat 检查字体嵌入状态
-
网页图表（ECharts/Plotly）：优先调用库原生
chart.getDataURL({type: 'svg'})→ 再用浏览器打印该 SVG 页面（关闭“背景图形”）→ 保存为 PDF -
Manta 发票等专业模板系统：严格按 244×198px 等推荐尺寸准备 logo；确保
printBackground: true开启；CSS 打印样式中禁用 margin/padding 干扰
真正影响打印效果的，往往不是图形本身多复杂，而是导出链路上某一个环节的默认行为没被覆盖。从 viewBox 到字体，从滤镜到导出工具，每一步都值得确认一次——这不是繁琐，而是对交付质量的基本尊重。
