Excalidraw导出SVG/PNG时的分辨率设置建议

Excalidraw 导出 SVG/PNG 时的分辨率设置建议

在技术文档、系统设计和团队协作中，一张清晰的架构图往往胜过千言万语。但你是否也遇到过这样的尴尬：在 Excalidraw 里画得清清楚楚，导出后插入 PPT 或文档却变得模糊不清？文字边缘发虚，线条锯齿明显——问题不在于你的绘图技巧，而很可能出在导出设置上。

尤其是对 PNG 格式的处理，很多用户仍沿用“默认 1x 导出”的习惯，殊不知这早已无法满足现代高 DPI 显示设备的需求。而另一方面，SVG 虽然天生清晰，却因字体兼容性等问题在某些场景下“翻车”。如何科学地导出图形，既保证质量又兼顾实用性？我们不妨深入到底层机制，重新理解 Excalidraw 的两种核心输出方式。

SVG 是矢量，所以它根本不需要“分辨率”

很多人一听到“分辨率”，第一反应就是 DPI、PPI、像素尺寸……但这些概念放到 SVG 上其实是个误解。

SVG（Scalable Vector Graphics）的本质是一组描述图形的数学指令：这条线从哪到哪，这个矩形多大，那段文字用什么字体。它不像照片那样由像素点组成，因此无论放大多少倍，渲染引擎都能重新计算并绘制出锐利的边缘。你在 Excalidraw 中画的一条曲线，导出为 SVG 后依然是平滑的贝塞尔路径，而不是被拉伸的马赛克块。

当你点击“导出为 SVG”时，Excalidraw 实际做了这几件事：

• 遍历画布上的所有元素；
• 将每个形状转换成对应的<rect>、<path>、<text>等标签；
• 保留样式属性，比如颜色、笔触宽度、字体族；
• 最终生成一个结构清晰的 XML 文件。

整个过程完全脱离像素概念，自然也就没有“分辨率设置”这一选项。

这也意味着：如果你追求的是长期可编辑、无限缩放、嵌入网页或 Markdown 文档的图表，SVG 应该是首选格式。它的文件小、加载快、支持搜索和复制文本，非常适合技术写作。

不过，别高兴得太早——SVG 并非万能。

最大的坑在于字体依赖。Excalidraw 默认使用Virgil或Helvetica这类系统字体，如果你把 SVG 发给一个没安装这些字体的人，浏览器可能会 fallback 到其他字体，导致排版错乱、文字换行异常。更麻烦的是，手写风格一旦变了，整个图的气质就丢了。

另一个问题是部分办公软件（如低版本 Word、飞书文档旧版）根本不支持直接插入 SVG。这时候你就只能退而求其次，转成 PNG。

所以一句话总结：SVG 不需要设分辨率，但你要关心它能不能在别人电脑上正确显示。对于关键发布场景，建议提前测试跨平台渲染效果，或者用外部工具将文字转为路径（path），彻底规避字体缺失问题。

PNG 才是“分辨率”的主战场：别再用 1x 导出了

如果说 SVG 是“理想主义者”，那 PNG 就是“现实主义者”——它牺牲了可扩展性，换来的是无处不在的兼容性。

PNG 是位图，意味着它记录的是每一个像素的颜色值。一旦生成，图像的清晰度就固定了。你不能指望一个 800×600 的 PNG 在投影仪上全屏展示还依然清晰，尤其是在 Retina 屏、4K 显示器遍地走的今天。

那么问题来了：怎样才能让 PNG 导出足够清晰？

答案只有一个：提高导出时的像素密度，也就是所谓的“缩放比例”。

Excalidraw 提供了 “Export with zoom” 选项，允许你选择 1x、2x、4x 甚至更高的倍率。这里的 “x” 指的是相对于原始画布的渲染倍数。例如：

• 原图画布是 1000×800 px；
• 选择 2x 导出 → 实际渲染尺寸为 2000×1600 px；
• 选择 4x → 渲染为 4000×3200 px。

虽然视觉内容不变，但后者包含了 16 倍于前者的像素信息，细节自然更加丰富。

这背后的原理其实很简单：现代浏览器通过canvas元素进行图形渲染。Excalidraw 在导出 PNG 时，并不会直接使用当前显示的 canvas，而是创建一个“离屏 canvas”，以更高分辨率重绘整个画面。

function exportToPng(canvasElement, scale = 2) { const offscreenCanvas = document.createElement('canvas'); offscreenCanvas.width = canvasElement.width * scale; offscreenCanvas.height = canvasElement.height * scale; const ctx = offscreenCanvas.getContext('2d'); ctx.imageSmoothingEnabled = true; ctx.imageSmoothingQuality = 'high'; ctx.scale(scale, scale); ctx.drawImage(canvasElement, 0, 0); return offscreenCanvas.toDataURL('image/png'); }

这段代码模拟了 Excalidraw 的高清导出逻辑。关键就在于ctx.scale(scale, scale)—— 它告诉绘制引擎：“接下来的所有坐标都放大这么多倍来处理”。于是原本粗 2px 的线条，在 4x 模式下会用 8px 来渲染，边缘再经过抗锯齿处理，最终呈现出极为细腻的效果。

📌 提示：imageSmoothingQuality = 'high'能显著改善斜线和圆角的渲染质量，避免出现“楼梯效应”。

所以，下次有人问“为什么我导出的图模糊”，你可以直接反问一句：“你是用 1x 导出的吧？”

