Closed mathiasbynens closed 10 years ago
Noticed the rendering is different when viewing the SVG file standalone rather than through <img src=svg>
. Filed https://code.google.com/p/chromium/issues/detail?id=331387.
Oooh, I thought it was independent of that; I submitted a bug report about zooming: https://code.google.com/p/chromium/issues/detail?id=331385, but apparently retina causes the same issues?
WebKit has the same issue: https://bugs.webkit.org/show_bug.cgi?id=126398
@espadrine @mathiasbynens does specify the text-rendering
property with the value "geometricPrecision"
help ? (this should inform the browser to take more time to render things correctly).
edit: Here is something I've been playing with. Does it it make any difference for you guys ? (the first is the original image, the second is the svg
that uses the text-rendering
property + has some other changes, while the third is the svg
from this repository).
@alrra If you zoom the page, you should see that it becomes blurry.
(I haven't checked on a retina display, but zooming and being on retina seems to have the same effects.)
That said, it does look better.
Screenshots of @alrra’s test page on a retina display: http://jsbin.com/aHikuga/1
)
It definitely looks better, not as blurry, but still not as sharp as it should be. It feels like viewing @1x image on a @2x screen.
Apparently, this issue was fixed here in Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=600207.
Also, here is the comparison between Firefox and Chrome, zoomed 2x, using text-rendering
:
Chrome
Firefox
(see data:text/html,<img src='https://thefiletree.com/gh-badges/cheez-whiz.svg?plug=none'>
).
For the purpose of adoption, I think we should omit the text shadow until at least https://code.google.com/p/chromium/issues/detail?id=331387 is fixed.
I'm just going to paste the filter used here for future me's sake.
<filter id="shadow">
<feOffset dx="0" dy="1" in="SourceAlpha"/>
<feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 .3 0"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
b817b570100669a42d5d9eb5c12b159711b02470 :+1:
background: url(svg)
= blurry