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

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.