yisibl / resvg-js

A high-performance SVG renderer and toolkit, powered by Rust based resvg and napi-rs.
https://resvg-js.vercel.app/
Mozilla Public License 2.0
1.47k stars 50 forks source link

Convert to JPEG XL with splines #111

Open niutech opened 2 years ago

niutech commented 2 years ago

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?

yisibl commented 2 years ago

Thanks for the suggestion, Catmull-Rom splines was very interesting. I found a related article SVG to JPEG XL

Further research revealed that the biggest obstacle to converting SVG to JXL is the blurring when zoomed in. This is because the current decoder (libjxl) does not sharpen by default, depending on the https://github.com/libjxl/libjxl/issues/1370#issuecomment-1106406131

image

So we need to wait for these infrastructures to mature before we consider them.

yisibl commented 2 years ago

Additions:

Splines there is no notion of 'fill', we can only do curves with them, not filled surfaces. But we could "emulate" filled shapes by using thick strokes.

Did I understand correctly?

niutech commented 2 years ago

Yes, this is what I am working on currently - surface fill SVG shapes using thick lines. As for sharpen lines, you can generate upsampled (e.g. 4x) JXL images having the same file size as 1x, then resize them back to 1x size using CSS attributes: width, height and image-rendering: -webkit-optimize-contrast or crisp-edges. Compare 1000px JXL example image downscaled to 250px (left) with SVG at the same dimensions (right): jxl vs svg

TPS commented 1 month ago

svg2jxl might be useful?