Welcome to Wikizilla! — Please log in or sign up to contribute.

Widget:SVG: Difference between revisions

From Wikizilla, the kaiju encyclopedia
Jump to navigationJump to search
mNo edit summary
No edit summary
 
Line 2: Line 2:
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.


Written by DSquirrelGM.
Written by [[User:DSquirrelGM|DSquirrelGM]].
 
==Copy to your site==
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=
Refer to the SVG specification for the use of these attributes: width, height, viewBox, preserveAspectRatio, x, y, version
Refer to the SVG specification for the use of these attributes: width, height, viewBox, preserveAspectRatio, x, y, version
Line 26: Line 30:
| ''url'' ||   || (set a value to use url() scheme instead of img tag)
| ''url'' ||   || (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>

Latest revision as of 14:21, 16 September 2022

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://wikizilla.org/w/index.php?title=Widget:SVG&oldid=267330"