Widget:SVG: Difference between revisions

From Joints Committee
Jump to navigation Jump to search
VisualWikitext
(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, |sta...")
 
No edit summary
 
Line 1: Line 1:
{{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
}}
<noinclude>__NOTOC__
<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.
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.
Line 10: Line 5:


==Copy to your site==
==Copy to your site==
To use this widget on your site, just 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.
To use this widget on your site, just install [https://www.mediawiki.org/wiki/Extension:Widgets MediaWiki Widgets extension] and copy the [{{fullurl:{{FULLPAGENAME}}|action=edit}} full source code] of this page to your wiki as page '''{{FULLPAGENAME}}'''.


=Usage=
=Usage=
Line 35: Line 30:
| ''url'' || &nbsp; || (set a value to use url() scheme instead of img tag)
| ''url'' || &nbsp; || (set a value to use url() scheme instead of img tag)
|}
|}
 
</noinclude><includeonly><!--{if (empty($url))}--><!--{'<img src="data:image/svg+xml,'|cat:(('<svg xmlns="http://www.w3.org/2000/svg" version="'|cat:($version|strip_tags|regex_replace:"/\x22/":""|default:'1.1')|cat:'" viewBox="'|cat:($viewBox|strip_tags|regex_replace:"/\x22/":""|default:'0 0 100% 100%')|cat:'" preserveAspectRatio="'|cat:($preserveAspectRatio|strip_tags|regex_replace:"/\x22+/":""|default:'xMidYMid meet')|cat:'" x="'|cat:($x|strip_tags|regex_replace:"/\x22+/":""|default:'0')|cat:'" y="'|cat:($y|strip_tags|regex_replace:"/\x22+/":""|default:'0')|cat:'" width="'|cat:($width|strip_tags|regex_replace:"/\x22+/":""|default:'100%')|cat:'" height="'|cat:($height|strip_tags|regex_replace:'/\x22/':""|default:'100%')|cat:'"'|cat:'>'|cat:($content|regex_replace:"/<SCRIPT/i":"<text"|regex_replace:"/<\/SCRIPT/i":"</text"|regex_replace:"/<SVG/i":"<g"|regex_replace:"/<\/SVG/i":"</g"|replace:'load=':'='|default:'')|cat:'</svg>')|escape:'url')|cat:'" />'}--><!--{else}--><!--{'url(data:image/svg+xml,'|cat:(('<svg xmlns="http://www.w3.org/2000/svg" '|cat:' version="'|cat:($version|strip_tags|regex_replace:"/\x22+/":""|default:'1.1')|cat:'" viewBox="'|cat:($viewBox|strip_tags|regex_replace:"/\x22+/":""|default:'0 0 100% 100%')|cat:'" preserveAspectRatio="'|cat:($preserveAspectRatio|strip_tags|regex_replace:"/\x22+/":""|default:'xMidYMid meet')|cat:'" x="'|cat:($x|strip_tags|regex_replace:"/\x22+/":""|default:'0')|cat:'" y="'|cat:($y|strip_tags|regex_replace:"/\x22+/":""|default:'0')|cat:'" width="'|cat:($width|strip_tags|regex_replace:"/\x22+/":""|default:'100%')|cat:'" height="'|cat:($height|strip_tags|regex_replace:"/\x22+/":""|default:'100%')|cat:'"'|cat:'>'|cat:($content|regex_replace:"/<SCRIPT/i":"<text"|regex_replace:"/<\/SCRIPT/i":"</text"|regex_replace:"/<SVG/i":"<g"|replace:"/<\/SVG/i":"</g"|replace:'load=':'='|default:'')|cat:'</svg>')|escape:'url')|cat:')'}--><!--{/if}-->
== Sample results ==
</includeonly>
 
; Example 1
{{#widget:SVG
|id=TpB
|width=200
|height=200
|viewBox=0 0 200 200
|content=
<title>Turbulence + Background</title>
<desc>Turbulence + Background Test</desc>
<g>
<defs>
<filter id="T1" x="0%" y="0%" width="100%" height="100%">
<feTurbulence seed="0" stitchTiles="stitch" baseFrequency="0.25" numOctaves="2"/>
</filter>
<radialGradient id="rg1" fx="50%" fy="50%" cx="50%" cy="50%" r="75%">
<stop offset="0%" stop-color="#e4d2be" stop-opacity="0%"/>
<stop offset="100%" stop-color="#2f0602" stop-opacity="100%"/>
</radialGradient>
</defs>
<g>
<mask id="mt1" x="0%" y="0%" width="100%" height="100%">
  <g>
  <rect x="0" y="0" width="100%" height="100%" filter="url(#T1)" />
  </g>
  </mask>
</g>
<rect x="0%" y="0%" width="100%" height="100%" fill="url(#rg1)"/>
<rect x="0%" y="0%" width="100%" height="100%" fill="#0d1a1f" mask="url(#mt1)"/>
</g>
}}
 
; Example 2
<div style="background: {{#widget:SVG
|url=1
|content=
<title>Turbulence + Background</title>
<desc>Turbulence + Background Test</desc>
<g>
<defs>
<filter id="T1" x="0%" y="0%" width="100%" height="100%">
<feTurbulence seed="0" stitchTiles="stitch" baseFrequency="0.25" numOctaves="2"/>
</filter>
<radialGradient id="rg1" fx="50%" fy="50%" cx="50%" cy="50%" r="75%">
<stop offset="0%" stop-color="#e4d2be" stop-opacity="0%"/>
<stop offset="100%" stop-color="#2f0602" stop-opacity="100%"/>
</radialGradient>
</defs>
<g>
<mask id="mt1" x="0%" y="0%" width="100%" height="100%">
  <g>
  <rect x="0" y="0" width="100%" height="100%" filter="url(#T1)" />
  </g>
  </mask>
</g>
<rect x="0%" y="0%" width="100%" height="100%" fill="url(#rg1)"/>
<rect x="0%" y="0%" width="100%" height="100%" fill="#0d1a1f" mask="url(#mt1)"/>
</g>
}} transparent;">1 2 3<br />4 5 6</div>
{{Comments}}

Latest revision as of 15:22, 16 April 2021

This widget allows you to embed a 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

To use this widget on your site, just install MediaWiki Widgets extension and copy the full source code of this page to your wiki as page Widget:SVG.

Usage

Refer to the SVG specification for the use of these attributes: width, height, viewBox, preserveAspectRatio, x, y, version

width   horizontal image size   100%
height   vertical image size   100%
version   specification version   1.1
x   horizontal origin (ignored on top level element)   0
y   vertical origin (ignored on top level element)   0
preserveAspectRatio   Aspect ratio adjustment   xMidYMid meet
viewBox   viewport extents   0 0 100% 100%
content   SVG markup to be embedded
url   (set a value to use url() scheme instead of img tag)
Retrieved from "https://jointmechanics.org/index.php?title=Widget:SVG&oldid=50"