Bug 126398

Summary: <img src=foo.svg> where foo.svg is an SVG file that contains text looks blurry
Product: WebKit Reporter: Mathias Bynens <mathias>
Component: SVGAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal CC: ap, bfulgham, dino, krit, mathias, sabouhallawa, thaddee.tyl, webkit-bug-importer, zimmermann
Priority: P2 Keywords: InRadar
Version: 528+ (Nightly build)   
Hardware: Unspecified   
OS: Unspecified   
URL: https://rawgithub.com/espadrine/gh-badges/ccd6f1c7abc996e529366ca6b870c3a804271599/sheet.html
Bug Depends on: 93471    
Bug Blocks: 68469    

Description Mathias Bynens 2014-01-02 13:03:10 PST
1. Open http://rawgithub.com/espadrine/gh-badges/ccd6f1c7abc996e529366ca6b870c3a804271599/img/dependencies-none.svg. You should see something like this: http://i.imgur.com/C1l3cX5.png This is perfect.
2. Now, open a page that includes this SVG file as an image, through `<img src=…>`, such as <https://rawgithub.com/espadrine/gh-badges/ccd6f1c7abc996e529366ca6b870c3a804271599/sheet.html>.
3. On that page, the SVG image has some rendering problems: the text is really blurry. Screenshot: http://i.imgur.com/xL5vxSK.png
Comment 1 Mathias Bynens 2014-01-02 13:08:06 PST
Relevant Chromium bug tickets:
https://code.google.com/p/chromium/issues/detail?id=331385
https://code.google.com/p/chromium/issues/detail?id=331387

It has been suggested there that this might be related to zooming. However, I still see the blurry effect even without zooming in or out (i.e. 100% zoom) on a retina display.
Comment 2 Dirk Schulze 2014-01-02 13:54:39 PST
I think it is a resolution problem in combination with retina displays.

You use SVG Filters to change the color of the text. Do you see the same problem without using filters on the text?
Comment 3 Mathias Bynens 2014-01-02 23:09:18 PST
(In reply to comment #2)
> I think it is a resolution problem in combination with retina displays.

Sounds about right. This is what a Chromium engineer said (https://code.google.com/p/chromium/issues/detail?id=331387#c5):

> My guess is that the retina is rendering the SVG at non-retina res, and zooming it up 2x. So it's still a "zoom", just implicit (in the same way that a non-retina PNG is resampled 2x by the browser).

> You use SVG Filters to change the color of the text. Do you see the same problem without using filters on the text?

Removing the SVG filter applied to the text indeed removes the (unintended) blur.

FWIW, Firefox seemed to have the same issue, but it’s fixed now. https://bugzilla.mozilla.org/show_bug.cgi?id=600207
Comment 4 Dirk Schulze 2014-01-02 23:16:16 PST
(In reply to comment #3)
> (In reply to comment #2)
> > I think it is a resolution problem in combination with retina displays.
> 
> Sounds about right. This is what a Chromium engineer said (https://code.google.com/p/chromium/issues/detail?id=331387#c5):
> 
> > My guess is that the retina is rendering the SVG at non-retina res, and zooming it up 2x. So it's still a "zoom", just implicit (in the same way that a non-retina PNG is resampled 2x by the browser).
> 
> > You use SVG Filters to change the color of the text. Do you see the same problem without using filters on the text?
> 
> Removing the SVG filter applied to the text indeed removes the (unintended) blur.
> 
> FWIW, Firefox seemed to have the same issue, but it’s fixed now. https://bugzilla.mozilla.org/show_bug.cgi?id=600207

The filter blurring is a side effect of bug 93471. Let's see if that bug fixes the issue. It also depends if <img> gets the right resolution information.
Comment 5 Mathias Bynens 2014-03-03 09:57:42 PST
The old test case URL doesn’t work anymore — here’s the updated link: http://rawgithub.com/badges/gh-badges/ccd6f1c7abc996e529366ca6b870c3a804271599/sheet.html
Comment 6 Brent Fulgham 2022-07-15 16:47:21 PDT
This continues to be an issue in Safari 8.5 years later.
Comment 7 Radar WebKit Bug Importer 2022-07-15 16:47:32 PDT
<rdar://problem/97100938>