36

A few weeks ago, Flairs were sent to the client as HTML data (in one way or another). Now they are simpler to use—a single PNG is generated and sent to the client. This is a good improvement, except for one tiny detail: Flairs contain a lot of text and straight lines, and these elements aren't appropriate to store as a bitmapped image. Particularly text looks bad without the subpixel antialiasing appropriate for the output screen. In addition, whereas the old flairs looked good when you zoomed the web page, the new ones, being bitmapped images, do not scale at all. Hence, the flairs looked and worked much better before, but are easier to use now.

Now, I am not an expert on web design, but I think I have found a solution: generate SVG (vector) images instead of PNG (bitmap) images! These can be embedded on a web page like any PNG image:

<img src="http://meta.stackoverflow.com/users/flair/XXXXXX.svg" />

instead of

<img src="http://meta.stackoverflow.com/users/flair/XXXXXX.png" />

Hence, the simplicity is conserved. But SVG images are vector images, so text is sent as text, and rendered using the subpixel antialiasing appropriate at the client (and you can select and copy it as normal text). Also, being a vector image, it scales perfectly.

Of course I am aware that many browsers still doesn't support SVG images, but as far as I know, the latest versions of all major browsers do (or will very shortly (IE9)) support SVG. Another problem is that it might not be entirely trivial to embed the bitmap "Gravatar" in a SVG image, but to the best of my knowledge, it is possible (and not even too difficult).

I suggest that you start to support both PNG and SVG flairs. This way, webmasters may choose to support old browers at the cost of quality, or they may not. They may even check the browser name and version (either server-side or using JavaScript) and choose SVG if possible, and use PNG only as fallback for old browsers.

  • Yes, I am aware of the fact that I "forgot" the mandatory alt attribute of the img element. I did this for readability, but wouldn't do that on a real web page. – Andreas Rejbrand Sep 26 '10 at 16:47
  • What happens to Gravatars? Gravatar doesn't serve images in vector format. – BoltClock's a Unicorn Sep 26 '10 at 21:53
  • 3
    @BoltClock: Did you read all of my question? Hint: Search for "Another problem is..." – Andreas Rejbrand Sep 26 '10 at 23:33
  • I don't know about SVG, but you can get JPG versions of flair here. – uɐɯsO uɐɥʇɐN Sep 27 '10 at 8:22
  • 4
    @George: JPG is even worse than PNG! It is a bitmaped format too, but compressed and designed to be used with photographs! Text looks bad as PNG, but horrible as JPG! – Andreas Rejbrand Sep 27 '10 at 15:08
  • 2
    If/when this is implemented I want to be able to upload a SVG (gr)avatar too. That would make the flair fully scalable. Now, where is my vector camera? – Erno Jan 21 '13 at 6:55
  • 2
    It's 2015… What's the hold up for? – bjb568 Jan 6 '15 at 15:28
  • Awaiting for the mighty bounty that you will offer @bjb568 – Braiam Jan 6 '15 at 15:30
  • @Braiam Meh, designers don't seem to care about bounties. – bjb568 Jan 6 '15 at 19:49
  • @bjb568 right... bacon – Braiam Jan 6 '15 at 19:55
  • @bjb568 A big one is the lack of SVG favicons still (at least for me making one independent of SE). – Tim May 28 '17 at 23:55
2

There are a lot of limitations on SVG flairs. The biggest of those is a lack of publicly available SVG favicons. I'm fairly sure they don't exist internally either, because in the SE dropdown they still use their fuzzy PNG files.

So I've done my best - it's not an SVG but it is significantly higher quality - at 604x222.

Good looking, higher quality Stack Exchange flairs!

I'm running an API to do this on my own server. It looks quite nice:

The example is at this url:

https://timtjtim.co.uk/API/1.0/flair/askubuntu/69/292929

You can get yours at this url:

https://timtjtim.co.uk/API/1.0/flair/SITENAME/USERID/COLOR

Use the color picker here to help you decide, or any of these colours. EEEEEE is what the current flairs use.

And check out the Stack Apps post for more information.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .