`<svg-container>`

The <svg-container> element stores content that contributes to a scalable vector graphic (SVG).

Usage information

The <svg-container> element can contain SVG elements, references to SVG elements that are stored in separate, non-DITA documents, or <data> elements.

The SVG markup must have a root element of <svg> with the SVG namespace: "http://www.w3.org/2000/svg".

Specialization hierarchy

The <svg-container> is specialized from <foreign>. It is defined in the SVG domain module.

Attributes

The following attributes are available on this element: universal attributes.

Example

This section is non-normative.

The following code sample shows how <svg-container> elements can be used in a DITA topic. It is used to generate both inline SVG markup and a titled figure that contains SVG markup:

<topic id="svg-test-topic-01">
  <title>SVG Domain Test: Namespace Prefixed SVG Elements</title>
    <body>
      <!-- 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>
      <!-- ... -->
      <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: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:svg>
        </svg-container>
      </fig>
    </body>
</topic>