SVG Avatars

Bug #786430 reported by Olly Betts
6
This bug affects 1 person
Affects Status Importance Assigned to Milestone
Libravatar (obsolete)
Confirmed
Wishlist
Unassigned

Bug Description

Support for SVG avatars would be neat.

Revision history for this message
François Marier (fmarier) wrote :

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

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

Changed in libravatar:
status: New → Confirmed
importance: Undecided → Wishlist
Revision history for this message
Olly Betts (ojwb) wrote :

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.

Revision history for this message
François Marier (fmarier) wrote :

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?

tags: added: svg
tags: added: upload
Revision history for this message
François Marier (fmarier) wrote :

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

Revision history for this message
François Marier (fmarier) wrote :

<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

Revision history for this message
François Marier (fmarier) wrote :

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.

Revision history for this message
François Marier (fmarier) wrote :
Revision history for this message
François Marier (fmarier) wrote :
Revision history for this message
Olly Betts (ojwb) wrote :

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.

Revision history for this message
François Marier (fmarier) wrote :

Here's a tool for optimizing SVG files:

  http://codedread.com/scour/

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

Revision history for this message
François Marier (fmarier) wrote :

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.

Revision history for this message
François Marier (fmarier) wrote :

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

Revision history for this message
Olly Betts (ojwb) wrote :

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.

Revision history for this message
François Marier (fmarier) wrote :

"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

Revision history for this message
François Marier (fmarier) wrote :

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

Revision history for this message
François Marier (fmarier) wrote :

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

Revision history for this message
François Marier (fmarier) wrote :

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

To post a comment you must log in.
This report contains Public information  Edit
Everyone can see this information.

Other bug subscribers