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
(Created page with "<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 sc...")
 
No edit summary
 
(One intermediate revision by one other user not shown)
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==
==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 30: 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>

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"