Page MenuHomePhabricator

ResourceLoaderImageModule fails on big SVGs
Closed, ResolvedPublic

Description

When trying to include SVGs using the extension.json RessourceLoader fails to create valid CSS when the SVG is too big[1][2].

ResourceLoaderImageModule::getCssDeclarations tries to set a data URI and embed the SVGs inline. But when the SVG is too big CSSMin::encodeStringAsDataURI returns false leading to invalid data there and and an empty background-image: url();.

The later ( although faulty ) overrides the rasterized fallback and no image shows at all.

Possible solutions ( to be discussed )

  • do not embed SVG inline when to big but reference via path
  • use rasterized fallback

[1] e.g.


[2] see CSSMin::DATA_URI_SIZE_LIMIT = 32768;

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMar 15 2017, 3:04 PM
Krinkle renamed this task from RessourceLoader fails to include big SVGs to ResourceLoaderImageModule fails on big SVGs.Mar 15 2017, 7:10 PM
Krinkle edited subscribers, added: Jdforrester-WMF; removed: Jdforrester-PERSONAL.

We should probably do the same thing that CSSMin does when asked to process an /* @embed */ annotation for a file exceeding that size. Which seems to be not embedding.

Is anyone taking on this, or do you want me to do it? It shouldn't be difficult.

@matmarex Feel free to take it.

Krinkle triaged this task as Normal priority.Mar 15 2017, 8:06 PM
Krinkle moved this task from Inbox to Accepted: Bugs on the MediaWiki-ResourceLoader board.

Change 343022 had a related patch set uploaded (by WMDE-Fisch):
[mediawiki/core] Fix failing ResourceLoaderImageModule when loading big SVGs

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

Was looking into it anyway so I wrote a patch this morning :-)

Change 343022 merged by jenkins-bot:
[mediawiki/core] resourceloader: Use SVG url when ResourceLoaderImageModule can't embed

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

matmarex closed this task as Resolved.Mar 17 2017, 6:39 AM
matmarex removed a project: Patch-For-Review.