Taylor Hunt Reporter
	Description • 9 years ago

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.10; rv:41.0) Gecko/20100101 Firefox/41.0
Build ID: 20150708004005

Steps to reproduce:

1. Make an inline <svg>
2. Put an <image> pointing to a bitmap inside of it
3. Scale the SVG down.


Actual results:

The downscaled bitmap <image>s are resized with a quick-and-dirty algorithm, which looks bad. (SVG <image>s aren't affected.)

The effect worsens if the bitmap is scaled down in a secondary step by setting its width and height attributes to something other than its natural width & height.


Expected results:

Ideally some sort of more-sophisticated resampling should happen. image-rendering: optimizeQuality doesn't do anything, but the current scaling algorithm would be a fine candidate for optimizeSpeed.

Chrome has an improved sampling algorithm, but tends to make images in this situation look like they're covered with vaseline.

	Taylor Hunt Reporter
	Comment 1 • 9 years ago

An additional test-case from the Chromium issue tracker (they have the opposite problem, <image> is too blurry):

http://demo.ceros.com/examples/image-masking/blurry-svg.html

It's more obvious with the photographic image that Firefox may be downsampling at the wrong point in the graphics pipeline, or something.