<svgref>

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>

Content models

See appendix for information about this element in OASIS document type shells.

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.
Parent topic: SVG elements