Template:Show SVG/doc

This template shows SVG images built from source. It is also able to display SVG animations (see below).

Usage

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

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

File:Information icon4.svg

Example with frame – see {{Image frame}}.

{{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

• {{New SVG}}

See also

• {{#invoke:svg|create}}
• Lua reference manual § mw.svg.new()
• Category:Image formatting and function templates
• {{CSS image crop}}
• {{Annotated image}}