svg-container
Use the svg-container element to store content that contributes to a scalable vector graphic (SVG). Such content includes SVG elements, references to SVG elements that are stored in separate, non-DITA documents, data, or data-about elements.
The SVG markup must have a root element of svg with the SVG namespace: "http://www.w3.org/2000/svg".
Content models
See appendix for information about this element in OASIS document type shells.
Inheritance
+ topic/foreign svg-d/svg-container
Example 421. Example
In the following example, an svg-container element contains inline SVG markup:
<topic id="svg-test-topic-01">
<title>SVG Domain Test: Namespace Prefixed SVG Elements</title>
<body>
<p>SVG inline: <svg-container>
<svg:svg
width="100"
height="100">
<svg:defs>
<svg:filter
id="f1"
x="0"
y="0">
<svg:feGaussianBlur
in="SourceGraphic"
stdDeviation="15"/>
</svg:filter>
</svg:defs>
<svg:rect
width="90"
height="90"
stroke="green"
stroke-width="3"
fill="yellow"
filter="url(#f1)"/>
</svg:svg>
</svg-container></p>
<p>SVG Directly in body:</p>
<svg-container>
<svg:svg width="200" height="200">
<svg:ellipse cx="100" cy="100" rx="80" ry="80" style="fill:blue;
stroke:rgb(0,0,100);stroke-width:2"/>
</svg:svg>
</svg-container>
<fig>
<title>Figure With SVG Container</title>
<svg-container>
<svg:svg width="4in" height="6in" version="1.1"
>
<svg:circle cx="150" cy="200" r="100" fill="url(#grad_blue)" >
<svg:animate attributeName="r" begin="Go.click" end="Stop.click" dur="4s"
values="100; 0; 100" repeatCount="indefinite"/>
</svg:circle>
<svg:radialGradient id="grad_blue" cx="20%" cy="20%" r="100%" fx="30%" fy="30%">
<svg:stop stop-color="white" offset="0"/>
<svg:stop stop-color="blue" offset="25%"/>
<svg:stop stop-color="rgb(0,0,192)" offset="50%"/>
<svg:stop stop-color="rgb(0,0,127)" offset="70%"/>
<svg:stop stop-color="rgb(0,0,64)" offset="85%"/>
<svg:stop stop-color="rgb(0,0,0)" offset="100%"/>
</svg:radialGradient>
<svg:g id="Go">
<svg:rect x="70" y="320" height="40" width="80" fill="aqua"/>
<svg:text x="90" y="350" font-size="30" fill="green">Go </svg:text>
</svg:g>
<svg:g id="Stop">
<svg:rect x="160" y="320" height="40" width="80" fill="aqua"/>
<svg:text x="170" y="350" font-size="30" fill="red">Stop</svg:text>
</svg:g>
</svg:svg>
</svg-container>
</fig>
</body>
</topic>
In the following example, the svgref element uses the keyref attribute to address SVG markup that is stored in a separate, non-DITA document:
<fig>
<title>Figure with SVG Container</title>
<svg-container>
<svgref keyref="svg-fragment-01"/>
</svg-container>
</fig>
The key "svg-fragment-01" is declared in the following way:
<map>
...
<keydef keys="svg-fragment-01"
href="media/svg/svg-library.xml#frag-0001"
format="svg"
/>
...
</map>
Attributes
The following attributes are available on this element:
Universal attribute group and
outputclass.
Parent topic