ycmjason / svg-to-img

Just another svg-to-image library, that works in the browser and node.

@ycm.jason/svg-to-img

Just another svg-to-image library, that works in the browser and node.

Install

npm install --save @ycm.jason/svg-to-img

Or use CDN

<script src="https://unpkg.com/@ycm.jason/svg-to-img/dist/svg-to-img-full.umd.js"></script>

Usage

Browser

<script src="https://unpkg.com/@ycm.jason/svg-to-img/dist/svg-to-img-full.umd.js"></script>

<script>
SvgToImg.png('<svg>...</svg>').then(dataURL => { ... });

SvgToImg.jpeg('<svg>...</svg>').then(dataURL => { ... });

SvgToImg.jpg('<svg>...</svg>').then(dataURL => { ... });
</script>

Or if you are using module loader:

import SvgToImg from '@ycm.jason/svg-to-img/dist/svg-to-img.esm.js';

SvgToImg.png('<svg>...</svg>').then(dataURL => { ... });

SvgToImg.jpeg('<svg>...</svg>').then(dataURL => { ... });

SvgToImg.jpg('<svg>...</svg>').then(dataURL => { ... });

Node

When using this with node, the promise resolves to a buffer.

One-off API

The following API is great for one-off conversion. They will spawn an instance of puppeteer and close it after the SVG has been converted.

const SvgToImg = require('@ycm.jason/svg-to-img');

SvgToImg.png('<svg>...</svg>').then(buffer => { ... });

SvgToImg.jpeg('<svg>...</svg>').then(buffer => { ... });

SvgToImg.jpg('<svg>...</svg>').then(buffer => { ... });

The above code spawns three independent puppeteer server and closes them after each image generation. Setting up and tearing down the puppeteer can be computationally expensive. So you could use the persistent API.

Persistent API

const svgToImg = require('@ycm.jason/svg-to-img')(); // spawns the puppeteer

svgToImg.png('<svg>...</svg>').then(buffer => { ... });

svgToImg.jpeg('<svg>...</svg>').then(buffer => { ... });

svgToImg.jpg('<svg>...</svg>').then(buffer => { ... });

svgToImg.close(() => { ... });

Browser API

SvgToImg.png(svgString)

• svgString <String> The string containing the svg xml.
• return: <Promise<String>> Promise that resolves to the Data URL of the png image.

SvgToImg.jpeg(svgString)

• svgString <String> The string containing the svg xml.
• return: <Promise<String>> Promise that resolves to the Data URL of the jpeg image.
• alias: SvgToImg.jpg(svgString)

Node API

SvgToImg.png(svgString)

• svgString <String> The string containing the svg xml.
• return: <Promise<Buffer>> Promise that resolves to the Buffer of the png image.

SvgToImg.jpeg(svgString)

• svgString <String> The string containing the svg xml.
• return: <Promise<Buffer>> Promise that resolves to the Buffer of the jpeg image.
• alias: SvgToImg.jpg(svgString)

class: SvgToImg

You can create a SvgToImg by calling SvgToImg(). This will create a reusable instance of puppeteer. Ideal if you have to convert multiple SVGs.

const SvgToImg = require('@ycm.jason/svg-to-img');
const svgToImg = SvgToImg();

svgToImg.close()

• svgString <String> The string containing the svg xml.
• return: <Promise> Promise that resolves after puppeteer closes the browser.

svgToImg.png(svgString)

• svgString <String> The string containing the svg xml.
• return: <Promise<Buffer>> Promise that resolves to the Buffer of the png image.

svgToImg.jpeg(svgString)

• svgString <String> The string containing the svg xml.
• return: <Promise<Buffer>> Promise that resolves to the Buffer of the jpeg image.
• alias: svgToImg.jpg(svgString)

Author

Jason Yu ([e-mail])