[SVG Layout] ist ein [JQuery-Plugin|JQuery] zum Rendern eines Layout von SVG-Elementen.

!!!Beschreibung
Scalable Vector Graphic, kurz SVG, ist eine sehr effiziente Methode um grafische Elemente in eine Web-Seite zu bringen. Im Gegensatz zu HTML-Elementen fehlen bei SVG fortschrittliche Werkzeuge für das Layout. [SVG Layout] füllt diese Lücke.

!!!Beispiel
Folgendes Beispiel zeigt ein Flex-Layout:

{{{
<svg flex="content-height" style="width: 100%; background-color: #f0f0f0;">
	<c:forEach begin="1" end="10">
		<g flex="top" height="20">
			<g x="0" y="0" width="100">
				<text x="10" y="20" font-size="14px">Left label</text>
			</g>
			<g flex="left fill-row">
				<rect x="0%" y="10" width="10%" height="10" fill="blue"/>
				<rect x="10%" y="10" width="80%" height="10" fill="green"/>
				<rect x="90%" y="10" width="10%" height="10" fill="yellow"/>
			</g>
			<g flex="right" width="200">
				<text x="10" y="20" font-size="14px">Right label</text>
			</g>
		</g>
	</c:forEach>
</svg>
}}}

__Hinweis:__ Das Beispiel enthält zusätzlich einen [JSF-Tag|JSF] <c:forEach> um eine Wiederholung zu erzeugen.