 | This template uses Lua: |
This template shows SVG images built from source. It is also able to display SVG animations (see below).
Usage
[edit]Supported parameters are |content=, |link=, |width=, |height=, |class=, |id=, |alt=, |title=, |style= and custom parameters starting with the hash sign (#) which will be used as attributes for the nested <svg>...</svg> element. Parameters that do not begin with the hash sign are discarded when empty (therefore writing |style= is identical to omitting the parameter).
Examples
[edit]Wikitext:
{{Show SVG|content=<circle cx="50" cy="50" r="45" style="fill:green;" />}}
Effect:
Wikitext (from SVG animation using SMIL.svg):
{{Show SVG
| link = SVG animation
| width = 200px
| alt = SVG animation using SMIL
| #width = 100%
| #height = 100%
| #viewBox = -4 -4 8 8
| #xmlns:xlink = http://www.w3.org/1999/xlink
| content =
<title>SVG animation using SMIL</title>
<circle cx="0" cy="1" r="2" stroke="red" fill="none">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0" to="360" dur="1s" repeatCount="indefinite" />
</circle>
}}
Effect:
Wikitext (from Animated clock.svg):
{{Show SVG
| width = 400px
| alt = SVG image
| #width = 800
| #height = 800
| #viewBox = 0 0 800 800
| #xmlns:xlink = http://www.w3.org/1999/xlink
| content =
<defs>
<animateTransform type="rotate" fill="remove" restart="always" calcMode="linear" accumulate="none" additive="sum" xlink:href="#anim-clock-hour-hand" repeatCount="indefinite" dur="43200s" to="360 400 400" from="0 400 400" attributeName="transform" attributeType="xml"></animateTransform>
<animateTransform type="rotate" fill="remove" restart="always" calcMode="linear" accumulate="none" additive="sum" xlink:href="#anim-clock-minute-hand" repeatCount="indefinite" dur="3600s" to="360 400 400" from="0 400 400" attributeName="transform" attributeType="xml"></animateTransform>
<animateTransform type="rotate" fill="remove" restart="always" calcMode="linear" accumulate="none" additive="sum" xlink:href="#anim-clock-second-hand" repeatCount="indefinite" dur="60s" to="360 400 400" from="0 400 400" attributeName="transform" attributeType="xml"></animateTransform>
</defs>
<circle cx="400" cy="400" r="400" fill="#fff"/>
<use transform="matrix(-1,0,0,1,800,0)" xlink:href="#one-half"/>
<g id="one-half">
<g id="one-fourth">
<path d="m400 40v107" stroke="#000" stroke-width="26.7"/>
<g id="one-twelfth">
<path d="m580 88.233-42.5 73.612" stroke="#000" stroke-width="26.7"/>
<g id="one-thirtieth">
<path id="one-sixtieth" d="m437.63 41.974-3.6585 34.808" stroke="#000" stroke-width="13.6" />
<use transform="rotate(6 400 400)" xlink:href="#one-sixtieth"/>
</g>
<use transform="rotate(12 400 400)" xlink:href="#one-thirtieth"/>
</g>
<use transform="rotate(30 400 400)" xlink:href="#one-twelfth"/>
<use transform="rotate(60 400 400)" xlink:href="#one-twelfth"/>
</g>
<use transform="rotate(90 400 400)" xlink:href="#one-fourth"/>
</g>
<path class="clock-hour-hand" id="anim-clock-hour-hand" d="m 381.925,476 h 36.15 l 5e-4,-300.03008 L 400,156.25 381.9245,175.96992 Z" transform="rotate(110.2650694444, 400, 400)" />
<path class="clock-minute-hand" id="anim-clock-minute-hand" d="M 412.063,496.87456 H 387.937 L 385.249,65.68306 400,52.75 414.751,65.68306 Z" transform="rotate(243.1808333333, 400, 400)" />
<path class="clock-second-hand" id="anim-clock-second-hand" fill="#a40000" d="M 397.317,63.51744 395.91962,168.4 C 374.575,170.5125 358.2,188.365 358.2,210 c 0,21.635 16.3,39 36.61214,41.47594 L 391.52847,498 h 16.94306 L 405.1868,251.47593 C 425.5,249 441.8,231.635 441.8,210 c 2e-5,-21.635 -16.375,-39.4875 -37.71971,-41.6 L 402.683,63.51744 400,60 Z M 400,190.534 c 10.888,0 19.466,8.866 19.466,19.466 0,10.6 -8.578,19.466 -19.466,19.466 -10.888,0 -19.466,-8.866 -19.466,-19.466 0,-10.6 8.578,-19.466 19.466,-19.466 z" transform="rotate(190.85, 400, 400)" />
}}
Effect:
Example with frame
[edit]
{{Image frame
| style = width: 200px;
| caption = Example with frame – see {{Tl|Image frame}}.
| link = Hello world
| align = right
| content = {{Show SVG
| width = 200px
| alt = Orbit animation
| link = Orbit
| #width = 160
| #height = 160
| #viewBox = 0 0 160 160
| content =
<rect fill="#209cef" x="0" y="0" width="160" height="160" />
<circle cx="80" cy="80" r="50" />
<g transform=" matrix(0.866, -0.5, 0.25, 0.433, 80, 80)">
<path d="M 0,70 A 65,70 0 0,0 65,0 5,5 0 0,1 75,0 75,70 0 0,1 0,70Z" fill="#fff">
<animateTransform attributeName="transform" type="rotate" from="360 0 0" to="0 0 0" dur="1s" repeatCount="indefinite" />
</path>
</g>
<path d="M 50,0 A 50,50 0 0,0 -50,0Z" transform="matrix(0.866, -0.5, 0.5, 0.866, 80, 80)" />
}}
}}
Redirects
[edit]- {{New SVG}}
