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.

Related projects

• https://github.com/daiiz/svg-screenshot
• https://github.com/daiiz/svg-screenshot-puppeteer
• https://scrapbox.io/daiiz/Retinaディスプレイで撮ったscreenshotをsvgに包んで配信して、imgタグで原寸大で表示する