Page MenuHomePhabricator

Allow Lua to generate interactive SVGs (<svg> instead of <img>)
Open, Needs TriagePublicFeature

Description

Scribunto recently added support for Lua to generate SVGs rendered as <img> in T405861. This renders SVGs in secure animated mode which allows declarative animations but not interactions. There are some use cases where interactivity would be helpful to illustrate article content.

This can be done by emitting <svg> elements to html, after passing them through a sanitizer to strip elements and attributes that could trigger external resource loads or script execution (T334953). The interface for this in Scribunto could be a new :toTag() method in mw.svg.

Previously discussed within T334372.

FeatureUnsanitized, as <img> (Supported)Sanitized, as <svg> (Proposed)
Declarative animationsYesYes
InteractivityNo, blocked by browserYes
Script executionNo, blocked by browserNo, blocked by MediaWiki
External referencesNo, blocked by browserNo, blocked by MediaWiki

Event Timeline

Change #1203874 had a related patch set uploaded (by SD0001; author: SD0001):

[mediawiki/extensions/Scribunto@master] Sanitize SVGs and allow embedding as <svg> tags in HTML

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

Change #1203875 had a related patch set uploaded (by SD0001; author: SD0001):

[mediawiki/extensions/Scribunto@master] Support advanced elements and attributes in SVG sanitizer

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

The best actual use for it isn’t even necessarily interactivity but the ability to use CSS on SVG contents. As we are currently providing the night mode by default to all readers, this is incredibly important even if there was zero interactivity, as an SVG in base URI would have to be either given a white background or reproduced twice to work in night mode. Either way, not the best.

The best actual use for it isn’t even necessarily interactivity but the ability to use CSS on SVG contents. As we are currently providing the night mode by default to all readers, this is incredibly important even if there was zero interactivity, as an SVG in base URI would have to be either given a white background or reproduced twice to work in night mode. Either way, not the best.

Note that <img> tag svgs do support night mode (at least in some browsers, havent tested in all). The biggest issue is we cant use css variables in them so its a bit annoying and not skin-agnostic.

On plwiki we recently created a template for that:

{{Theme
  |light = [[File:Light image.svg|thumb]]
  |dark  = [[File:Dark image.svg|thumb]]
}}

Not great, as it;s almost twice the work, but it works.

Still, both CSS support and SVG interactivity would greatly improve the experience for both editors and readers (edUX and readUX 😉).