45

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.

12
  • 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. Sep 26, 2010 at 16:47
  • What happens to Gravatars? Gravatar doesn't serve images in vector format. Sep 26, 2010 at 21:53
  • 3
    @BoltClock: Did you read all of my question? Hint: Search for "Another problem is..." Sep 26, 2010 at 23:33
  • I don't know about SVG, but you can get JPG versions of flair here. Sep 27, 2010 at 8:22
  • 5
    @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! Sep 27, 2010 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?
    – user156108
    Jan 21, 2013 at 6:55
  • 2
    It's 2015… What's the hold up for?
    – bjb568
    Jan 6, 2015 at 15:28
  • Awaiting for the mighty bounty that you will offer @bjb568
    – Braiam
    Jan 6, 2015 at 15:30
  • @Braiam Meh, designers don't seem to care about bounties.
    – bjb568
    Jan 6, 2015 at 19:49
  • @bjb568 right... bacon
    – Braiam
    Jan 6, 2015 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, 2017 at 23:55
  • 1
    SVG flair would be amazing. Feb 3, 2021 at 14:38

1 Answer 1

3

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.

1
  • This seems very nice, but the link seems broken: Error reading from remote server Jan 17 at 19:15

You must log in to answer this question.

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