Fontem paginae Formula:SVG/doc inspicere

{{Subpagina documentationis}}
{{Non Latine}}
{{Lua|Module:Svg|Module:Params}}

This template shows SVG images built from source. It is also able to display [[:en:SVG animation|SVG animations]] (see below).

== De usu ==
Supported parameters are {{para|content}}, {{para|link}}, {{para|width}}, {{para|height}}, {{para|class}}, {{para|id}}, {{para|alt}}, {{para|title}}, {{para|style}} and custom parameters starting with the hash sign (<code>#</code>) which will be used as attributes for the nested {{tag|svg}} element.

=== Examples ===

'''Wikitext:'''

<syntaxhighlight lang="wikitext">{{SVG|content=<circle cx="50" cy="50" r="45" style="fill:green;" />}}</syntaxhighlight>

'''Effect:'''

{{SVG|content=<circle cx="50" cy="50" r="45" style="fill:green;" />}}

{{Ast}}

'''Wikitext (from [[:File:SVG animation using SMIL.svg|SVG animation using SMIL.svg]]):'''

<syntaxhighlight lang="wikitext">{{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>

}}</syntaxhighlight>

'''Effect:'''

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

}}

{{Ast}}

'''Wikitext (from [[:File:Animated clock.svg|Animated clock.svg]]):'''

<syntaxhighlight lang="wikitext">{{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)" />

}}</syntaxhighlight>

'''Effect:'''

{{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)" />

}}

== Synonyma ==
* {{fn|svg}}
* {{fn|Show SVG}} – nomen interviciale

== Ulteriora si cupis ==
* {{nm|svg|create}}
* [[:mw:Extension:Scribunto/Lua reference manual#mw.svg.new|Lua reference manual § <code>mw.svg.new()</code>]]
* [[:Category:Formulae imaginum]]
* {{fn|Fragmentum imaginis}}

<includeonly>{{in harenario aut alibi||
<!-- Categorias sub hac linea adde -->
[[Categoria:Formulae|{{PAGENAME}}]]
[[Categoria:Formulae intra versum accommodandae|{{PAGENAME}}]]
[[Categoria:Formulae imaginum|{{PAGENAME}}]]
[[Categoria:Formulae typographicae|{{PAGENAME}}]]
}}</includeonly>