https://myriad-staging.bgs.ac.uk/index.php?action=history&feed=atom&title=Widget%3ASvg
Widget:Svg - Revision history
2026-04-17T02:45:38Z
Revision history for this page on the wiki
MediaWiki 1.42.3
https://myriad-staging.bgs.ac.uk/index.php?title=Widget:Svg&diff=2549&oldid=prev
Myriad-admin: Created page with "{{Widget |description=Allows you to embed a Scalable Vector Graphics (SVG) image (img tag using inline markup encoded for data url scheme) on a page. |author=DSquirrelGM |status=active |security=checked }} <noinclude>__NOTOC__ This widget allows you to embed a '''[https://www.w3.org/TR/SVG11/ Scalable Vector Graphics]''' image (img tag using inline markup encoded for data url scheme) on your wiki page. Written by DSquirrelGM. ==Copy to your site==..."
2025-02-20T13:25:34Z
<p>Created page with "{{Widget |description=Allows you to embed a Scalable Vector Graphics (SVG) image (img tag using inline markup encoded for data url scheme) on a page. |author=DSquirrelGM |status=active |security=checked }} <noinclude>__NOTOC__ This widget allows you to embed a '''[https://www.w3.org/TR/SVG11/ Scalable Vector Graphics]''' image (img tag using inline markup encoded for data url scheme) on your wiki page. Written by <a href="/index.php?title=User:DSquirrelGM&action=edit&redlink=1" class="new" title="User:DSquirrelGM (page does not exist)">DSquirrelGM</a>. ==Copy to your site==..."</p>
<p><b>New page</b></p><div>{{Widget<br />
|description=Allows you to embed a Scalable Vector Graphics (SVG) image (img tag using inline markup encoded for data url scheme) on a page.<br />
|author=DSquirrelGM<br />
|status=active<br />
|security=checked<br />
}}<br />
<noinclude>__NOTOC__<br />
This widget allows you to embed a '''[https://www.w3.org/TR/SVG11/ Scalable Vector Graphics]''' image (img tag using inline markup encoded for data url scheme) on your wiki page.<br />
<br />
Written by [[User:DSquirrelGM|DSquirrelGM]].<br />
<br />
==Copy to your site==<br />
To use this widget on your site, install the [[mediawikiwiki:Extension:Widgets|Widgets extension]] and copy the [{{fullurl:{{FULLPAGENAME}}|action=edit}} full source code] of this page to your wiki as '''{{FULLPAGENAME}}''' article.<br />
<br />
=Usage=<br />
Refer to the SVG specification for the use of these attributes: width, height, viewBox, preserveAspectRatio, x, y, version<br />
<br />
{|<br />
|-<br />
| ''width'' || &nbsp; || horizontal image size || &nbsp; || 100%<br />
|-<br />
| ''height'' || &nbsp; || vertical image size || &nbsp; || 100%<br />
|-<br />
| ''version'' || &nbsp; || specification version || &nbsp; || 1.1<br />
|-<br />
| ''x'' || &nbsp; || horizontal origin (ignored on top level element) || &nbsp; || 0<br />
|-<br />
| ''y'' || &nbsp; || vertical origin (ignored on top level element) || &nbsp; || 0<br />
|-<br />
| ''preserveAspectRatio'' || &nbsp; || Aspect ratio adjustment || &nbsp; || xMidYMid meet<br />
|-<br />
| ''viewBox'' || &nbsp; || viewport extents || &nbsp; || 0 0 100% 100%<br />
|-<br />
| ''content'' || &nbsp; || SVG markup to be embedded<br />
|-<br />
| ''url'' || &nbsp; || (set a value to use url() scheme instead of img tag)<br />
|}<br />
<br />
== Sample results ==<br />
<br />
; Example 1<br />
{{#widget:SVG<br />
|id=TpB<br />
|width=200<br />
|height=200<br />
|viewBox=0 0 200 200<br />
|content=<br />
<title>Turbulence + Background</title><br />
<desc>Turbulence + Background Test</desc><br />
<g><br />
<defs><br />
<filter id="T1" x="0%" y="0%" width="100%" height="100%"><br />
<feTurbulence seed="0" stitchTiles="stitch" baseFrequency="0.25" numOctaves="2"/><br />
</filter><br />
<radialGradient id="rg1" fx="50%" fy="50%" cx="50%" cy="50%" r="75%"><br />
<stop offset="0%" stop-color="#e4d2be" stop-opacity="0%"/><br />
<stop offset="100%" stop-color="#2f0602" stop-opacity="100%"/><br />
</radialGradient><br />
</defs><br />
<g><br />
<mask id="mt1" x="0%" y="0%" width="100%" height="100%"><br />
<g><br />
<rect x="0" y="0" width="100%" height="100%" filter="url(#T1)" /><br />
</g><br />
</mask><br />
</g><br />
<rect x="0%" y="0%" width="100%" height="100%" fill="url(#rg1)"/><br />
<rect x="0%" y="0%" width="100%" height="100%" fill="#0d1a1f" mask="url(#mt1)"/><br />
</g><br />
}}<br />
<br />
; Example 2<br />
<div style="background: {{#widget:SVG<br />
|url=1<br />
|content=<br />
<title>Turbulence + Background</title><br />
<desc>Turbulence + Background Test</desc><br />
<g><br />
<defs><br />
<filter id="T1" x="0%" y="0%" width="100%" height="100%"><br />
<feTurbulence seed="0" stitchTiles="stitch" baseFrequency="0.25" numOctaves="2"/><br />
</filter><br />
<radialGradient id="rg1" fx="50%" fy="50%" cx="50%" cy="50%" r="75%"><br />
<stop offset="0%" stop-color="#e4d2be" stop-opacity="0%"/><br />
<stop offset="100%" stop-color="#2f0602" stop-opacity="100%"/><br />
</radialGradient><br />
</defs><br />
<g><br />
<mask id="mt1" x="0%" y="0%" width="100%" height="100%"><br />
<g><br />
<rect x="0" y="0" width="100%" height="100%" filter="url(#T1)" /><br />
</g><br />
</mask><br />
</g><br />
<rect x="0%" y="0%" width="100%" height="100%" fill="url(#rg1)"/><br />
<rect x="0%" y="0%" width="100%" height="100%" fill="#0d1a1f" mask="url(#mt1)"/><br />
</g><br />
}} transparent;">1 2 3<br />4 5 6</div><br />
{{Comments}}</div>
Myriad-admin