Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
bin
 
 
 
 
lib
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

@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 (me@ycmjason.com)

About

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

Resources

Packages

No packages published