svg2img
v1.0.0-beta.2
Published
A high-performance in-memory convertor to convert SVG to png/jpeg images for Node.js.
Downloads
79,869
Readme
node-svg2img
A high-performance in-memory convertor to convert SVG to png/jpeg images for Node.js.
Starting with v1.0, we switched to resvg-js for better performance and compatibility to render SVG.
Please notice: this library is only for Node.js, can not run in browsers. (If your Node.js version is lower, you can
npm i [email protected]
instead which only required Node.js v4)
Install
npm i svg2img@next
Usage
Conversion
const fs = require('fs');
const svg2img = require('svg2img');
const btoa = require('btoa');
const svgString = `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="236" height="120" viewBox="0 0 236 120"><rect x="14" y="23" width="200" height="50" fill="#55FF55" stroke="black" stroke-width="1" /></svg>`;
//1. Convert from svg string
svg2img(svgString, function(error, buffer) {
//returns a Buffer
fs.writeFileSync('foo1.png', buffer);
});
//2. Convert from svg's base64 string
svg2img(
'data:image/svg+xml;base64,' + btoa(svgString),
function(error, buffer) {
fs.writeFileSync('foo2.png', buffer);
});
fs.writeFileSync('foo.svg', new Buffer(svgString));
//3. Convert from a local file
svg2img(__dirname + '/foo.svg', function(error, buffer) {
fs.writeFileSync('foo3.png', buffer);
});
//4. Convert from a remote file
svg2img(
'https://upload.wikimedia.org/wikipedia/commons/a/a0/Svg_example1.svg',
function(error, buffer) {
fs.writeFileSync('foo4.png', buffer);
});
//5. Convert to jpeg file
svg2img(svgString, { format: 'jpg', 'quality': 75 }, function(error, buffer) {
//default jpeg quality is 75
fs.writeFileSync('foo5.jpg', buffer);
});
Scale
You can scale the svg by giving width or height, svg2img Always maintain aspect ratio.
svg2img(__dirname + '/foo.svg', {
resvg: {
fitTo: {
mode: 'width', // or height
value: 600,
},
}
} ,function(error, buffer) {
fs.writeFileSync('foo.png', buffer);
});
More options
resvg-js supports more features, such as Loading fonts, setting background
, crop
, etc.
In svg2img, you can configure it with the resvg
option.
export type ResvgRenderOptions = {
font?: {
loadSystemFonts?: boolean
fontFiles?: string[]
fontDirs?: string[]
defaultFontFamily?: string
defaultFontSize?: number
serifFamily?: string
sansSerifFamily?: string
cursiveFamily?: string
fantasyFamily?: string
monospaceFamily?: string
}
dpi?: number
languages?: string[]
shapeRendering?:
| 0 // optimizeSpeed
| 1 // crispEdges
| 2 // geometricPrecision
textRendering?:
| 0 // optimizeSpeed
| 1 // optimizeLegibility
| 2 // geometricPrecision'
imageRendering?:
| 0 // optimizeQuality
| 1 // optimizeSpeed
fitTo?:
| { mode: 'original' }
| { mode: 'width'; value: number }
| { mode: 'height'; value: number }
| { mode: 'zoom'; value: number }
background?: string // Support CSS3 color, e.g. rgba(255, 255, 255, .8)
crop?: {
left: number
top: number
right?: number
bottom?: number
}
logLevel?: 'off' | 'error' | 'warn' | 'info' | 'debug' | 'trace'
}
Run the Test
npm i
npm test