1015575 - SVG fuzzy/pixelated if SVG was exported with a filter and used as a css background-image

Status: RESOLVED DUPLICATE of bug 1224207

(Core :: SVG, defect)

Description

[Daniel Mayers]

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.114 Safari/537.36

Steps to reproduce:

1. I created a normal vector shape with an SVG shadow filter with Illustrator CS6.

2. Exported it as a SVG 1.1

3. Created a simple div

4. Gave that div a width of 100% and a bottom padding of 10%. Added svg as a background with no-repeat.  The background-size is set to 100% or cover.

5. Preview in Firefox 29


Actual results:

The SVG background image scaled up and fits on various screen sizes as expected but the image looks like a horribly scaled bitmap image. It is also extremely blurry. 

This does not happen when exporting the SVG without a filter or when I use the SVG as an IMG element.


Expected results:

The background-image should be crisp and clean when scaled. It should be treated as a actual vector grafic. It works perfectly in chrome or when used as an IMG element. 

This feature is really important for fluid designs.

Comment 1

[Maria Grazia Alastra [:mga]]

Reproduced on Windows 7, 64 bits, with Firefox 30 Beta 7 (User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:30.0) Gecko/20100101 Firefox/30.0) following the steps to reproduce (except for using Inkscape instead of Adobe Illustrator).

As the reporter said, it happens only with svg images that have filters; also, it's not reproducible on Google Chrome.

Comment 2

[Maria Grazia Alastra [:mga]]

Attachment: svg_test.rar

Add testcase. To see the difference between the rendering of svg images with filters and without filters, change the url of the background image from "red_circle_shadow.svg" to "red_circle.svg".

Comment 3

[Jonathan Watt [:jwatt]]

Is this a regression from bug 764299?

Comment 4

[[:Aleksej]]

Attachment: testcase

c.htm is without filters
cs.htm is with filters

Comment 5

[[:Aleksej]]

both are fuzzy: 2012-06-24-03-05-37-mozilla-central-firefox-16.0a1.en-US.linux-x86_64
both: 2013-01-17-03-09-33-mozilla-central-firefox-21.0a1.en-US.linux-x86_64
both: 2013-05-26-03-10-46-mozilla-central-firefox-24.0a1.en-US.linux-x86_64
-g 2013-06-23-03-10-22-mozilla-central-firefox-24.0a1.en-US.linux-x86_64
-g 2013-07-09-03-02-04-mozilla-central-firefox-25.0a1.en-US.linux-x86_64
>-g 2013-07-17-03-02-07-mozilla-central-firefox-25.0a1.en-US.linux-x86_64 0888e29c83a3
>-b 2013-07-18-03-02-01-mozilla-central-firefox-25.0a1.en-US.linux-x86_64 f26e4c26ce4a
-b 2013-07-19-03-02-04-mozilla-central-firefox-25.0a1.en-US.linux-x86_64
-b 2013-07-21-03-02-03-mozilla-central-firefox-25.0a1.en-US.linux-x86_64
-b 2013-07-25-17-15-58-mozilla-central-firefox-25.0a1.en-US.linux-x86_64
-b 2013-10-02-03-02-01-mozilla-central-firefox-27.0a1.en-US.linux-x86_64
-b 2014-01-28-03-17-16-mozilla-central-firefox-29.0a1.en-US.linux-x86_64

https://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=0888e29c83a3&tochange=f26e4c26ce4a

There is bug 885939.

Comment 6

[Daniel Mayers]

Hope mozilla is working on it

Comment 7

[[:Aleksej]]

Not really (at least not according to this bug), except for QA.

Comment 9

[howie [:howie]]

Hi Daniel, may you help on this bug? This affects Firefox OS also, that would be great if this get fixed. Thank you!

Comment 10

[Robert Longson [:longsonr]]

Attachment: red_circle.svg

Comment 11

[Robert Longson [:longsonr]]

Attachment: red_circle_shadow.svg

Comment 12

[Robert Longson [:longsonr]]

Attachment: c.html (semi-reference case; using red_circle.svg)

Comment 13

[Robert Longson [:longsonr]]

Attachment: cs.html (testcase; using red_circle_shadow.svg)

Comment 14

[Daniel Holbert [:dholbert]]

So, a bit of diagnosis:
 - Bug 885939 (which regressed this, per comment 5) changed the way we draw scaled-up SVG images. Previously, we'd synthesize a large viewport for the SVG image to be rendered into, and let SVG draw itself, scaled-using-[maybe-synthesized]-viewBox, into that viewport.  After that bug, we don't bother with the viewport adjustment; instead, we call Scale() on the gfxContext.
 - This works because drawing is done via that gfxContext.
 - EXCEPT, drawing of filters is done using intermediate DrawTargets that are separate from that gfxContext. And those intermediate DrawTargets' sizing is based on "user space" from the SVG image's perspective (which doesn't know about the gfxContext->Scale() scaling-factor).

Something like that, at least.

In particular, we draw the circle (for filtering) in nsFilterInstance::BuildSourceImage(), which relies on mSourceGraphic.mNeededBounds to establish the size of the intermediate drawTarget that we'll create.  And mSourceGraphic.mNeededBounds doesn't take the gfxContext's scaling factor into account.

Comment 15

[Daniel Holbert [:dholbert]]

Attachment: testcase 2 (standalone)