linebender / linebender/resvg

Low image quality when downscaling

Aperta
#653 11 commenti 1 reazione 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

bug
Lingua principale
Rust
Stelle
4.1k
Fork
348
Merge medio
1g 14h
PR unite (30g)
3

Descrizione

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.

Guida per i contributori

Nessuna guida per i contributori indicizzata per questo repository

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Direzione di ricerca

Inizia riproducendo il caso allegato: un PNG base64 160x160 incorporato in un’immagine SVG e renderizzato a 49x49, quindi confrontalo con il rendering 160x160 ridimensionato in HTML. Verifica l’effetto di image-rendering="OptimizeQuality" e il comportamento dell’interpolazione. Il lavoro è completo quando l’immagine SVG ridimensionata presenta una qualità delle curve visibilmente migliore oppure vengono documentati i limiti dell’interpolazione supportata.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
rust
Ambito
computer-graphics
Tipo di issue
Bug
Difficoltà
4/5
Tempo stimato
3-5 giorni
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
35/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.