因为 1x 导出的问题太典型了：
假设你的 MacBook Pro 分辨率是 2560×1600，DPI 达到 220，而你导出的 PNG 只有 96 DPI，系统为了填满屏幕空间，就会强行拉伸图像，结果就是模糊、失真、边缘发虚。

解决办法也很简单：只要不是临时预览，永远不要用 1x 导出 PNG。

具体怎么选？看场景：

当然，提升分辨率也有代价：4x 导出会让文件体积暴涨 16 倍。对于一张复杂的图可能达到几 MB，影响上传或加载速度。因此建议根据实际复杂度权衡——线条简单的流程图用 2x 完全足够，只有需要打印或大幅展示时才启用 4x。

还有一个实用技巧：勾选 “Include view” 选项。它可以让你只导出当前视窗内的内容，避免导出大量空白区域，特别适合局部截图或聚焦某个模块讲解。

工程实践中那些容易忽略的细节

再好的工具，也需要合理的使用规范支撑。我们在多个技术团队的协作中发现，很多图像质量问题其实源于缺乏统一标准。

字体一致性问题

前面提到 SVG 的字体风险，这里再强调一次：不要假设所有人和你用同一套字体环境。

解决方案有两个：
1.发布前测试：把 SVG 发到不同操作系统（Windows/macOS/Linux）和浏览器中查看是否正常；
2.转路径（Outline Text）：虽然 Excalidraw 当前不支持此功能，但可以用 Figma、Illustrator 或 Inkscape 打开 SVG 后将文字转为路径，彻底固化外观。

缺点是不能再编辑文字内容，但换来的是绝对一致的视觉呈现。

DPI 元数据真的有用吗？

你会发现，有些专业设计软件导出的 PNG 会包含 DPI 信息（比如 300 DPI），而 Excalidraw 导出的 PNG 通常只有 96 DPI（浏览器 canvas 默认值）。这会影响打印效果吗？

实际上，大多数情况下不会。因为 Excalidraw 导出的是固定像素尺寸的图像，DPI 只是一个提示元数据，告诉排版软件“这个图片应该按多大物理尺寸打印”。

举个例子：
- 一张 2000×1500 px 的 PNG：
- 若标记为 96 DPI → 打印尺寸约为 20.8” × 15.6”
- 若标记为 300 DPI → 打印尺寸变为 6.7” × 5”

如果你希望图像在 InDesign 或 LaTeX 中精确控制打印大小，可以通过后期工具添加 DPI 信息：

magick input.png -density 300 output.png

但这并不改变图像本身的清晰度，只是影响布局计算。

团队协作中的最佳实践

为了避免每次都要纠结“导哪个版本”，建议团队内部建立明确的导出规范：

• 所有源文件保存.excalidraw格式；
• 存档时同时保留 SVG + PNG@2x 双版本；
• 技术文档优先引用 SVG；
• 办公软件使用场景统一导出 PNG@2x；
• 打印材料必须使用 PNG@4x。

甚至可以在 Wiki 模板中加入一句说明：“本项目图表均采用 Excalidraw 绘制，导出规范见 XXX”。

导出流程的本质：从运行时状态到持久化文件

从系统角度看，Excalidraw 的导出功能处于整个协作链的末端：

[用户输入] ↓ (绘制/编辑) Excalidraw 白板引擎 ↓ (元素建模 + 手绘渲染) 内存中的 Scene Graph（图形场景树） ↙ ↘ [导出 SVG] [导出 PNG] ↓ ↓ 矢量序列化 高清光栅化（带缩放） ↓ ↓ XML 字符串 Base64 Data URL ↓ ↓ 触发下载 触发下载

可以看到，SVG 和 PNG 代表了两种截然不同的输出哲学：

• SVG 强调保真与可维护性：它尽可能保留原始结构和语义，适合长期演进；
• PNG 强调兼容与即用性：它把一切“拍扁”成像素，确保任何地方都能打开。

这也决定了它们的应用边界。

当你面对一个决策：“该导出哪种格式？” 其实是在回答三个问题：

1. 是否还需要编辑？
   → 是 → 选 SVG 或保留.excalidraw文件。

2. 目标平台是否支持 SVG？
   → 支持（如 Notion、Confluence、GitHub README）→ 选 SVG；
   → 不支持（如钉钉文档、旧版 Office）→ 选 PNG。

3. 是否用于高清展示或打印？
   → 是 → 必须用 PNG @ 4x。

按照这个逻辑走一遍，基本就不会出错。

最后的建议：让每一次导出都经得起放大

技术表达的 professionalism，往往藏在细节里。

一张模糊的架构图，不仅降低文档可信度，还可能引发误解和返工。而解决这个问题的成本极低——只需要改一个设置：把 PNG 导出默认设为 2x。

Excalidraw 完全可以做得更好。比如：
- 将默认缩放设为 2x；
- 根据window.devicePixelRatio自动推荐导出倍数；
- 在导出弹窗中提供预览对比，让用户直观看到 1x 和 2x 的差别；
- 增加“适用于打印”快捷选项，一键导出 4x 高清 PNG。

但在产品改进之前，我们每个人都可以先行动起来。

记住这三条原则：

✅ 日常协作与存档 →首选 SVG
✅ 兼容性要求高或需打印 →PNG 至少 2x，重要场合用 4x
❌ 永远不要用 1x 导出 PNG 用于正式发布

清晰的图，不只是为了好看，更是为了准确传递思想。毕竟，在技术世界里，模糊的表达，本身就是一种错误。