论如何以程序员的方式,轻量、快速、优雅地转换 SVG 到 PNG。

0x00 问题描述

近期公司项目过程中,使用 Navicat 制作 E-R 图,为了快速进行头脑风暴,需要把关系图打印出来。

由于业务逻辑比较复杂,图片也越来越庞大。

最早尝试使用 File -> Print as... -> PNG 导出,但是后来发现其 DPI 比较低,而且在模型关系比较大的时候,导出的 PNG 会比较模糊。

后尝试导出至 PDF,但是 Page setup 最多只能设置 A0 大小,这样导出的 PDF 就会被分割为两页,还需要麻烦 UI 小姐姐合并。

最后还剩终极方案,就是 SVG,很不幸的是打印店的电脑没有 macOS 的字体,而且很卡很卡。

由此,问题被转化为:SVG => PNG

方案其实有很多,谷歌一大把。简单列举几个。

  • 在线转换。
  • AI
  • Command + Shift + 3 截图。
  • Safari / Chrome 打开再导出为图片。
  • qlmanage
  • inkscape
  • ImageMagick

但都不太符合我的需求。

  • 所谓轻量,AI 就算了,我可不是 UI 大佬。
  • 所谓快速,装一大堆 Casks 也算了吧。
  • 所谓优雅,透明、DPI 选项也不能缺。

考虑到公司项目保密性,在线转换也被 Pass。

0x01 Coder’s Way

既然作为程序员同时又是个懒蛋,那就要用懒人 + 程序员的方式来解决这个问题。

经过一番尝试,最合适的方案是 librsvg。一行命令搞定。

ImageMagick 也是个不错的选择,但其内部的 SVG Render 引擎似乎支持不完全,转换时出现报错,GitHub Issue;我的版本是 7.0.8-11,若有哪位大佬了解情况欢迎留言讨论,谢谢。

0x02 安装

brew install librsvg

0x03 使用

rsvg-convert --help

使用方法非常简单,参数看起来也不怎么高深,似乎很适合不熟悉图像处理领域的程序员们。

rsvg-convert -d 180 -p 180 test.svg > test.png

这里我增大一倍 DPI,让图片看起来很清晰。转换速度很快,实测 11800 × 12698 的图片在我的菜鸡 MacBook 上只需要三秒左右。

0xFF 结语

真实打印出来的 E-R 图足足有一面墙那么大… 可怕。