yisibl / resvg-js Goto Github PK
View Code? Open in Web Editor NEWA high-performance SVG renderer and toolkit, powered by Rust based resvg and napi-rs.
Home Page: https://resvg-js.vercel.app/
License: Mozilla Public License 2.0
A high-performance SVG renderer and toolkit, powered by Rust based resvg and napi-rs.
Home Page: https://resvg-js.vercel.app/
License: Mozilla Public License 2.0
Hi, Is there any plan to support armv6?
This project would be a good replacement for converting SVG to PNG without puppeteer on the Raspberry pi zero
hi, this is a great library~
When I want to solve the text wrapping problem in svg, I try to use , but it can't work in nodejs. So are there any plans to support this?
Thanks~
I am having some problems trying to install version 1.0.1 (version 1.0.0 works correctly)
npm i @resvg/resvg-js
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @resvg/[email protected] (node_modules/@resvg/resvg-js/node_modules/@resvg/resvg-js-win32-ia32-msvc):
npm WARN notarget SKIPPING OPTIONAL DEPENDENCY: No matching version found for @resvg/[email protected].
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @resvg/[email protected] (node_modules/@resvg/resvg-js/node_modules/@resvg/resvg-js-linux-x64-gnu):
npm WARN notarget SKIPPING OPTIONAL DEPENDENCY: No matching version found for @resvg/[email protected].
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @resvg/[email protected] (node_modules/@resvg/resvg-js/node_modules/@resvg/resvg-js-win32-x64-msvc):
npm WARN notarget SKIPPING OPTIONAL DEPENDENCY: No matching version found for @resvg/[email protected].
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @resvg/[email protected] (node_modules/@resvg/resvg-js/node_modules/@resvg/resvg-js-darwin-x64):
npm WARN 404 SKIPPING OPTIONAL DEPENDENCY: Not Found - GET https://registry.npmjs.org/@resvg/resvg-js-darwin-x64/-/resvg-js-darwin-x64-1.0.1.tgz
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @resvg/[email protected] (node_modules/@resvg/resvg-js/node_modules/@resvg/resvg-js-android-arm64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @resvg/[email protected]: wanted {"os":"android","arch":"arm64"} (current: {"os":"darwin","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @resvg/[email protected] (node_modules/@resvg/resvg-js/node_modules/@resvg/resvg-js-linux-x64-musl):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @resvg/[email protected]: wanted {"os":"linux","arch":"x64"} (current: {"os":"darwin","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @resvg/[email protected] (node_modules/@resvg/resvg-js/node_modules/@resvg/resvg-js-darwin-arm64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @resvg/[email protected]: wanted {"os":"darwin","arch":"arm64"} (current: {"os":"darwin","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @resvg/[email protected] (node_modules/@resvg/resvg-js/node_modules/@resvg/resvg-js-linux-arm-gnueabihf):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @resvg/[email protected]: wanted {"os":"linux","arch":"arm"} (current: {"os":"darwin","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @resvg/[email protected] (node_modules/@resvg/resvg-js/node_modules/@resvg/resvg-js-linux-arm64-gnu):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @resvg/[email protected]: wanted {"os":"linux","arch":"arm64"} (current: {"os":"darwin","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @resvg/[email protected] (node_modules/@resvg/resvg-js/node_modules/@resvg/resvg-js-linux-arm64-musl):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @resvg/[email protected]: wanted {"os":"linux","arch":"arm64"} (current: {"os":"darwin","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @resvg/[email protected] (node_modules/@resvg/resvg-js/node_modules/@resvg/resvg-js-win32-arm64-msvc):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @resvg/[email protected]: wanted {"os":"win32","arch":"arm64"} (current: {"os":"darwin","arch":"x64"})
Hi @yisibl,
first of all, thanks for this excellent library, it is working really well. I just have the following problem:
I have an Electron app which uses resvg-js
. For MacOS it is packaged using electron-builder
. The configuration creates a universal build, which means, that the application is packaged for x86 and for arm64 (M1) and then bundled into a single .dmg
file. This is done using a GitHub Action running macos-latest
.
The problem now is, that when I try to start the App on a M1 Mac, I get the following error:
As you can see, the binary for darwin
arm64
is missing.
It also does not help to add that package to the dependencies
manually, because it is not being installed on the build system (the arch in the package.json
does not match).
Can I somehow "force" this package to be installed / included?
The final sprint will take place this week. The main thing is to solve the problems of Alpha version.
The release is expected to follow the following moment.
Thanks to @zimond, @Brooooooklyn
Hi, apologies if this is the wrong repo for this error but I am following https://geoffrich.net/posts/svelte-social-image/ and it works locally, but fails when I try to deploy to Netlify:
Full error message
10:10:26 PM: ✘ [ERROR] No loader is configured for ".node" files: node_modules/@resvg/resvg-js-linux-x64-musl/resvgjs.linux-x64-musl.node
10:10:26 PM: node_modules/@resvg/resvg-js/js-binding.js:1:2980:
10:10:26 PM: 1 │ ...Binding=require("@resvg/resvg-js-linux-x64-musl")}catch(e){loadE...
10:10:26 PM: ╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
10:10:26 PM: ✘ [ERROR] No loader is configured for ".node" files: node_modules/@resvg/resvg-js-linux-x64-gnu/resvgjs.linux-x64-gnu.node
10:10:26 PM: node_modules/@resvg/resvg-js/js-binding.js:1:3212:
10:10:26 PM: 1 │ ...eBinding=require("@resvg/resvg-js-linux-x64-gnu")}catch(e){loadE...
10:10:26 PM: ╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
I'm not sure where this message comes from but you can see the error in this branch https://github.com/sw-yx/swyxkit/tree/addOgimage when deployed to Netlify: https://app.netlify.com/sites/swyxkit/deploys/63954a072248cf0008f384ae
blocking swyxio/swyxkit#145 right now with this error message
During convertation from SVG to PNG I lost some context of my image (red and grey colors):
Source:
On the other hand everything is ok if I generate similar image
Source:
Could you help me to identify what is a root cause of that. Is this really an issue with library or there some limitations. Thanks!
Hello, thanks for this awesome library - I came across it via svg2img.
Would it be possible to support loading fonts via raw data? It's seems this might be possible using the font library dependency https://github.com/RazrFalcon/fontdb#features
The reason is that on Vercel I can't seem to use fonts because file system access is protected/complicated. I've also tried embedding the font in the svg with font-face/data-uri but this doesn't seem to be supported either.
Thanks
Hello
Would it be possible to update resvg to latest version 0.28.0?
Thanks for doing great work.
const { Resvg } = require('@resvg/resvg-js')
let svg = <svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720"> <title>template</title> <style> tspan { white-space:pre } .s0 { fill: #daf2d9 } .s1 { fill: #94d891 } .t2 { font-size: 30px;fill: #1a1a1a;font-weight: 400;font-style: italic;font-family: "DejaVuSansCondensed-Oblique", "DejaVu Sans Condensed" } .t3 { font-size: 76px;fill: #1a1a1a;font-weight: 275;font-family: "BioRhymeExpanded-ExtraLight", "BioRhyme Expanded" } </style> <path id="Background" class="s0" d="m0 0h1280v720h-1280z"/> <g id="Border-right"> <g id="dots"> <path id="Layer" class="s1" d="m1214.6 214.2c0-13.9 11.2-25 25.1-25 13.9 0 25 11.1 25 25 0 13.9-11.1 25.1-25 25.1-13.9 0-25.1-11.2-25.1-25.1zm-162.7 164.2c0-14 11.1-25.1 25-25.1 13.9 0 25.1 11.1 25.1 25.1 0 13.9-11.2 25-25.1 25-13.9 0-25-11.1-25-25zm161.3 357.4c0-13.9 11.2-25 25.1-25 13.9 0 25 11.1 25 25 0 13.9-11.1 25.1-25 25.1-13.9 0-25.1-11.2-25.1-25.1zm-73.7 232.3c0-13.9 11.1-25 25-25 14 0 25.1 11.1 25.1 25 0 13.9-11.1 25.1-25.1 25.1-13.9 0-25-11.2-25-25.1zm13.9 324.1c0-13.9 11.1-25 25.1-25 13.9 0 25 11.1 25 25 0 13.9-11.1 25.1-25 25.1-14 0-25.1-11.2-25.1-25.1z"/> <path id="Layer" class="s1" d="m1110.3 91.8c0-13.9 11.1-25 25-25 13.9 0 25.1 11.1 25.1 25 0 13.9-11.2 25-25.1 25-13.9 0-25-11.1-25-25zm93.2 338c0-13.9 11.1-25 25-25 13.9 0 25.1 11.1 25.1 25 0 13.9-11.2 25.1-25.1 25.1-13.9 0-25-11.2-25-25.1zm-173.9 662.1c0-13.9 11.1-25 25.1-25 13.9 0 25 11.1 25 25 0 13.9-11.1 25.1-25 25.1-14 0-25.1-11.2-25.1-25.1zm45.9-453.4c0-13.9 11.2-25.1 25.1-25.1 13.9 0 25 11.2 25 25.1 0 13.9-11.1 25-25 25-13.9 0-25.1-11.1-25.1-25zm137.7 489.6c0-13.9 11.2-25 25.1-25 13.9 0 25 11.1 25 25 0 13.9-11.1 25-25 25-13.9 0-25.1-11.1-25.1-25z"/> <path id="Layer" class="s1" d="m968.4 541.1l-8.3 29.2z"/> </g> </g> <g id="Border-left"> <g id="dots"> <path id="Layer" class="s1" d="m65.4 214.2c0-13.9-11.2-25-25.1-25-13.9 0-25 11.1-25 25 0 13.9 11.1 25.1 25 25.1 13.9 0 25.1-11.2 25.1-25.1zm162.7 164.2c0-14-11.1-25.1-25-25.1-13.9 0-25.1 11.1-25.1 25.1 0 13.9 11.2 25 25.1 25 13.9 0 25-11.1 25-25zm-161.3 357.4c0-13.9-11.2-25-25.1-25-13.9 0-25 11.1-25 25 0 13.9 11.1 25.1 25 25.1 13.9 0 25.1-11.2 25.1-25.1zm73.7 232.3c0-13.9-11.1-25-25-25-14 0-25.1 11.1-25.1 25 0 13.9 11.1 25.1 25.1 25.1 13.9 0 25-11.2 25-25.1zm-13.9 324.1c0-13.9-11.1-25-25.1-25-13.9 0-25 11.1-25 25 0 13.9 11.1 25.1 25 25.1 14 0 25.1-11.2 25.1-25.1z"/> <path id="Layer" class="s1" d="m169.7 91.8c0-13.9-11.1-25-25-25-13.9 0-25.1 11.1-25.1 25 0 13.9 11.2 25 25.1 25 13.9 0 25-11.1 25-25zm-93.2 338c0-13.9-11.1-25-25-25-13.9 0-25.1 11.1-25.1 25 0 13.9 11.2 25.1 25.1 25.1 13.9 0 25-11.2 25-25.1zm173.9 662.1c0-13.9-11.1-25-25.1-25-13.9 0-25 11.1-25 25 0 13.9 11.1 25.1 25 25.1 14 0 25.1-11.2 25.1-25.1zm-45.9-453.4c0-13.9-11.2-25.1-25.1-25.1-13.9 0-25 11.2-25 25.1 0 13.9 11.1 25 25 25 13.9 0 25.1-11.1 25.1-25zm-137.7 489.6c0-13.9-11.2-25-25.1-25-13.9 0-25 11.1-25 25 0 13.9 11.1 25 25 25 13.9 0 25.1-11.1 25.1-25z"/> <path id="Layer" class="s1" d="m311.6 541.1l8.3 29.2z"/> </g> </g> <text id="What a beautiful day." style="transform: matrix(1,0,0,1,640,408.64)" > <tspan x="-144.3" y="0" class="t2">What a beautiful day. </tspan> </text> <text id="Hello World!" style="transform: matrix(1,0,0,1,640,363.04)" > <tspan x="-407.4" y="0" class="t3">Hello World! </tspan> </text> </svg>
const pngTest = async function(){
console.log('运行')
const resvg = new Resvg(svg, {
font: {
loadSystemFonts: false, // It will be faster to disable loading system fonts.
},
logLevel: 'off',
});
console.log(resvg);
const pngData = resvg.render();
const buffer = pngData.asPng();
await fs.writeFile(Config.uploadUrl +'/123456.png', buffer);
}
Hi, i was trying to run the following demo, but it seems that by #102 it only resolves http(s) images.
Is there any reason why not blob ones?
Are you open to a PR allowing them?
I'm using sprites (use/symbol) to draw an SVG. Here's an example:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 560 560" class="bg-white"><use href="https://sol.charactercreator.org/sprites/whole-cloak.svg#idefault_4_of_4"></use><use href="https://sol.charactercreator.org/sprites/whole-shoulderpads.svg#ispikes_2_of_2"></use><use href="https://sol.charactercreator.org/sprites/whole-body.svg#itorso_android-00"></use><use href="https://sol.charactercreator.org/sprites/whole-body.svg#ileg_right_android-00"></use><use href="https://sol.charactercreator.org/sprites/whole-body.svg#ileg_left_android-00"></use><use href="https://sol.charactercreator.org/sprites/whole-body.svg#iforearm_right_android-00"></use><use href="https://sol.charactercreator.org/sprites/whole-body.svg#iforearm_left_android-00"></use><use href="https://sol.charactercreator.org/sprites/whole-body.svg#iarm_right_android-00"></use><use href="https://sol.charactercreator.org/sprites/whole-body.svg#iarm_left_android-00"></use><use href="https://sol.charactercreator.org/sprites/whole-body.svg#ifoot_left"></use><use href="https://sol.charactercreator.org/sprites/whole-body.svg#ifoot_right"></use><use href="https://sol.charactercreator.org/sprites/whole-body.svg#ihand_left"></use><use href="https://sol.charactercreator.org/sprites/whole-body.svg#ihand_right"></use><use href="https://sol.charactercreator.org/sprites/whole-cloak.svg#idefault_2_of_4"></use><use href="https://sol.charactercreator.org/sprites/whole-cloak.svg#idefault_3_of_4"></use><use href="https://sol.charactercreator.org/sprites/whole-shoulderpads.svg#ispikes_1_of_2"></use><use href="https://sol.charactercreator.org/sprites/whole-underwear.svg#iplain"></use><use href="https://sol.charactercreator.org/sprites/whole-tatoo.svg#iaum_chest"></use></svg>
Should this work with resvg-js? Or am I missing something else?
This way, in some scenarios, the image-size
library is no longer needed to get the width and height. From https://github.com/svg-sprite/svg-sprite/pull/554/files#r805245550
Minimum reproducible code:
new Resvg('');
Build command:
esbuild index.ts --outfile=index.js --bundle --platform=node --loader:.node=file
Full error:
/workspace/sklld-bot/dist/index.cjs:230
module2.exports.Resvg = class Resvg extends _Resvg {
^
TypeError: Class extends value undefined is not a constructor or null
at node_modules/@resvg/resvg-js/index.js (/workspace/sklld-bot/dist/index.cjs:230:49)
at __require (/workspace/sklld-bot/dist/index.cjs:9:50)
at Object.<anonymous> (/workspace/sklld-bot/dist/index.cjs:239:31)
at Module._compile (node:internal/modules/cjs/loader:1254:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
at Module.load (node:internal/modules/cjs/loader:1117:32)
at Module._load (node:internal/modules/cjs/loader:958:12)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
at node:internal/main/run_main_module:23:47
I want to set margin for font, like the textStroke property of css, but it doesn't work when I use paint-order:stroke
。This is an example on MDN
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200"> <linearGradient id="g" x1="0" y1="0" x2="0" y2="1"> <stop stop-color="#888"/> <stop stop-color="#ccc" offset="1"/> </linearGradient> <rect width="400" height="200" fill="url(#g)"/> <g fill="crimson" stroke="white" stroke-width="6" stroke-linejoin="round" text-anchor="middle" font-family="sans-serif" font-size="50px" font-weight="bold"> <text x="200" y="75">stroke over</text> <text x="200" y="150" paint-order="stroke" id="stroke-under">stroke under</text> </g> </svg>
I got two fonts with fill first and stroke after
So how can I set this in resvg ? This looks strange
I was interested in using resvg-js in-place of sharp for its advertised performance benefits, but I'm finding that it's actually much slower. In addition, resvg-js crashes for me when processing more than ~400 SVGs at once, and the produced DPI is not accurate.
Please let me know if there's anything I can improve/fix in the configuration.
https://github.com/privatenumber/sharp-vs-resvgjs
When converting 400 SVG icons from simple-icons to 2500 DPI 800px width PNGs, sharp is 3x faster than resvg-js.
resvg: { duration: '5472ms', icons: 400 }
sharp: { duration: '1569ms', icons: 400 }
sharp is faster by 3.49x
The number of icons is limited to 400 because when processing too many icons at once, resvg-js crashes the whole Node.js process:
$ pnpm benchmark
> node scripts/benchmark
thread '<unnamed>' panicked at 'the previous segment must be M/L/C', /Users/runner/.cargo/git/checkouts/resvg-4b7e4ee32ad6d954/cab0b15/usvg/src/pathdata.rs:160:17
note: run with `RUST_BACKTRACE=1` environment variable to display a backtrace
fatal runtime error: failed to initiate panic, error 5
After benchmarking, the resulting PNGs are saved to pngs/
. When comparing icons between sharp and rsvg, the DPI on sharp is 2400 (as expected), but the DPI on resvg-js is 72.
Zoom in to compare difference
resvg-js - 11.1 KB - 72 DPI | sharp - 16.6 KB - 2400 DPI |
---|---|
![]() |
![]() |
Hi, thanks for the great library :)
I see in the 2.0.0 changelog that "The current version of Wasm does not support loading fonts, so please submit an issue if you have a request."
Are there any plans to support loading fonts in the Wasm version in the near future? It would be useful for consistent SVG text rendering between the browser and nodejs.
Thanks!
yarn build
error: failed to load source for dependency `resvg`
Caused by:
Unable to update https://github.com/zimond/resvg?rev=cab0b15
Caused by:
revspec 'cab0b15' not found; class=Reference (4); code=NotFound (-3)
This looks like a really great project, thanks!
I saw wasm on the roadmap in the readme so I thought I would create an issue to show support for this feature request 🙂
I'm interested in running resvg with a browser, with Node.js, and with other edge-compute tools.
First off, thanks for the great library, it's been really useful in my current project.
I'm not sure if this a bug or feature request, but I'm unable to specify a completely transparent background which makes it harder to work with SVGs such as icons that don't always have a complete background
I want to add a default glyph for some common missing glyph, is that something that should be added in the font or can i handle it within the svg?
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1200 240" width="1200" height="240"
>
<style>
text {
font-weight: 300;
font-size: 12px;
fill: #777777;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
image {
border-radius: 50%;
}
.contributor-link {
cursor: pointer;
}
.contributors-title {
font-weight: 500;
font-size: 20px;
}
</style>
<text class="contributors-title" x="600" y="40" text-anchor="middle">Contributors</text>
<a class="contributor-link" xlink:href="https://github.com/Jinjiang" target="_blank" id="Jinjiang">
<image x="55" y="78" width="50" height="50" xlink:href="https://avatars.githubusercontent.com/u/206848?v=4" clip-path="inset(0% round 100%)" />
<text x="80" y="146" text-anchor="middle" class="contributor-name" fill="currentColor">Jinjiang</text>
</a>
<a class="contributor-link" xlink:href="https://github.com/ShenQingchuan" target="_blank" id="ShenQingchuan">
<image x="135" y="78" width="50" height="50" xlink:href="https://avatars.githubusercontent.com/u/46062972?v=4" clip-path="inset(0% round 100%)" />
<text x="160" y="146" text-anchor="middle" class="contributor-name" fill="currentColor">ShenQingchuan</text>
</a>
<a class="contributor-link" xlink:href="https://github.com/jCodeLife" target="_blank" id="jCodeLife">
<image x="215" y="78" width="50" height="50" xlink:href="https://avatars.githubusercontent.com/u/50767049?v=4" clip-path="inset(0% round 100%)" />
<text x="240" y="146" text-anchor="middle" class="contributor-name" fill="currentColor">jCodeLife</text>
</a>
<a class="contributor-link" xlink:href="https://github.com/pakchoily" target="_blank" id="pakchoily">
<image x="295" y="78" width="50" height="50" xlink:href="https://avatars.githubusercontent.com/u/59410698?v=4" clip-path="inset(0% round 100%)" />
<text x="320" y="146" text-anchor="middle" class="contributor-name" fill="currentColor">pakchoily</text>
</a>
<a class="contributor-link" xlink:href="https://github.com/wxsms" target="_blank" id="wxsms">
<image x="375" y="78" width="50" height="50" xlink:href="https://avatars.githubusercontent.com/u/5960988?v=4" clip-path="inset(0% round 100%)" />
<text x="400" y="146" text-anchor="middle" class="contributor-name" fill="currentColor">wxsms</text>
</a>
<a class="contributor-link" xlink:href="https://github.com/Yorksh1re" target="_blank" id="Yorksh1re">
<image x="455" y="78" width="50" height="50" xlink:href="https://avatars.githubusercontent.com/u/70258597?v=4" clip-path="inset(0% round 100%)" />
<text x="480" y="146" text-anchor="middle" class="contributor-name" fill="currentColor">Yorksh1re</text>
</a>
<a class="contributor-link" xlink:href="https://github.com/KiritaniAyaka" target="_blank" id="KiritaniAyaka">
<image x="535" y="78" width="50" height="50" xlink:href="https://avatars.githubusercontent.com/u/26200808?v=4" clip-path="inset(0% round 100%)" />
<text x="560" y="146" text-anchor="middle" class="contributor-name" fill="currentColor">KiritaniAyaka</text>
</a>
<a class="contributor-link" xlink:href="https://github.com/Matrix53" target="_blank" id="Matrix53">
<image x="615" y="78" width="50" height="50" xlink:href="https://avatars.githubusercontent.com/u/55696968?v=4" clip-path="inset(0% round 100%)" />
<text x="640" y="146" text-anchor="middle" class="contributor-name" fill="currentColor">Matrix53</text>
</a>
<a class="contributor-link" xlink:href="https://github.com/KimYangOfCat" target="_blank" id="KimYangOfCat">
<image x="695" y="78" width="50" height="50" xlink:href="https://avatars.githubusercontent.com/u/32960305?v=4" clip-path="inset(0% round 100%)" />
<text x="720" y="146" text-anchor="middle" class="contributor-name" fill="currentColor">KimYangOfCat</text>
</a>
<a class="contributor-link" xlink:href="https://github.com/earthaYan" target="_blank" id="earthaYan">
<image x="775" y="78" width="50" height="50" xlink:href="https://avatars.githubusercontent.com/u/25888900?v=4" clip-path="inset(0% round 100%)" />
<text x="800" y="146" text-anchor="middle" class="contributor-name" fill="currentColor">earthaYan</text>
</a>
<a class="contributor-link" xlink:href="https://github.com/SkyeYoung" target="_blank" id="SkyeYoung">
<image x="855" y="78" width="50" height="50" xlink:href="https://avatars.githubusercontent.com/u/48400568?v=4" clip-path="inset(0% round 100%)" />
<text x="880" y="146" text-anchor="middle" class="contributor-name" fill="currentColor">SkyeYoung</text>
</a>
<a class="contributor-link" xlink:href="https://github.com/byog" target="_blank" id="byog">
<image x="935" y="78" width="50" height="50" xlink:href="https://avatars.githubusercontent.com/u/7764115?v=4" clip-path="inset(0% round 100%)" />
<text x="960" y="146" text-anchor="middle" class="contributor-name" fill="currentColor">byog</text>
</a>
<a class="contributor-link" xlink:href="https://github.com/wangyan666" target="_blank" id="wangyan666">
<image x="1015" y="78" width="50" height="50" xlink:href="https://avatars.githubusercontent.com/u/90406579?v=4" clip-path="inset(0% round 100%)" />
<text x="1040" y="146" text-anchor="middle" class="contributor-name" fill="currentColor">wangyan666</text>
</a>
<a class="contributor-link" xlink:href="https://github.com/xfq" target="_blank" id="xfq">
<image x="1095" y="78" width="50" height="50" xlink:href="https://avatars.githubusercontent.com/u/2863444?v=4" clip-path="inset(0% round 100%)" />
<text x="1120" y="146" text-anchor="middle" class="contributor-name" fill="currentColor">xfq</text>
</a>
</svg>
clip-path
doesn't make the avatar become circle
i am assuming I am doing something wrong with fonts, in any case here is a link to the svg I tried to convert, this is my configuration
const options = {
background: 'rgba(0, 0, 0, 0.0)',
font: {
fontFiles: [
'https://ubexuegkqzaitvqqwbeq.supabase.co/storage/v1/object/public/fonts/Chadva.ttf',
...this.fontUrls
], // Load custom fonts.
loadSystemFonts: false, // It will be faster to disable loading system fonts.
defaultFontFamily: 'Pirate Scroll'
}
};
const resvg = new Resvg(src, options).render().asPng();
I am getting an (almost) perfect image but without any of the text, this.fontUrls
is a list of remote fonts, everything is either ttf or otf
the svg is generated by a function that generates a string, so I did run into some issues before where the svg was simply corrupt but this one specifically seems like it's not and it works in chrome and with resvg
Hi,
I couldn't find any info on whether this is compatible with the Memory Cage of Electron 21+. Is it?
I just don't want to risk that it works on my machine and users of my application are doing something differently and it crashes for them.
There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.
Error type: Cannot find preset's package (schedule: monthly)
This is my original SVG:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-0.125 -0.125 24.25 24.25" stroke-width="1.75" height="400" width="400"><defs></defs><title>desktop-monitor-approve</title><path d="M23.25,6.75a6,6,0,1,1-6-6" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round"></path><path d="M23.25,2.25,17.78,7.719a.749.749,0,0,1-1.06,0L15,6" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round"></path><polygon points="15.75 23.25 8.25 23.25 9 20.25 15 20.25 15.75 23.25" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round"></polygon><line x1="6" y1="23.25" x2="18" y2="23.25" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round"></line><line x1="0.75" y1="17.25" x2="23.25" y2="17.25" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round"></line><path d="M23.25,14.25v3a3,3,0,0,1-3,3H3.75a3,3,0,0,1-3-3V6.75a3,3,0,0,1,3-3h4.5" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round"></path></svg>
After render SVG as PNG the library is cutting one of the corners
You can check the base64 version of the image here
image.txt
I tested changing render values but nothing works.
I updated to the new version 2.4, but the fonts are no longer rendered. It works in version 2.3.
First reported:
dicebear/dicebear#281
The following fill just results in a black background
<rect x={0} y={0} width={1430} height={1147} fill="rgba(248.62500607967377, 215.47500729560852, 215.47500729560852, 1)" />
I can round the numbers to fix the issue but seems like a bug as non-round numbers work fine in css.
Example with error vercel satori playgound
Example with error vercel satori playgound
在 PR #50 ,我们引入了 zig 来交叉编译到 *-linux-gnu
平台,用来解决 glibc 版本的问题。
但是由于 zig 的一些 bug:
所以,与 @Brooooooklyn 讨论后,决定迁移回 Docker 的构建方案,其原理是把 centos 7 上的 linker 迁移到 Ubuntu 上来构建。
The font handling code contains some logs like
Font 'xxx/xxx.ttf':0 found in 0.001ms.
Is it possible to disable them?
Hi,
I'm trying to use resvg-js in a Electron project created with electron-react-boilerplate and I get this error during the build process:
Probably similar to this one: #198
I tried adding an external to the webpack config without success:
externals: {
'@resvg/resvg-js': {
commonjs: '@resvg/resvg-js',
},
},
I also tried with node-loader
...but nothing.
lovell/sharp#2350 (comment)
Any clue?
I'm trying to use resvg-js in a Remix project with a Node runtime but I don't seem to be able to get around this error:
No loader is configured for ".node" files: node_modules/@resvg/resvg-js-darwin-arm64/resvgjs.darwin-arm64.node
Any tips to get past this would be greatly appreciated. I'm running macOS Ventura with an M1 CPU.
Thanks!
the full trace is this
thread '<unnamed>' panicked at 'called `Result::unwrap()` on an `Err` value: ParsingFailed(ParserError(InvalidElement(InvalidName, TextPos { row: 1, col: 119 })))', /Users/runner/.cargo/git/checkouts/resvg-4b7e4ee32ad6d954/7c98ad6/src/image.rs:24:102
I am generating the svg using satori, this is the generated svg file I am trying to convert
you can see the text on top it says text this is the line that causes issues, although I don't really understand why, maybe I need to load the font? but it should be converted to paths from satori?
When I generate an image without text it works perfectly so I am pretty sure this is it but I don't know why it happens and I don't understand rust so I can't check the trace for more clues
Hello. Using v2.4 (and 2.4.1) I'm getting blank pngs. Everything was working quite well until I did some updating. I traced it to the resvg-js package and found that if I reverted back to 2.3 everything worked nicely once again. My code is pretty much boilerplate:
let svg = fs.readFileSync(fname+".svg");
const opts = {
fitTo: {
mode: 'width',
value: 720,
},
font: {
fontDirs: [fontFolder],
loadSystemFonts: false
}
}
const resvg = new Resvg(svg, opts);
const pngData = resvg.render();
const pngBuffer = pngData.asPng();
fs.writeFileSync(fname+".png", pngBuffer);
I'm seeing this on an M1 Macbbook as well as Linux (amd64). Haven't tried Windows.
I'm attaching a sample of the svg frames and the font which gets copied to "fontFolder". At first I thought it was a missing font issue but as you can see not even the blue background is rendered. Thanks!
version2.4issue.zip
JPEG XL is a successor to JPG and PNG formats and it allows to store vector paths using centripetal Catmull-Rom splines, which are much more compact than raw pixel data and can be upscaled to any resolution preserving sharpness. You can generate such JXL files programmatically by converting SVG paths to splines, see the JXL-Art example.
Could you implement conversion from SVG to JPEG XL using splines?
Hi. I'm using with Node.js and I need to loop through many svg frames and convert them to a png sequence. I'm seeing memory usage continually increase and stay very high even after the job is complete. The heap is not increasing, only the rss. I found that Node users experiencing similar issues usually trace it back to a leak in native code. I've reduced the script down to the simplest possible code where all I do is create a new Resvg and call render().asPng() on it. The demo script includes an http server to run the test, but the result is the same if you call it directly. The service set values from the console match my activity monitor for the node process and show a memory usage close to 3G at the end of the loop. This was also confirmed when running on the server where we have limited memory, about 1G. This will reliably trigger an out of memory termination.
leak-test.zip
Hi team, first of all, thanks for making this awesome library, we've been using it without any issues so far, but today we noticed an issue that we're not being able to overcome, if we have a SVG that has some HEX color with transparency, like #FFFFFF80 for example(for 50% transparency) - it just don't work and generate an empty image. We tried with the "sharp" library and it worked well, but we don't want to use sharp.
To replicate it is quite straightforward, just get some svg with hex color containing transparency like:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-0.625 -0.625 25.25 25.25" stroke-width="2.75" height="24" width="24"><path d="M4.117,6.97V2.25a1.5,1.5,0,0,1,1.5-1.5h6" fill="none" stroke="#f6090980" stroke-linecap="round" stroke-linejoin="round"></path><path d="M13.117,17v4.75a1.5,1.5,0,0,1-1.5,1.5h-6a1.5,1.5,0,0,1-1.5-1.5V17.03" fill="none" stroke="#f6090980" stroke-linecap="round" stroke-linejoin="round"></path><path d="M19.117.75,13.206,7.632a.375.375,0,0,0,.286.618h2.625v6l5.91-6.882a.375.375,0,0,0-.285-.618H19.117Z" fill="none" stroke="#f6090980" stroke-linecap="round" stroke-linejoin="round"></path><path d="M10.867,5.663A6.742,6.742,0,1,0,13.615,16.5" fill="none" stroke="#f6090980" stroke-linecap="round" stroke-linejoin="round"></path></svg>
and paste it in the demo page: https://resvg-js.vercel.app/
Or try to convert it using:
const pngImageBuffer = new Resvg(svg).render().asPng()
In both cases, you'll see the issue, as it will generate a file that has nothing inside. If I change the SVG removing the transparency from the HEX values it works just fine.
Am I doing something wrong? Or this is really a bug?
Thanks!
Hi team, I noticed if the svg has a style property for the background color the generated png ignores it.
How to replicate:
Copy the SVG below into https://resvg-js.vercel.app/ and you'll see the red background color is being ignored in the generated PNG:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5px" style="background-color: red"><g transform="matrix(0.9,0,0,0.9,1.1999999999999993,1.1999999999999993)"><defs></defs><title>desktop-computer-1</title><rect x="0.75" y="4.5" width="15" height="12" rx="1.5" ry="1.5" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round"></rect><path d="M18.75,7.5h1.5L21.75,6a1.5,1.5,0,0,1,1.5,1.5V18a1.5,1.5,0,0,1-1.5,1.5L20.25,18h-1.5" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round"></path><line x1="8.25" y1="16.5" x2="8.25" y2="19.5" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round"></line><line x1="5.25" y1="19.5" x2="11.25" y2="19.5" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round"></line><line x1="20.25" y1="10.5" x2="18.75" y2="10.5" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round"></line><line x1="20.25" y1="13.5" x2="18.75" y2="13.5" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round"></line></g></svg>
Thanks!
resvg-js
performance in concurrency capabilities does not meet expectations. It looks like a linear growth. Some places are not well ?
I am comparing the following code with sharp lib
If there are any mistakes in writing, welcome point out ~
How To Test: time tsx test.cts
Test Code:
// test.cts
/* eslint-disable no-console */
import { renderAsync } from '@resvg/resvg-js'
import sharp from 'sharp'
const svg = '<svg width="1200" height="628" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 628" fill="#000"><path d="M37.59.25l36.95 64H.64l36.95-64z"></path></svg>'
export async function genPNG(svg: string) {
const render = await renderAsync(svg, {
fitTo: {
mode: 'width',
value: 1200,
},
})
return render.asPng()
// return await sharp(Buffer.from(svg))
// .resize(1200, 630)
// .png()
// .toBuffer()
}
(async function () {
const mock = new Array(1000).fill(null)
console.log('`@resvg/resvg-js` Current Test Concurrent Length: ', mock.length)
Promise.all(mock.map(_ => genPNG(svg)))
}()).catch((err) => {
console.error(err)
process.exit(1)
})
svg-sprite/svg-sprite#606
https://github.com/svg-sprite/svg-sprite/runs/5538012701?check_suite_focus=true
Segmentation fault (core dumped)
npm ERR! code ELIFECYCLE
npm ERR! errno 139
npm ERR! [email protected] mocha: `mocha "test/**/*.test.js"`
npm ERR! Exit status 139
npm ERR!
npm ERR! Failed at the [email protected] mocha script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
Hi i am running into this issue, might be related to the fonts I am using but it renders correctly when using resvg cli from terminal, here is how the text should render
and here is how it renders
here is the original svg
and this is the command for resvg cli ./resvg --use-fonts-dir ./fonts in.svg out.png
I don't know if it's related to the js port but it probably is since it doesn't happen in resvg, in any case I would appreciate some guidance on how to debug it
The images I pasted are partial screenshots so any minor imperfections are because of that
The Playground link in the docs doesn't work
png有点大,能否支持svg转jpg?
<svg id="svg-root" viewBox="0 0 480 360" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="test-body-content" font-family="SVGFreeSansASCII,sans-serif" font-size="18">
<defs>
<marker id="testMarker">
<rect width="96" height="96" fill="blue" />
</marker>
</defs>
<path d="m 0 0 L 0 0" stroke-width="25" marker-end="url(#testMarker)" />
<line x1="0" x2="0" y1="100" y2="100" stroke-width="25" marker-end="url(#testMarker)" />
</g>
</svg>
getBBox
height: 2500
width: 2400
Expect to be consistent with innerBBox
height: 175
width: 75
This relies on the upstream resvg to resolve.
你好,我的需求是开发一个nodejs图片生成服务,里面使用到了resvg-js将svg转成图片,但是每次处理请求将svg转图片时,resvg-js都需要重新加载一次系统字体,导致接口耗时较长,我想要在启动服务时只加载一次系统字体,后续在接口处理过程中不用再重新加载,请问是否能提供这样的功能呢
This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.
These updates are awaiting their schedule. Click on a checkbox to get an update now.
@typescript-eslint/eslint-plugin
, @typescript-eslint/parser
)These updates have all been created already. Click a checkbox below to force a retry/rebase of any.
These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.
Cargo.toml
env_logger 0.11.0
log 0.4
serde 1
serde_json 1
svgtypes 0.15.0
thiserror 1.0.37
pathfinder_geometry 0.5.1
pathfinder_content 0.5.0
pathfinder_simd =0.5.2
futures 0.3.21
woff2 0.3.0
napi-build 2
mimalloc 0.1
mimalloc 0.1
js-sys 0.3.64
.github/workflows/CI.yaml
actions/checkout v4
actions/setup-node v4
actions/cache v4
goto-bus-stop/setup-zig v2
actions/setup-node v4
addnab/docker-run-action v3
actions/upload-artifact v4
actions/checkout v4
actions/setup-node v4
actions-rs/toolchain v1
Swatinem/rust-cache v2
jetli/wasm-pack-action v0.4.0
actions/upload-artifact v4
actions/checkout v4
actions/setup-node v4
actions/download-artifact v4
actions/checkout v4
actions/setup-node v4
actions/download-artifact v4
actions/checkout v4
actions/setup-node v4
actions/download-artifact v4
actions/checkout v4
actions/download-artifact v4
docker/setup-qemu-action v3
addnab/docker-run-action v3
actions/checkout v4
actions/download-artifact v4
docker/setup-qemu-action v3
addnab/docker-run-action v3
actions/checkout v4
actions/download-artifact v4
docker/setup-qemu-action v3
addnab/docker-run-action v3
actions/checkout v4
actions/setup-node v4
actions/download-artifact v4
.github/workflows/lint.yaml
actions/checkout v4
actions/setup-node v3
actions-rs/toolchain v1
actions/cache v4
npm/android-arm-eabi/package.json
node >= 10
npm/android-arm64/package.json
node >= 10
npm/darwin-arm64/package.json
node >= 10
npm/darwin-x64/package.json
node >= 10
npm/linux-arm-gnueabihf/package.json
node >= 10
npm/linux-arm64-gnu/package.json
node >= 10
npm/linux-arm64-musl/package.json
node >= 10
npm/linux-x64-gnu/package.json
node >= 10
npm/linux-x64-musl/package.json
node >= 10
npm/win32-arm64-msvc/package.json
node >= 10
npm/win32-ia32-msvc/package.json
node >= 10
npm/win32-x64-msvc/package.json
node >= 10
package.json
@napi-rs/cli ^2.18.0
@swc-node/register ^1.9.0
@swc/core ^1.4.6
@types/node ^20.6.5
@typescript-eslint/eslint-plugin ^6.7.2
@typescript-eslint/parser ^6.7.2
ava ^5.3.1
copyfiles ^2.4.1
dts-bundle-generator ^9.0.0
esbuild ^0.21.0
eslint ^8.57.0
eslint-config-prettier ^8.5.0
eslint-plugin-import ^2.26.0
eslint-plugin-prettier ^4.2.1
eslint-plugin-sonarjs ^0.25.0
husky ^8.0.0
jimp-compact ^0.16.1-2
lint-staged ^15.0.0
node-fetch 2.x
npm-run-all2 ^6.1.2
prettier ^2.7.1
typescript ^5.4.2
node >= 10
yarn 3.8.2
wasm/package.json
node >= 10
Thank you! This is a great project.
But after a quick evaluation, it seems that resvg-js does not support <image>
in <svg>
. Both external and embedded image does not work. This is a know issue or a bug, or I use it wrong?
Example:
<svg width="200" height="200"
xmlns="http://www.w3.org/2000/svg">
<image
href=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
height="200" width="200"/>
</svg>
Error: Already initialized. The initWasm()
function can be used only once.
at initWasm (file:///Users/shivammeena/WebstormProjects/sveltekit-og/examples/node-build/node_modules/.pnpm/@resvg[email protected]/node_modules/@resvg/resvg-wasm/index.mjs:498:11)
at initReSvg (file:///Users/shivammeena/WebstormProjects/sveltekit-og/examples/node-build/build/server/chunks/index2-d29d26d8.js:27183:9)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async ImageResponse (file:///Users/shivammeena/WebstormProjects/sveltekit-og/examples/node-build/build/server/chunks/index2-d29d26d8.js:27208:5)
at async render_endpoint (file:///Users/shivammeena/WebstormProjects/sveltekit-og/examples/node-build/build/server/index.js:446:20)
at async resolve (file:///Users/shivammeena/WebstormProjects/sveltekit-og/examples/node-build/build/server/index.js:3597:22)
at async respond (file:///Users/shivammeena/WebstormProjects/sveltekit-og/examples/node-build/build/server/index.js:3490:22)
at async Array.ssr (file:///Users/shivammeena/WebstormProjects/sveltekit-og/examples/node-build/build/handler.js:1207:3)
This issue comes when we initialize wasm file and sometimes initWasm function is called again, if we can use initialized from wasm binding file will help more.
Hi, I have multiple PNGs coming from URLs using href inside image tag. None of those images appear in final PNG
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.