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.

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?

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.

Reproduction

https://github.com/privatenumber/sharp-vs-resvgjs

Comparison evaluation

sharp is much faster

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

resvg-js crashes on too many icons

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

rsvg-js doesn't yield expected DPI

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, 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 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

<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>

Render result on the Vercel site

clip-path doesn't make the avatar become circle

The type definition was not updated. This PR tries to fix it.

I tried to infer the type from the rust types, but I had some doubts. Especially with the fitTo prop.

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 https://github.com/sw-yx/swyxkit/pull/145 right now with this error message

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)
})

Test Screenshot:

The current version of WASM does not yet implement loading fonts to render text, so this PR will disable text features in WASM, thus reducing WASM file size.

• before: ≈ 1.8MB
• after: ≈ 1.3MB

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>

Bumps json5 from 1.0.1 to 1.0.2.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

This PR contains the following updates:

| Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | dts-bundle-generator | ^6.12.0 -> ^7.0.0 | | | | |

Release Notes

Configuration

📅 Schedule: Branch creation - "after 10pm on tuesday" in timezone Asia/Shanghai, Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

• [ ] If you want to rebase/retry this PR, check this box

This PR has been generated by Mend Renovate. View repository job log here.

This PR contains the following updates:

| Package | Type | Update | Change | |---|---|---|---| | resvg | dependencies | minor | 0.25.0 -> 0.28.0 |

Release Notes

Configuration

📅 Schedule: Branch creation - "after 10pm on tuesday" in timezone Asia/Shanghai, Automerge - At any time (no schedule defined).

🚦 Automerge: Enabled.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

• [ ] If you want to rebase/retry this PR, check this box

This PR has been generated by Mend Renovate. View repository job log here.

This PR contains the following updates:

| Package | Type | Update | Change | |---|---|---|---| | fontdb | dependencies | minor | =0.9.3 -> =0.11.1 |

Release Notes

Configuration

📅 Schedule: Branch creation - "after 10pm on tuesday" in timezone Asia/Shanghai, Automerge - At any time (no schedule defined).

🚦 Automerge: Enabled.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

• [ ] If you want to rebase/retry this PR, check this box

This PR has been generated by Mend Renovate. View repository job log here.

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.