Mac电脑将SVG文件转换为PNG文件的三种方法 | 牧天的酒吧

Mac电脑将SVG文件转换为PNG文件的三种方法

2022-08-09 13:53:44 于 技术

一、使用js

网址：http://tool.mutian.net/svg2canvas/。

本方法通过js，将svg先转换为canvas格式渲染在网页上，然后右击canvas区域保存为png图片。
本方法目前有个缺点尚未解决，即生成的canvas背景为黑色，保存下来的png图片不是透明底的，这个缺点导致保存的图片基本无用。

二、使用librsvg

在macOS中安装librsvg，通过终端使用rsvg-convert命令，将svg文件直接转换为png图片。
该方法相对完善，生成了想要的效果。
1、安装librsvg

brew install librsvg

2、操作命令
（1）查看版本

rsvg-convert --version

（2）查看帮助

rsvg-convert --help
-d, --dpi-x=<float>                                         pixels per inch [optional; defaults to 90dpi]
-p, --dpi-y=<float>                                         pixels per inch [optional; defaults to 90dpi]
-x, --x-zoom=<float>                                        x zoom factor [optional; defaults to 1.0]
-y, --y-zoom=<float>                                        y zoom factor [optional; defaults to 1.0]
-z, --zoom=<float>                                          zoom factor [optional; defaults to 1.0]
-w, --width=<int>                                           width [optional; defaults to the SVG's width]
-h, --height=<int>                                          height [optional; defaults to the SVG's height]
-f, --format=[png, pdf, ps, eps, svg, xml, recording]       save format [optional; defaults to 'png']
-o, --output                                                output filename [optional; defaults to stdout]
-i, --export-id=<object id>                                 SVG id of object to export [optional; defaults to exporting all objects]
-a, --keep-aspect-ratio                                     whether to preserve the aspect ratio [optional; defaults to FALSE]
-b, --background-color=[black, white, #abccee, #aaa...]     set the background color [optional; defaults to None]
-s, --stylesheet                                            Filename of CSS stylesheet
-u, --unlimited                                             Allow huge SVG files
--keep-image-data                                           Keep image data
--no-keep-image-data                                        Don't keep image data
-v, --version                                               show version information

（3）转换操作

// 命令格式
rsvg-convert <input path> > <output path>
//举例
rsvg-convert --zoom 10 --background-color transparent --dpi-x 300 --dpi-y 300 123.svg > 123.png

背景颜色选项很重要，如果值为none，生成的图片是白色背景，值为transparent，生成的图片才是透明的。
这里也要求svg文件注意把背景颜色置为透明。

三、使用ImageMagick

mageMagick 是一个强大的图像处理工具，下载地址为：https://imagemagick.org/script/download.php。
1、安装ImageMagick
ImageMagick依赖Ghostscript字体，所以先安装Ghostscript，再安装ImageMagick。
ImageMagick依赖的包比较多，如果系统有缺失，逐一安装即可。

brew install ghostscript
brew install imagemagick
回主页