draw.io 与 Word 转 PDF 打印时的清晰度问题
最近打印论文发现一个问题,我的超高清流程图 PNG,打印出来非常糊。
然后检查了一下 PDF,确实是导出时糊成一坨。
我用后期画图用的都是 draw.io,之前也写过 draw.io 相关设置的文章,研究了一下,大概分为两种情况。
使用像素图(PNG)
如果使用 PNG 之类的像素图,首先要确保原图像素足够大,在 draw.io 中我会导出为 400% 大小。然后在 Word 选项 -> 高级中:
可以选择以下两种任意其一
- 不压缩文件中的图像
- 默认分辨率设置为「高保真」
之后把糊图全部替换一遍,这样至少设置后图像不会被压缩。
检查方式:放大 Word 界面到 250% 后看看图像的清晰度是否可接受。
但是导出 PDF 或者打印时,像素图始终是以图像像素打印的,带有抗锯齿,没有矢量文字那么清晰。而且流程图用矢量图无疑是更好的。
使用矢量图(SVG)
在使用 draw.io 的 SVG 导出矢量图后,在 Word 中显示不糊了,但是导出为 PDF 发现还是会糊的。
PDF 中明显依然是把 SVG 转换为了像素图。并且,「dobj」 的上框线也被截断了一半,因为 bounding box 是从线条中间算的,导出时 SVG 必须加点边距来避免这个情况。
如果想要 Word 能完全按照矢量图处理 SVG,draw.io 导出时需要取消勾选「嵌入字体」和「嵌入图形」。
但此时渲染更不对了。一是字体不对,其次是 SVG 内的文字默认不换行。
这是因为 draw.io 的 SVG 默认面向 HTML 的,Word 对于很多 HTML SVG 的渲染特性是不支持的。如果需要 draw.io 的渲染和 Word 一致:
- 在图形框上设置字体,而不是选中文字内部设置字体。
- 在导出前需要全选图形,然后在右侧栏的文字选项卡中勾选「转换标签为 SVG」。
但是就算是这样,你还是有可能会发现英文字体间距(kerning)有问题。
我看了下官网的说明,这种情况应该要取消前两项。
这样最终效果就完全一致,导出为 PDF 打印后,图表内的文字也和正文一样清晰,而且可以被选中。
总结
如果用像素图,记得图像够大,让图像不要压缩即可。
如果用矢量图,需要
- 全选图像,「文本」中取消「自动换行」和「格式化文本」。手动换行
- draw.io 导出 SVG 时取消「嵌入字体」和「嵌入图像」,并添加一点边距
这样 Word 转 SVG 为 PDF 时,文字可以保持矢量状态,而且可以被选中。