Pixelated png <image>

[martinklepsch]

Hey there & thanks for the great lib!

I've been noticing some pixelated images when PNG images are downscaled for their <image> container.

In the screenshot below, note how the resvg-js output looks slightly more pixelated than what resvg's viewsvg app shows.

• I also experiment with imageRendering: optimizeQuality in another setup but couldn't notice an effect.
• When changing the width on the resvg-js website to 2500 the rendering gets better.

Do you have any ideas why this could be? Should I attempt to downscale images before passing them to resvg-js?

(The raw svg for the screenshot can be found in this gist.)

[yisibl]

In your SVG, the actual size of the first image (Logo) is 1200 × 630, so of course you need to set it to a larger size to display it more clearly. When your screen devicePixelRatio is greater than 1, you need to set the width of the output png to devicePixelRatio * 1200.

Many parts of the image are blank, you should crop out the blank parts to make them smaller in width and height so that the rendering will be faster as well.

Here is the actual PNG after I converted your base64 image:

[martinklepsch]

I was actually more referring to the pixelation of the image on the right. I was thinking that resvg should downscale it for the provided width but the pixelation you can see for the text in the image on the right is different in resvg-js than it is in viewsvg.

Hope this makes sense