> For the complete documentation index, see [llms.txt](https://huataihuang.gitbook.io/cloud-atlas-draft/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://huataihuang.gitbook.io/cloud-atlas-draft/develop/nodejs/npm/svg2png.md).

# svg2png

在撰写 [在OS X安装Docker](/cloud-atlas-draft/virtual/docker/engine/an-zhuang/deploy_docker_in_osx.md) 文档时，发现[Docker文档](https://docs.docker.com/engine/installation/mac/)使用的图片是采用SVG（矢量图）。由于这个图形格式是XML文件，我也想转换成PNG图片，所以就google了一下处理的方法。

> [SVG](https://en.wikipedia.org/wiki/Scalable_Vector_Graphics)(Scalable Vector Graphics)是一种基于XML的二维矢量图形格式并且支持交互和动画。SVG格式是W3C组织1999年开发的开放标准。由于SVG是通过XML文本文件定义的，所以可以搜索、索引、脚本化和压缩。作为XML文件，SVG图形可以由任何文本编辑程序创建和修改，不过，通常是使用绘图软件。所有主流的web浏览器都支持SVG图形。

## 安装`svg2png`

```bash
nvm use 5.6.0
npm install svg2png -g
```

> `svg2png`要求使用node.js 5.x，我在[开发环境使用nvm管理node.js版本](/cloud-atlas-draft/develop/nodejs/startup/nodejs_develop_environment.md)，所以这里切换使用`v5.6.0`

## 使用PlantomJS来进行SVG转换PNG

```javascript
const pn = require("pn"); // https://www.npmjs.com/package/pn 
const svg2png = require("svg2png");

pn.readFile("source.svg")
    .then(svg2png)
    .then(buffer => fs.writeFile("dest.png", buffer))
    .catch(e => console.error(e));
```

## Node.js要求

`svg2png`使用了最新的`ES2015`特性，所以要求使用最新版本的Node.js，即只支持Node.js 5.x系列。

## svgexport

[svgexport](https://github.com/shakiba/svgexport)是另外一个Node.js模块和命令行工具，可以将SVG文件输出为PNG和JPEG，也是使用PhantomJS来渲染SVG文件。

安装方法

```bash
npm install svgexport --save
```

使用方法

```bash
svgexport <input file> <output file> <options>

    <options>        [<format>] [<quality>] [<input viewbox>] [<output size>] [<resize mode>] [<styles>]
```

```bash
svgexport input.svg output.png 1.5x
```

## 参考

* [Convert SVG to PNG](https://davidwalsh.name/convert-svg-png)
* [ svg2png: Converts SVGs to PNGs, using PhantomJS](https://www.npmjs.com/package/svg2png)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://huataihuang.gitbook.io/cloud-atlas-draft/develop/nodejs/npm/svg2png.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.