ssssota / svg2png-wasm Goto Github PK

手元だと動くけどGitHub Actionsだと失敗するテストになってる。

ついでに、リリースフローの見直し(semantic-release?)、Jest->Vitestなど

ref. #39

現在は resvg および usvg のライセンスからMPL-2.0をこのライブラリのライセンスに適用していたが、

MPL 2.0 FAQ

によれば、MPL部分を入手する方法を明記すれば他のライセンスでもよいとしていることがわかった。
（実際、自身で書いたソースコードにMPLを適用していないので名ばかりのMPLライセンスになっている）

WASM内に入手方法を書くことは困難であるため（バンドルされた）JSコードおよびREADMEに記述する。

肝心なこのライブラリのライセンスについてはMIT/Apache 2.0/BSDあたりから検討する。

https://crates.io/crates/cairo-rs

I tried the online version with the following svgs that have text:

  <svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
     <text x="20" y="40">Example SVG text 1</text>
</svg>

<svg width="1200" height="1200" viewBox="0 0 1200 628" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="backgroundGradient" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="black"></stop><stop offset="100%" stop-color="#3a2fa6"></stop></linearGradient><rect width="100%" height="100%" fill="url(#backgroundGradient)"></rect><text text-anchor="start" font-family="Roboto" font-size="140" fill="#d239f6"><tspan x="80" y="200">Future Frontend</tspan></text><text text-anchor="start" font-family="Roboto" font-size="80" fill="#d239f6"><tspan x="80" y="340">Demo</tspan></text><text text-anchor="start" font-family="ui-sans-serif, system-ui" font-size="40" font-weight="200" fill="white"><tspan x="80" y="440">The future of frontend reimagined</tspan></text><text text-anchor="start" font-family="ui-sans-serif, system-ui" font-size="40" font-weight="200" fill="white"><tspan x="80" y="520">5.6-9.6.2023</tspan></text><text text-anchor="start" font-family="ui-sans-serif, system-ui" font-size="40" font-weight="200" fill="white"><tspan x="380" y="520">Pörssitalo, Helsinki, Finland</tspan></text></svg>

For some reason, both fail to render the text portions. Note that the gradient shows up just fine in the latter example.

I was also able to reproduce the same behavior locally with a Cloudflare worker and I can share the code if that helps.

jest-coverage-badge あたりをつかってみる

I'm using the package in a CloudFlare worker and running into issues with rendering embedded fonts.

Example SVG:

Note that the font is embedded using a data uri.

Output:

リリースされてたので、更新・追従する

For example, this file renders very slowly: https://commons.wikimedia.org/wiki/File:Anime_Girl.svg

Improvements: https://github.com/yisibl/resvg-js/blob/443d1c3de7cf2dc72c87299cb046e57621062654/Cargo.toml#L29-L34
This increases the size of the wasm file, but it improves rendering performance to some extent, and I think it's worth it.

Fundamentally, it may require upstream resvg to optimize.

You might also consider testing the performance of SVG <text>, as font handling is complex and this can be a good indication of the performance gap.

Originally posted by @yisibl in #42 (comment)

GitHub Pagesで動くサンプルを公開したい（建前）
自分がお手軽にSVG->PNGできるようにしたい（本音）

resvg now disables SVG filter by default.

• demo pageへの誘導
• サンプルコードのリファクタリング
• createSvg2png と svg2png の説明

need to add to imports...

imports.wbg.__wbindgen_rethrow = function(arg0, arg1) {
throw new Error(getStringFromWasm0(arg0, arg1));
};

• docs
  • getting started
  • api

I tried to convert a svg that contains image tag, but the images are gone in resulting png, regardless of if they are referenced by href url or base64 string.