SVG Avatars

[Olly Betts]

Support for SVG avatars would be neat.

[François Marier (fmarier)]

I wonder what the size parameter would do in this case...

Also, how do we "crop" SVG images in the browser?

[Olly Betts (ojwb)]

I think an implementation for SVGs which ignored the size parameter upon retrieval, and skipped the cropping stage upon upload would be a reasonable starting point.

[François Marier (fmarier)]

Well, that's probably not going to work in practice though because site owners have no way of knowing what type of image a given avatar will turn out to be. We need to somehow set a size because site owners may not be setting the "height" and "width" attributes on their <img> tags.

(Also we need to produce square images, regardless of what users upload, hence the cropping.)

So I think we need:

- a way to "squarify" uploaded SVGs (some kind of cropping?)
- a way to specify dimensions inside the SVG so that browers display the correct size
- a way to validate uploaded files (xml validator with a schema definition?)

And optionally (but would be very nice):

- how do we optimise / minify SVGs? At the very least we could strip out comments. Can they be gzipped?

[François Marier (fmarier)]

We could probably provide gzipped versions of them to browsers which accept gzipped content, just like we do for .js and .css files.

[François Marier (fmarier)]

<chilts> fmarier: for SVGs I'd take a different approach, keep the SVG but produce a bitmapped (say PNG?) version of it ... just render it at the size asked for so the actually avatar is still a *.png
<chilts> I can't think of a way to make SVG work in the browser like that

[François Marier (fmarier)]

Given Olly's test page:

  http://survex.com/~olly/libravatar-svg-test/

It looks like it only works in recent webkit browsers, not in FF 3.6 for example.

So I guess we'd have to render them, or check the user agent asking for it and offer a rendered version to those that don't support straight SVGs.

[Olly Betts (ojwb)]

I did a bit more digging as to what supports SVG in img tags, and it looks like safari and opera also do, I checked epiphany and firefox 4.0.1 myself and they both do (both show the test page looking essentially the same as chromium does).

So the main offenders are firefox < 4 and probably MSIE too.

[François Marier (fmarier)]

Here's a tool for optimizing SVG files:

  http://codedread.com/scour/

It's in Debian wheezy as "python-scour".

[François Marier (fmarier)]

We should double-check this, but according to Rob O'Callahan, SVG in image tags is supported starting with IE9.

Combined with the fact that it works on all recent webkits and geckos, we could start exploring this again and offer it as an option for people wanting to more easily support high-DPI screens and who don't care about old IEs.

[François Marier (fmarier)]

As per comment #11: http://caniuse.com/svg-img

[Olly Betts (ojwb)]

So if their "Global user stats" are accurate, then it has ~80% support, and that should improve steadily with time. That seems a high enough proportion that people might actually use this.

[François Marier (fmarier)]

"SVGs should not be perceived as images. [...] They are mini-programs. [...] Allowing SVG for upload == allowing HTML for upload"

https://www.owasp.org/images/0/03/Mario_Heiderich_OWASP_Sweden_The_image_that_called_me.pdf

[François Marier (fmarier)]

Here's another tool for optimizing SVG files: https://github.com/svg/svgo

[François Marier (fmarier)]

Things to watch out for when using svgo: https://hacks.mozilla.org/2015/03/optimising-svg-images/

[François Marier (fmarier)]

List of things that can (should?) be sanitized in SVG files: https://etherpad.mozilla.org/svg-guidelines

[François Marier (fmarier)]

Tool from Cloudflare to make SVG safe: https://github.com/cloudflare/svg-hush