linebender / linebender/resvg

Low image quality when downscaling

Open
#653 11 comments 1 reaction 0 assignees View on GitHub
bug
Dominant language
Rust
Stars
4.1k
Forks
348
Avg merge
1d 14h
Merged PRs (30d)
3

Description

The use case is a PNG image which is base64-encoded and embedded in the SVG in an `` tag. In the attached example, the original image is 160x160, and scaled down to 49x49 in the SVG markup.
![emoji-49px-base64](https://github.com/RazrFalcon/resvg/assets/15127801/98fb643d-ce2e-4844-9a8a-1ff05d00cc1d)

The rendered image (resvg-rendered-49px.png) quality is degraded, especially on the curves.
![resvg-rendered-49px](https://github.com/RazrFalcon/resvg/assets/15127801/379e81b0-47cf-4f3c-be88-b67ae7ae469d)

When defining the dimensions as 160x160 in the SVG markup, the rendered image (resvg-rendered-160px.png) quality is great. And when including that image on an HTML page and re-scaling in the HTML markup, ``, the image quality remains crisp.
![resvg-rendered-160px](https://github.com/RazrFalcon/resvg/assets/15127801/c7d37682-fa93-4581-afcd-5f4329e20ba5)

We also tried setting the `image-rendering` attribute for `OptimizeQuality`, but the improvement was negligible.
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/image-rendering

Is is correct that Bicubic interpolation is being used? Do you have any guidance for improving image quality, and/or are there plans for other interpolation options?

Processing this same image with various interpolation filters in `ImageSharp` (e.g. Lanczos, MitchellNetravali, etc.) does produce a high quality result.

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by reproducing the attached case: a 160x160 base64 PNG embedded in an SVG image and rendered at 49x49, then compare it with the 160x160 render scaled in HTML. Check the effect of image-rendering="OptimizeQuality" and the interpolation behavior. Done means the downscaled SVG image has visibly improved curve quality or the supported interpolation limitations are documented.

Written by the indexing model from the issue text.

Assessment

Tech stack
rust
Domain
computer-graphics
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.