Text is not retina ready #12
Comments
|
Where are you seeing this behavior? |
|
Sorry... should have given you that info... On Safari latest on Mac. Generally that happens when the SVG file is actually coded as smaller than the final size it is displayed at. |
|
Cool, would you be interested in opening a PR to patch it? |
|
Sure thing! Will do as soon as I can :) |
|
Great, thanks =D |
|
Hi @twolfson. I have made quite a number of changes to clean things up and make them more cross-browser compatible. I used outlined SVG contents instead of the basic format (which doesn't yet have full browser support for fonts) previously used. I haven't submitted a PR yet, because there are a number of things that would affect other areas of the repo, and I wanted to first get your thoughts on my approach. I added aria and accessibility to the SVG version, removed unnecessary shadows, and changed the size to 200x50 rather than 201x49. You can check it out here https://github.com/Cam/gratipay-badge |
|
Cool, thanks for taking the time to work on this. I think the 2x PNG is a good idea (although a 2x SVG seems silly). With respect to edits on the SVG itself, the badge's current size and style are based off of what GitHub uses. This goes to the extent that the CSS is ripped directly from GitHub. As a result, I would like to request that we don't define colors that aren't derived from the CSS somehow. I am open to other options like relocating the SVG template outside of HTML and dynamically loading it. Outside of those changes, can you explain things like removing the text itself (I am guessing this is browser support as you mentioned but I would prefer articles/issues) and the text shadow? |
|
Hey @twolfson. The SVG shouldn't be 2x. Where is that? I can fix it. It may prove hard to get it to work across all current browsers without using more defined SVG, but I can look into options. Where is the GitHub badge you replicated? I'd love to take a look at what they have done, and how compatible it is. |
|
Ah, sorry. I must have looked at the non-master version while comparing. It looks like you patched the 2x SVG name: Cam@b7b42ad#diff-04c6e90faac2675aa89e2176d2eec7d8 The source is a GitHub button, not a badge. For example, the "Comment" on an issue page.
|
|
Ahhh... yep. The GitHub buttons use text inside the button, rather than a full SVG button. I can do something like that for you if you like, but the markup would be a little more complex. It could use an iframe, like the unofficial GitHub badges, but that doesn't seem perfect to me. Although, it does allow for updates to be pushed globally without people updating their code. |
|
I think there was a context loss. The existing code on The current SVG template was generated via Sketch which might be causing those issues. Maybe we could rewrite the retina incompatible parts and keep the CSS color extractions? |
|
To get around it, the text element of the SVG should be "flattened" rather than actual text. That alone would remove the high res screen issues. I think adding the aria accessibility stuff too would be a good idea, as the text would no longer actually be machine readable text. Could I have the sketch file, and the export method used, so I can create a compatible version? |
|
@Cam Can you explain why or link me to an article explaining why we need to rasterize a font for SVG? That seems counter-intuitive since fonts are vectors themselves. |
|
@twolfson It's just an issue with where SVG is at right now. It affects Safari and Chrome on high resolution displays. Hopefully the SVG standards will be updated soon to fix the issue. |
|
This is starting to sound more like a problem with the browsers than our SVG. Upon researching what other sites do, it looks like their SVGs still use text (which is much more easy to maintain). https://api.travis-ci.org/gratipay/inside.gratipay.com.svg http://viewsource.in/https://api.travis-ci.org/gratipay/inside.gratipay.com.svg <text x="62.5" y="14">passing</text>https://img.shields.io/github/downloads/atom/atom/latest/total.svg http://viewsource.in/https://img.shields.io/github/downloads/atom/atom/latest/total.svg <text x="35" y="14">downloads</text> |
|
It is... in a way. But it's best to have cross-browser compatibility. I'm having a look through your SVG code now to see if I can find the problem... |
|
Interestingly, if I remove the shadow, the problem goes away. I think the problem must be filter="url(#filter-2)" |
|
Hm, any idea if there's another way to generate a text shadow in SVG that's compatible (e.g. 2 sets of text)? |
|
Just testing that now :) |
|
Yep! I managed to make an almost identical facsimile using two layers and opacity :) Check out the lib/index.html on this fork to see it in action https://github.com/Cam/gratipay-badge |
|
The code seems good but the SVG doesn't seem to be generated from the HTML yet =/ |
|
Yeah, I wanted to see if you were happy with that method before spending any time on it ;) EDIT: I've just noticed the HTML is also a bit of a mess in some ways. The HTML version isn't ready for zooming or accessibility either. I manually added accessibility stuff to the SVG. If you take a look at my fork, you can grab whatever elements you want from it. I feel you could probably simplify the whole thing though and make it more robust and elegant. I didn't really try to attack the canvas js stuff either. Apparently there are issues with canvas and high resolution screens. It can be dealt with using extra CSS. |
|
@rohitpaulk :) |
|
@twolfson What do you think? Is the new SVG and PNGs to your liking? |
|
The rendering doesn't looks so good on Firefox in Linux (Linux Min 17.1 to be specific) =/ Current:
New:
|
|
Ha! Damn. At least that is the least used platform. But still, the share is substantial enough for it to still be important. Are you open to using more suitable methods for the current state of SVG support? Something with real text should work for everything. |
|
What about modernising it a bit and removing the shadow? That would fix all of the issues. Or do you really want it to mimic the GitHub buttons? Unfortunately I don't think you can have the best of both worlds and keep it effective and properly formatted for popular platforms. |
|
I am trying to find issues filed for Chrome and Safari about our issue but am failing to. It would be nice to get an ETA on their solve times before making a decision =/ Also, I have a feeling it isn't the shadow itself but the upscaling of the shadow itself. Maybe we could render the text as 2x size with a 1x shadow and downsize it? |
|
Hmm, searching again for "retina svg text shadow" found some possible options: http://stackoverflow.com/questions/14664407/svg-drop-shadow-filter-pixelates-svg-on-mobile-safari http://creativeandcode.com/fix-css-filters-creating-blurry-images-on-retina/ |
|
Hmmm... the "-webkit-transform: translateZ(0);" thing looks promising. |
|
@twolfson let me know what you think will suit your preferences best. |
|
I have a strong preference to keeping the SVG close to what it currently is. As a result, we should prob try out the workarounds to see if they work in GitHub READMEs =/ |
The text on the SVG badge is blurry and pixelated on high resolution screens.
The text was updated successfully, but these errors were encountered: