Page MenuHomePhabricator

Add experimental option for direct SVG output via srcset
Open, LowPublic

Description

Per https://phabricator.wikimedia.org/T134409#2266050 it appears to work reasonably well to specify an SVG for client-side rendering in an <img> while retaining the PNG fallback behavior by putting the SVG in the srcset attribute with 1x density instead of listing out additional 1.5x and 2x PNGs. For modern browsers with native srcset support, this will override the rasterized PNG from the src attribute, without the PNG ever being loaded.

This may require fixing the jquery.hidpi srcset polyfill for older browsers to check at runtime for SVG-in-img support, to avoid accidentally loading an undisplayable SVG. (Browsers that do support SVG but not srcset would still load the PNG before the polyfill has a chance to run.)

Details

Related Gerrit Patches:

Event Timeline

brion created this task.May 4 2016, 11:34 PM
Restricted Application added subscribers: Zppix, Aklapper. · View Herald TranscriptMay 4 2016, 11:34 PM

For some reason the project tags got lost during submission; re-adding.

Restricted Application added projects: Multimedia, Commons. · View Herald TranscriptMay 4 2016, 11:35 PM
Restricted Application added a subscriber: Steinsplitter. · View Herald Transcript
Restricted Application added subscribers: Poyekhali, Matanya. · View Herald TranscriptMay 4 2016, 11:57 PM

Change 287074 had a related patch set uploaded (by Brion VIBBER):
[WIP] Experimental $wgSVGClientSideRendering option

https://gerrit.wikimedia.org/r/287074

TheDJ added a subscriber: TheDJ.May 7 2016, 3:54 PM
TheDJ added a comment.EditedMay 13 2016, 12:37 PM

I was wondering.. Since this is on the drawing board now. Would it not be smart to tackle T49578: Score should output SVG first ? Way more isolated testing ground, that could use this same solution approach, yet less likely of having the problem of "what do we do with 50MB SVGs" ?

Perhelion added a subscriber: Perhelion.EditedMay 16 2016, 6:48 AM

There must be a simple size-check. As I suggested before, there could also be a SVG control patrol for a SVG ready system.
Or better on the other hand, a system to mark "bad" SVG (to exclude).

Jdforrester-WMF triaged this task as Low priority.Jul 8 2016, 4:22 PM
cscott added a subscriber: cscott.EditedJan 26 2018, 6:48 AM

Don't forget that our use of the "lang" feature in SVGs differ from the w3c standard, as implemented by browsers. In addition to blacklisting large SVGs we need to blacklist SVGs using the language selector feature.

brion added a comment.Jan 26 2018, 6:55 AM

Ah, good catch -- that'll use browser language not site language I suspect. Needs some investigating.

Its probably something that could be fixed in a post-processing layer to the svg.

mxn added a subscriber: mxn.Nov 10 2018, 10:09 PM