What is meta? ×
Meta Stack Exchange is where users like you discuss bugs, features, and support issues that affect the software powering all 128 Stack Exchange communities.

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.

share|improve this question
    
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
3  
@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
1  
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
add comment

You must log in to answer this question.

Browse other questions tagged .