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" // default is "a"
}
interface Options {
width: number,
height: number,
className?: string,
dataset?: { [s: string]: string },
style?: Array<string>, // [<style>...<style>, ...]
externals?: Array<External>
}
Examples
Minimum options
// ./demo/demo0.js
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.
