Comments (9)
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.
from gh-badges.
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?
from gh-badges.
WebKit has the same issue: https://bugs.webkit.org/show_bug.cgi?id=126398
from gh-badges.
@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).
from gh-badges.
@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.
from gh-badges.
Screenshots of @alrra’s test page on a retina display: http://jsbin.com/aHikuga/1
Without zoom (100% zoom)
150% zoom
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.
from gh-badges.
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
:
(see data:text/html,<img src='https://thefiletree.com/gh-badges/cheez-whiz.svg?plug=none'>
).
from gh-badges.
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>
from gh-badges.
b817b57 👍
from gh-badges.
Related Issues (20)
- Build a web service HOT 7
- Picking the font HOT 10
- Work with existing services HOT 27
- Tracking Gemnasium’s adoption of these badges HOT 7
- Add build script that generates SVG badges based on template HOT 5
- Making PNG download faster HOT 6
- Specify the branch for service images. HOT 7
- Add no-cache headers so that github will not cache the svg in their CND
- Mention Github Badge Gem HOT 1
- Not rendering in Github HOT 8
- Following color, rounding and font "standard" from other providers. HOT 2
- redirect / to http://shields.io/ HOT 35
- Tracking Travis’ adoption of these badges
- Add support for Version Badge HOT 9
- Bad image link in README.md HOT 2
- Tracking David DM’s adoption of these badges
- Running from Docker HOT 3
- Installation in Node.js v5.8.0 - Compilation error HOT 2
- Align color scheme names with Buckler’s HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from gh-badges.