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.
- 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.
<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>
<?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>
<?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.