@snelsi/resvg-js
Advanced tools
Changelog
[2.1.0] - 2022-07-03
Add imagesToResolve()
and resolveImage()
APIs to load image URL. By @zimond in #102
xlink:href
starting with http://
or https://
.In order to support loading image URL, we forked the rust side of resvg and made some improvements.
Now please witness the magic moment:
Add innerBBox()
API. By @yisibl in #105
Calculate a maximum bounding box of all visible elements in this SVG. (Note: path bounding box are approx values).
Add getBBox()
API. By @yisibl in #108
We designed it to correspond to the SVGGraphicsElement.getBBox()
method in the browser.
This is different from the innerBBox()
API, by default it does apply transform calculations and gets the BBox with curves exactly. This works well in most use cases, the only drawback is that it does not calculate BBoxes with stroke correctly.
Add cropByBBox()
API. By @yisibl in #108
With this API, we can crop the generated bitmap based on the BBox(bounding box).
<img width="550" alt="cropByBBox Demo" src="https://user-images.githubusercontent.com/2784308/177039185-5c1a8014-9e44-4c18-aae2-8f509163da56.gif">const fs = require('fs')
const { Resvg } = require('@resvg/resvg-js')
const svg = '' // some SVG string or file.
const resvg = new Resvg(svg)
const innerBBox = resvg.innerBBox()
const bbox = resvg.getBBox()
// Crop the bitmap according to bbox,
// The argument to the `.cropByBBox()` method accepts `bbox` or `innerBBox`.
if (bbox) resvg.cropByBBox(bbox)
const pngData = resvg.render()
const pngBuffer = pngData.asPng()
console.info('SVG BBox: ', `${bbox.width} x ${bbox.height}`)
fs.writeFileSync('out.png', pngBuffer)
feat: upgrade svgtypes to 0.8.1 to support 4 digits and 8 digits hex colors. By @yisibl in #127