Is there a plain way to render a SVG by wasm-pack?

[DerKarlos]

When I needed a SVG renderer, I found the crate 'resvg'. It worked fine for binary but not for WASM.
'widgetry' was recommended, but as a new-by to Rust I was just puzzled by the complexity.
Now I hope, I got this right:
'resvg' does triangulate but not render the SVG. This is done "only" by 'tiny-skia'.
While 'widgetry' uses 'lyon' and quite some "glue code".

My project (an OSM 3D renderer) already calls let svg_tree = Tree::from_data
and needs the PNG only as a byte array (to send it as a texture to the GPU by 'three-d')
Could I use widgetry as it is (and how)? An compact example would be nice.
May be I will try to extract the parts of widgetry, I need.
(add_svg_inner from abstreet/widgetry/src/svg.rs, GeomBatch and all things requested by the build %-)

'widgetry' raised to build 'abstreed' but is usefull for other to.
May the function, to render SVG with WASM could be put in an extra sub crate?
(Or added/moved to 'resvg-wasm'?)

[dabreegster]

A 3D OSM renderer in Rust sounds awesome, I'll be following your project with lots of excitement! Let me see how I can help...

Widgetry has code to transform an SVG file into a list of colored triangles. The pipeline is:

1. use usvg to parse the file into a tree
2. turn the "fill" and "stroke" directives into tessellated polygons using lyon. I originally lifted that logic from https://github.com/nical/lyon/blob/0d0ee771180fb317b986d9cf30266722e0773e01/examples/wgpu_svg/src/main.rs.

As you've found, https://github.com/a-b-street/abstreet/blob/master/widgetry/src/svg.rs does all of this. It's pure Rust all the way down, so it works fine in wasm. This includes text rendering, with some glue to load in fonts at

abstreet/widgetry/src/assets.rs

Line 58 in 2598f2a

a.text_opts.borrow_mut().fontdb = fontdb;

.

There are two possible problems with adapting this approach. First, you need a PNG to upload to the GPU? Is it possible to send in triangles and colors and have a simple shader to draw in the GPU? If you need to rasterize the triangles into an image, I'm not familiar with the Rust library that would best help you -- maybe tiny-skia or raquote?

Second, depending on the complexity of your SVGs, some things won't work -- mainly transform matrices and some linear/radial gradient coloring. I remember to get some more complex SVGs working properly, I had to use another tool to "flatten" things: 139f442

[DerKarlos]

For your fun, above I added a pic of the OSM rendering so far. It is still a private project but you may get an invite, if you like.
The SVG is used for the traffic signs (front side) Rather simple, no fonts needed (at the moment). I think, I don't need a PNG exactly, just a bitmap.

tiny-skia is already used for the binary solution. But it sub-includes a memmap2 not compiling to WASM because it uses OS functions.
The readme of raqote says: "resvg supports using raqote as a backend." But the readme of resvg says "only tiny-skia". I have to check it. Or you may show me an example?

[michaelkirk]

very cool!

[dabreegster]

If you just need a bitmap, why bother with SVG at all? Convert your traffic signal sprite to a PNG once with some other tool, then feed that in with https://crates.io/crates/image. And if you anticipate wanting to render text later, using vectors might not be the most performant or easy answer. It was useful for abstreet and our UI library, because we wanted to size UI elements around rendered text and needed to know the geometry in more detail.

[DerKarlos]

Ah no, as our SVGs are part of our project tiles to keep them small. I can't change them. They are generated on a server and I only do the front-end coding. There are really a lot of different traffic signs. At our TypeScript front-end, BabylonJS and the browser handle SVG like PNG by default. I hope @michaelkirk hinted, how I could do it alike.

[michaelkirk]

Since you're asking about wasm, am I correct in assuming you're building some kind of web app?

Would it be reasonable to instead do whatever application logic you need to build the SVG in rust, but then export the SVG via a wasm API to be rendered using the browsers native SVG rendering?

[DerKarlos]

The target is, to have one rust source and build binaries for all (Linux, Windows, macOS; Android, iOS)
AND as a Web-App. For 3D rendering, I use the crate "three-d". It's not perfect yet but Ok. It does not support URIs with "data:" but I solved this. And no SVG.
My SVG is already build as part of the 3D tiles of our project. If "raqote" works (see above) as solution, fine.

I also had the idea to let the browser render SVGs for the WASM build. But how can this be done?
I assume, the rust/WASM code needs to call JavaScript. Would JavaScript use WebGL?
I know, frameworks like ThreeJS and BabylonJS do it, I could have a look into the source and may find it, after weeks, may be. Or could you help me?
At last, that solution(s) should be integrated in "three-d" (by me).

[michaelkirk]

Now that I know a bit more about what you're trying to accomplish, I don't think my suggestion was relevant.

I assume, the rust/WASM code needs to call JavaScript. Would JavaScript use WebGL?

Widgetry does something like this - via glow.

https://github.com/a-b-street/abstreet/blob/master/widgetry/src/backend_glow_wasm.rs

[DerKarlos]

Your suggestion may become relevant

• if "raqote" doen't work
• to reduce the WASM binary size, because drawing the SVG is not needed.
• because I like the idea to do it, like other frameworks
  "glow" is interesting. And you already use it for textures. It may be an obstacle to integrate it with three-d.
  I do not expect a ready to use solution for my problem by you; may be hints to questions while doing a small example.
  As I am very bad with shaders, do I need one to let the browser render the SVG? ...

[DerKarlos]

Intermediate summary:

  ++ raqote looks really good. More "soon" ...
  +  Browser have a JS API for rendering SVG! I will try to extend resvg - once up on a time ;)
  -  Who rendes?: widgetry -> lion -> wgpu -> GPU, not CPU array as I need

Rust is great but some times ...
raqote needs an interface to resvg. And there is a crate https://docs.rs/resvg-raqote/0.10.0"
The versions don't fit. I assume, resvg-raqote needs an updagte.
In docs.rs, all sources of resvg-raqote (by some tricks) but I cant't find a Git and no name of the creator.
@dabreegster you may have a look to my https://github.com/DerKarlos/O2W-three-d-Rust-WASM/tree/main/templ/svg

[yisibl]

If you are in the wasm version of resvg, try: https://github.com/yisibl/resvg-js#webassembly

[DerKarlos]

Yes, that's a way to do it inside WASM.
Browers do it anyway, but that's hard or impossible to integrate in three-d.

[sjinno]

Hi! I'm wondering if there's any updated solution to this? I'm currently trying to render SVG using wgpu+lyon on WASM, but I haven't been able to figure out how to do it. Thank you!