img-svgize
Create a svg-screenshot-style svg image from dataURI image.
By including accurate xmlns
, viewBox
, etc., svg images can be show with <img>
elements. You can also embed external links in svg. When svg displayed with <object>
or <iframe>
elements, embedded anchors are clickable.
Installation
$ npm install img-svgize
Usage
Create a svg element's outerText, i.e. <svg>...</svg>
.
const svg = createSvg(dataURI, options)
Options
interface External {
url: string,
x: number,
y: number,
width: number,
height: number,
text?: string,
className?: string,
type?: "a" | "img"
}
interface Options {
width: number,
height: number,
className?: string,
dataset?: { [s: string]: string },
style?: Array<string>,
externals?: Array<External>
}
Examples
Minimum options
const image = new Buffer(fs.readFileSync('./demo/demo0.png')).toString('base64')
const svg = createSvg(`data:image/png;base64,${image}`, {width: 44, height: 44})
SVG Screenshot
Generate a SVG Screenshot image.
$ node ./demo/demo1.js > res/demo1.svg
Open in the new browser tab, you can click anchor links in the svg image.
Related projects