Feature summary:
SVG, or at least some degree of HTML graphics, should be directly supported in wikitext. For example, Inside of having to use a thumbnail for a pre-made image of an SVG circle, it should be possible to directly insert the circle into wikitext, like so:
This is a circle
<svg aria-labelledby="The following is a black circle"> <circle cx = "50" cy = "25" r="50/> </svg>
This is consistent with wikitext support for inline HTML and CSS, and would be primarily useful in templates and modules, as will be discussed below.
Use case(s)
Many vector graphics, such as https://commons.wikimedia.org/wiki/File:44th_Canadian_Parliament.svg and https://commons.wikimedia.org/wiki/File:Eleventh_Jatiya_Sangsad.svg, would be best off templatized in some form, rather than having to create and upload images from scratch.
The main problem an attempted templatization currently runs into is the fact that it could only output raw SVG, which is not currently supported. As such, in order to create such diagams or maps, one would have to use a text editor or Inkscape to either create a fresh graphic or recolor a previously-uploaded graphic, and upload it fresh to Commons, and then link it from Commons. With a template (and, by extension, inline SVG), one could cut out such a middleman and make the maps directly in the source material, similar to what is already done on enwiki with Template:Graph:Chart.
Benefits:
As largely described above, this would save users much work in having to create raw maps of niche subjects and "polluting" Commons with such maps; it would also, much like Graphs do currently, save users from a thumbnail and allow for direct insertion of graphics into prose.
I am aware the power this gives people might be too great and am fine with reasonable nerfing, perhaps by not allowing other namespaces such as xlink. Also, viewboxes would have to be sorted. I do, however, believe that the benefits greatly outweigh the costs and am slightly surprised that this does not already exist in some form.
See also:
https://www.mediawiki.org/wiki/Inline_SVG_use
Implementation
This implementation allows SVGs to be generated by modules and templates, enabling the templatization of SVGs and supporting use cases like graphs, charts, and timelines.
Note that an SVG will still be a vector image, but primarily a static one. This means JavaScript interactions will not work. This is by design, for security reasons. Internal CSS will work so some movement is possible.
Enable with $wgEmbeddedSvg
New option to enable SVG embedded in wikitext: $wgEmbeddedSvg:
- default: false
- description: Allow adding embedded SVG in <svg>...</svg> tags rendered as an inline <img> tag. This is safe, as any inline SVG is secure by default. Browsers do not allow interactivity in <img> tags per HTML specification.
- Enabling embedded SVG: $wgEmbeddedSvg=true.
Minimal SVG
<svg viewbox="-5 -5 10 10" width="100" height="100"> <circle r="5" /> </svg>
Default rendering
SVG is then rendered as img tag for HTML like this:
<img class="mw-svg-parsed" width="100" height="100" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSItNSAtNSAxMCAxMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxjaXJjbGUgcj0iNSIgLz4KPC9zdmc+">
Where data-uri is an SVG image. This is done for security reasons (you cannot run JavaScript in this context, in img tag; see: SVG as image on w3.org).
Empty SVG
On a rare occasion when SVG tag in wikitext is empty the rendering is:
<img class="mw-svg-empty" src="" alt="">
Custom class
You can add custom classes with img-class attribute.
<svg width="34" height="34" viewBox="0 0 48 48" class="spinner" img-class="spinner-tpl"> <defs> <style type="text/css"><![CDATA[ .spinner { animation: spin var(--spinner-animation-speed) linear infinite; } /* ... other styles ... */ ]]></style> </defs> <g> <circle cx="24" cy="24" r="22" fill="transparent" stroke="url(#gradientFade)" stroke-width="4" /> </g> </svg>
Rendered:
<img width="34" height="34" src="data:image/svg+xml;base64,..." class="spinner-tpl">
Testing
- https://gerrit.wikimedia.org/r/c/mediawiki/core/+/1043323 -- Current patch.
- https://gerrit.wikimedia.org/r/c/mediawiki/core/+/1141966 -- Enable SVG (sets $wgEmbeddedSvg=true). Only for testing only (like creating a PatchDemo).