svgref

Darwin Information Typing Architecture (DITA) Version 1.3 Part 3: All-Inclusive Edition

version
1.3
author
OASIS DITA Technical Committee

Use the svgref element to reference a non-DITA XML document that contains scalable vector graphic (SVG) markup. This element enables you to use the markup by reference.

The reference must be to a SVG svg element. The reference can be one of the following:
  • A URI that addresses an XML document; the XML document has a SVG svg element as the root element
  • A URI that addresses an XML document and contains a fragment identifier that is the XML ID of a svg element within the document

Processors SHOULD process the SVG as though the svg element had occurred directly in the content of the containing svg-container element.

The reference can be direct, using the href attribute, or indirect, using the keyref attribute. For indirect referencing, only the key name should be specified. The ID of the svg element must be specified as part of the value for the href attribute on the key definition.

For example, to refer to the svg element with the id of "svg-fragment-02" within a larger document using a key reference, you would define the key in the following way:
<keydef 
  keys="svg-fragment-0002" 
  href="svg/svg-library.xml#svg-fragment-02"
/>
You would refer to this key using just the key name:
<svg-container>
  <svgref keyref="svg-fragment-0002"/>
</svg-container>

Inheritance

+ topic/xref svg-d/svgref

Example

Here is a reference to an svg element that is the root element of its containing document:

<fig>
  <title>Figure With SVG Container</title>
  <svg-container>
    <svgref 
       href="media/svg/svg-graphic-01.xml" 
       format="svg"
    />
  </svg-container>
</fig>
The svg-graphic-01.xml file contains the following content. Note that the svg element sets the SVG namespace as the default namespace, so there are no namespace prefixes on the SVG markup:
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
  width="100"
  height="100">
  <defs>
    <filter
      id="f1"
      x="0"
      y="0">
      <feGaussianBlur
        in="SourceGraphic"
        stdDeviation="15"/>
    </filter>
  </defs>
  <rect
    width="90"
    height="90"
    stroke="green"
    stroke-width="3"
    fill="yellow"
    filter="url(#f1)"/>
</svg>

Here is a reference to a specific svg element in a containing XML file:

<fig>
  <title>Figure with SVG Container</title>
  <svg-container>
    <svgref 
      href="media/svg/svg-library.xml#frag-0001" 
    />
  </svg-container>
</fig>
The svg-library.xml file contains the following content:
<?xml version="1.0" encoding="UTF-8"?>
<root>
  <part>
   <svg id="frag-0001"
     xmlns="http://www.w3.org/2000/svg"
     width="100"
     height="100">
     <defs>
        <filter
          id="f1"
          x="0"
          y="0">
          <feGaussianBlur
            in="SourceGraphic"
            stdDeviation="15"/>
        </filter>
      </defs>
      <rect
        width="90"
        height="90"
        stroke="green"
        stroke-width="3"
        fill="yellow"
        filter="url(#f1)"/>
    </svg>
    <svg id="frag-0002"
       width="4in" height="6in" version="1.1"
          >
          <circle cx="150" cy="200" r="100" fill="url(#grad_blue)" >
            <animate attributeName="r" begin="Go.click" end="Stop.click" dur="4s"  
              values="100; 0; 100" repeatCount="indefinite"/>
          </circle>
          <radialGradient id="grad_blue" cx="20%" cy="20%" r="100%" fx="30%" fy="30%">
            <stop stop-color="white" offset="0"/>
            <stop stop-color="blue" offset="25%"/>
            <stop stop-color="rgb(0,0,192)" offset="50%"/>
            <stop stop-color="rgb(0,0,127)" offset="70%"/>
            <stop stop-color="rgb(0,0,64)" offset="85%"/>
            <stop stop-color="rgb(0,0,0)" offset="100%"/>
          </radialGradient>
          <g id="Go">
            <rect x="70" y="320" height="40" width="80" fill="aqua"/>
            <text x="90" y="350" font-size="30" fill="green">Go </text>
          </g>
          <g id="Stop">
            <rect x="160" y="320" height="40" width="80" fill="aqua"/>
            <text x="170" y="350" font-size="30" fill="red">Stop</text>
          </g>
        </svg>
  </part>
</root>

Attributes

The following attributes are available on this element: Universal attribute group, outputclass, and keyref. This element also uses Link relationship attribute group, with narrowed definitions of href and format (given below).

href
Reference to the svg element to be used. If the svg element is the root element of the referenced resource, then no fragment identifier is required, otherwise, a fragment identifier must be specified, where the fragment identifier is the XML ID of the svg element to be used. This attribute is not required, but must be specified if keyref is not specified. See The href attribute for detailed information on supported values and processing implications.
format
The data format of the resource.. For SVG the format should be "svg", which is the default value for format on this element.