Table of Contents

• Expanded Table of Contents

1. 1 Introduction
2. 2 Concepts
3. 3 Rendering Model
4. 4 Basic Data Types and Interfaces
5. 5 Document Structure
6. 6 Styling
7. 7 Coordinate Systems, Transformations and Units
8. 8 Paths
9. 9 Basic Shapes
10. 10 Text
11. 11 Painting: Filling, Stroking and Marker Symbols
12. 12 Color
13. 13 Gradients and Patterns
14. 14 Clipping, Masking and Compositing
15. 15 Filter Effects
16. 16 Interactivity
17. 17 Linking
18. 18 Scripting
19. 19 Animation
20. 20 Fonts
21. 21 Metadata
22. 22 Backwards Compatibility
23. 23 Extensibility

1. Appendix A: Document Type Definition
2. Appendix B: SVG Document Object Model (DOM)
3. Appendix C: IDL Definitions
4. Appendix D: Java Language Binding
5. Appendix E: ECMAScript Language Binding
6. Appendix F: Implementation Requirements
7. Appendix G: Conformance Criteria
8. Appendix H: Accessibility Support
9. Appendix I: Internationalization Support
10. Appendix J: Minimizing SVG File Sizes
11. Appendix K: References
12. Appendix L: Element Index
13. Appendix M: Attribute Index
14. Appendix N: Property Index
15. Appendix O: Feature Strings
16. Appendix P: Media Type Registration for image/svg+xml
17. Appendix Q: Changes

Expanded Table of Contents

• Expanded Table of Contents

1. 1 Introduction
   • 1.1 About SVG
   • 1.2 SVG MIME type, file name extension and Macintosh file type
   • 1.3 SVG Namespace, Public Identifier and System Identifier
   • 1.4 Compatibility with Other Standards Efforts
   • 1.5 Terminology
   • 1.6 Definitions
2. 2 Concepts
   • 2.1 Explaining the name: SVG
   • 2.2 Important SVG concepts
   • 2.3 Options for using SVG in Web pages
3. 3 Rendering Model
   • 3.1 Introduction
   • 3.2 The painters model
   • 3.3 Rendering Order
   • 3.4 How groups are rendered
   • 3.5 How elements are rendered
   • 3.6 Types of graphics elements
     • 3.6.1 Painting shapes and text
     • 3.6.2 Painting raster images
   • 3.7 Filtering painted regions
   • 3.8 Clipping, masking and object opacity
   • 3.9 Parent Compositing
4. 4 Basic Data Types and Interfaces
   • 4.1 Syntax
   • 4.2 Basic data types
   • 4.3 Real number precision
   • 4.4 Recognized color keyword names
   • 4.5 Basic DOM interfaces
     • 4.5.1 Interface SVGElement
     • 4.5.2 Interface SVGAnimatedBoolean
     • 4.5.3 Interface SVGAnimatedString
     • 4.5.4 Interface SVGStringList
     • 4.5.5 Interface SVGAnimatedEnumeration
     • 4.5.6 Interface SVGAnimatedInteger
     • 4.5.7 Interface SVGNumber
     • 4.5.8 Interface SVGAnimatedNumber
     • 4.5.9 Interface SVGNumberList
     • 4.5.10 Interface SVGAnimatedNumberList
     • 4.5.11 Interface SVGLength
     • 4.5.12 Interface SVGAnimatedLength
     • 4.5.13 Interface SVGLengthList
     • 4.5.14 Interface SVGAnimatedLengthList
     • 4.5.15 Interface SVGAngle
     • 4.5.16 Interface SVGAnimatedAngle
     • 4.5.17 Interface SVGColor
     • 4.5.18 Interface SVGICCColor
     • 4.5.19 Interface SVGRect
     • 4.5.20 Interface SVGAnimatedRect
     • 4.5.21 Interface SVGUnitTypes
     • 4.5.22 Interface SVGStylable
     • 4.5.23 Interface SVGLocatable
     • 4.5.24 Interface SVGTransformable
     • 4.5.25 Interface SVGTests
     • 4.5.26 Interface SVGLangSpace
     • 4.5.27 Interface SVGExternalResourcesRequired
     • 4.5.28 Interface SVGFitToViewBox
     • 4.5.29 Interface SVGZoomAndPan
     • 4.5.30 Interface SVGViewSpec
     • 4.5.31 Interface SVGURIReference
     • 4.5.32 Interface SVGCSSRule
     • 4.5.33 Interface SVGRenderingIntent
5. 5 Document Structure
   • 5.1 Defining an SVG document fragment: the ‘svg’ element
     • 5.1.1 Overview
     • 5.1.2 The ‘svg’ element
   • 5.2 Grouping: the ‘g’ element
     • 5.2.1 Overview
     • 5.2.2 The ‘g’ element
   • 5.3 Defining content for reuse, and the ‘defs’ element
     • 5.3.1 Overview
     • 5.3.2 The ‘defs’ element
   • 5.4 The ‘desc’ and ‘title’ elements
   • 5.5 The ‘symbol’ element
   • 5.6 The ‘use’ element
   • 5.7 The ‘image’ element
   • 5.8 Conditional processing
     • 5.8.1 Conditional processing overview
     • 5.8.2 The ‘switch’ element
     • 5.8.3 The ‘requiredFeatures’ attribute
     • 5.8.4 The ‘requiredExtensions’ attribute
     • 5.8.5 The ‘systemLanguage’ attribute
     • 5.8.6 Applicability of test attributes
   • 5.9 Specifying whether external resources are required for proper rendering
   • 5.10 Common attributes
     • 5.10.1 Attributes common to all elements: ‘id’ and ‘xml:base’
     • 5.10.2 The ‘xml:lang’ and ‘xml:space’ attributes
   • 5.11 DOM interfaces
     • 5.11.1 Interface SVGDocument
     • 5.11.2 Interface SVGSVGElement
     • 5.11.3 Interface SVGGElement
     • 5.11.4 Interface SVGDefsElement
     • 5.11.5 Interface SVGDescElement
     • 5.11.6 Interface SVGTitleElement
     • 5.11.7 Interface SVGSymbolElement
     • 5.11.8 Interface SVGUseElement
     • 5.11.9 Interface SVGElementInstance
     • 5.11.10 Interface SVGElementInstanceList
     • 5.11.11 Interface SVGImageElement
     • 5.11.12 Interface SVGSwitchElement
     • 5.11.13 Interface GetSVGDocument
6. 6 Styling
   • 6.1 SVG's styling properties
   • 6.2 Usage scenarios for styling
   • 6.3 Alternative ways to specify styling properties
   • 6.4 Specifying properties using the presentation attributes
   • 6.5 Styling with XSL
   • 6.6 Styling with CSS
   • 6.7 Case sensitivity of property names and values
   • 6.8 Facilities from CSS and XSL used by SVG
   • 6.9 Referencing external style sheets
   • 6.10 The ‘style’ element
   • 6.11 The ‘class’ attribute
   • 6.12 The ‘style’ attribute
   • 6.13 Specifying the default style sheet language
   • 6.14 Property inheritance
   • 6.15 The scope/range of styles
   • 6.16 User agent style sheet
   • 6.17 Aural style sheets
   • 6.18 DOM interfaces
     • 6.18.1 Interface SVGStyleElement
7. 7 Coordinate Systems, Transformations and Units
   • 7.1 Introduction
   • 7.2 The initial viewport
   • 7.3 The initial coordinate system
   • 7.4 Coordinate system transformations
   • 7.5 Nested transformations
   • 7.6 The ‘transform’ attribute
   • 7.7 The ‘viewBox’ attribute
   • 7.8 The ‘preserveAspectRatio’ attribute
   • 7.9 Establishing a new viewport
   • 7.10 Units
   • 7.11 Object bounding box units
   • 7.12 Intrinsic sizing properties of the viewport of SVG content
   • 7.13 Geographic coordinate systems
   • 7.14 The ‘svg:transform’ attribute
   • 7.15 DOM interfaces
     • 7.15.1 Interface SVGPoint
     • 7.15.2 Interface SVGPointList
     • 7.15.3 Interface SVGMatrix
     • 7.15.4 Interface SVGTransform
     • 7.15.5 Interface SVGTransformList
     • 7.15.6 Interface SVGAnimatedTransformList
     • 7.15.7 Interface SVGPreserveAspectRatio
     • 7.15.8 Interface SVGAnimatedPreserveAspectRatio
8. 8 Paths
   • 8.1 Introduction
   • 8.2 The ‘path’ element
   • 8.3 Path data
     • 8.3.1 General information about path data
     • 8.3.2 The "moveto" commands
     • 8.3.3 The "closepath" command
     • 8.3.4 The "lineto" commands
     • 8.3.5 The curve commands
     • 8.3.6 The cubic Bézier curve commands
     • 8.3.7 The quadratic Bézier curve commands
     • 8.3.8 The elliptical arc curve commands
     • 8.3.9 The grammar for path data
   • 8.4 Distance along a path
   • 8.5 DOM interfaces
     • 8.5.1 Interface SVGPathSeg
     • 8.5.2 Interface SVGPathSegClosePath
     • 8.5.3 Interface SVGPathSegMovetoAbs
     • 8.5.4 Interface SVGPathSegMovetoRel
     • 8.5.5 Interface SVGPathSegLinetoAbs
     • 8.5.6 Interface SVGPathSegLinetoRel
     • 8.5.7 Interface SVGPathSegCurvetoCubicAbs
     • 8.5.8 Interface SVGPathSegCurvetoCubicRel
     • 8.5.9 Interface SVGPathSegCurvetoQuadraticAbs
     • 8.5.10 Interface SVGPathSegCurvetoQuadraticRel
     • 8.5.11 Interface SVGPathSegArcAbs
     • 8.5.12 Interface SVGPathSegArcRel
     • 8.5.13 Interface SVGPathSegLinetoHorizontalAbs
     • 8.5.14 Interface SVGPathSegLinetoHorizontalRel
     • 8.5.15 Interface SVGPathSegLinetoVerticalAbs
     • 8.5.16 Interface SVGPathSegLinetoVerticalRel
     • 8.5.17 Interface SVGPathSegCurvetoCubicSmoothAbs
     • 8.5.18 Interface SVGPathSegCurvetoCubicSmoothRel
     • 8.5.19 Interface SVGPathSegCurvetoQuadraticSmoothAbs
     • 8.5.20 Interface SVGPathSegCurvetoQuadraticSmoothRel
     • 8.5.21 Interface SVGPathSegList
     • 8.5.22 Interface SVGAnimatedPathData
     • 8.5.23 Interface SVGPathElement
9. 9 Basic Shapes
   • 9.1 Introduction
   • 9.2 The ‘rect’ element
   • 9.3 The ‘circle’ element
   • 9.4 The ‘ellipse’ element
   • 9.5 The ‘line’ element
   • 9.6 The ‘polyline’ element
   • 9.7 The ‘polygon’ element
     • 9.7.1 The grammar for points specifications in ‘polyline’ and ‘polygon’ elements
   • 9.8 DOM interfaces
     • 9.8.1 Interface SVGRectElement
     • 9.8.2 Interface SVGCircleElement
     • 9.8.3 Interface SVGEllipseElement
     • 9.8.4 Interface SVGLineElement
     • 9.8.5 Interface SVGAnimatedPoints
     • 9.8.6 Interface SVGPolylineElement
     • 9.8.7 Interface SVGPolygonElement
10. 10 Text
    • 10.1 Introduction
    • 10.2 Characters and their corresponding glyphs
    • 10.3 Fonts, font tables and baselines
    • 10.4 The ‘text’ element
    • 10.5 The ‘tspan’ element
    • 10.6 The ‘tref’ element
    • 10.7 Text layout
      • 10.7.1 Text layout introduction
      • 10.7.2 Setting the inline-progression-direction
      • 10.7.3 Glyph orientation within a text run
      • 10.7.4 Relationship with bidirectionality
    • 10.8 Text rendering order
    • 10.9 Alignment properties
      • 10.9.1 Text alignment properties
      • 10.9.2 Baseline alignment properties
    • 10.10 Font selection properties
    • 10.11 Spacing properties
    • 10.12 Text decoration
    • 10.13 Text on a path
      • 10.13.1 Introduction to text on a path
      • 10.13.2 The ‘textPath’ element
      • 10.13.3 Text on a path layout rules
    • 10.14 Alternate glyphs
      • 10.14.1 The ‘altGlyph’ element
      • 10.14.2 The ‘altGlyphDef’, ‘altGlyphItem’ and ‘glyphRef’ elements
    • 10.15 White space handling
    • 10.16 Text selection and clipboard operations
    • 10.17 DOM interfaces
      • 10.17.1 Interface SVGTextContentElement
      • 10.17.2 Interface SVGTextPositioningElement
      • 10.17.3 Interface SVGTextElement
      • 10.17.4 Interface SVGTSpanElement
      • 10.17.5 Interface SVGTRefElement
      • 10.17.6 Interface SVGTextPathElement
      • 10.17.7 Interface SVGAltGlyphElement
      • 10.17.8 Interface SVGAltGlyphDefElement
      • 10.17.9 Interface SVGAltGlyphItemElement
      • 10.17.10 Interface SVGGlyphRefElement
11. 11 Painting: Filling, Stroking and Marker Symbols
    • 11.1 Introduction
    • 11.2 Specifying paint
    • 11.3 Fill Properties
    • 11.4 Stroke Properties
    • 11.5 Controlling visibility
    • 11.6 Markers
      • 11.6.1 Introduction
      • 11.6.2 The ‘marker’ element
      • 11.6.3 Marker properties
      • 11.6.4 Details on how markers are rendered
    • 11.7 Rendering properties
      • 11.7.1 Color interpolation properties: ‘color-interpolation’ and ‘color-interpolation-filters’
      • 11.7.2 The ‘color-rendering’ property
      • 11.7.3 The ‘shape-rendering’ property
      • 11.7.4 The ‘text-rendering’ property
      • 11.7.5 The ‘image-rendering’ property
    • 11.8 Inheritance of painting properties
    • 11.9 DOM interfaces
      • 11.9.1 Interface SVGPaint
      • 11.9.2 Interface SVGMarkerElement
12. 12 Color
    • 12.1 Introduction
    • 12.2 The ‘color’ property
    • 12.3 Color profile descriptions
      • 12.3.1 Overview of color profile descriptions
      • 12.3.2 Alternative ways of defining a color profile description
      • 12.3.3 The ‘color-profile’ element
      • 12.3.4 The CSS @color-profile rule
      • 12.3.5 The ‘color-profile’ property
    • 12.4 DOM interfaces
      • 12.4.1 Interface SVGColorProfileElement
      • 12.4.2 Interface SVGColorProfileRule
13. 13 Gradients and Patterns
    • 13.1 Introduction
    • 13.2 Gradients
      • 13.2.1 Introduction
      • 13.2.2 Linear gradients
      • 13.2.3 Radial gradients
      • 13.2.4 Gradient stops
    • 13.3 Patterns
    • 13.4 DOM interfaces
      • 13.4.1 Interface SVGGradientElement
      • 13.4.2 Interface SVGLinearGradientElement
      • 13.4.3 Interface SVGRadialGradientElement
      • 13.4.4 Interface SVGStopElement
      • 13.4.5 Interface SVGPatternElement
14. 14 Clipping, Masking and Compositing
    • 14.1 Introduction
    • 14.2 Simple alpha compositing
    • 14.3 Clipping paths
      • 14.3.1 Introduction
      • 14.3.2 The initial clipping path
      • 14.3.3 The ‘overflow’ and ‘clip’ properties
      • 14.3.4 Clip to viewport vs. clip to ‘viewBox’
      • 14.3.5 Establishing a new clipping path: the ‘clipPath’ element
      • 14.3.6 Clipping paths, geometry, and pointer events
    • 14.4 Masking
    • 14.5 Object and group opacity: the ‘opacity’ property
    • 14.6 DOM interfaces
      • 14.6.1 Interface SVGClipPathElement
      • 14.6.2 Interface SVGMaskElement
15. 15 Filter Effects
    • 15.1 Introduction
    • 15.2 An example
    • 15.3 The ‘filter’ element
    • 15.4 The ‘filter’ property
    • 15.5 Filter effects region
    • 15.6 Accessing the background image
    • 15.7 Filter primitives overview
      • 15.7.1 Overview
      • 15.7.2 Common attributes
      • 15.7.3 Filter primitive subregion
    • 15.8 Light source elements and properties
      • 15.8.1 Introduction
      • 15.8.2 Light source ‘feDistantLight’
      • 15.8.3 Light source ‘fePointLight’
      • 15.8.4 Light source ‘feSpotLight’
      • 15.8.5 The ‘lighting-color’ property
    • 15.9 Filter primitive ‘feBlend’
    • 15.10 Filter primitive ‘feColorMatrix’
    • 15.11 Filter primitive ‘feComponentTransfer’
    • 15.12 Filter primitive ‘feComposite’
    • 15.13 Filter primitive ‘feConvolveMatrix’
    • 15.14 Filter primitive ‘feDiffuseLighting’
    • 15.15 Filter primitive ‘feDisplacementMap’
    • 15.16 Filter primitive ‘feFlood’
    • 15.17 Filter primitive ‘feGaussianBlur’
    • 15.18 Filter primitive ‘feImage’
    • 15.19 Filter primitive ‘feMerge’
    • 15.20 Filter primitive ‘feMorphology’
    • 15.21 Filter primitive ‘feOffset’
    • 15.22 Filter primitive ‘feSpecularLighting’
    • 15.23 Filter primitive ‘feTile’
    • 15.24 Filter primitive ‘feTurbulence’
    • 15.25 DOM interfaces
      • 15.25.1 Interface SVGFilterElement
      • 15.25.2 Interface SVGFilterPrimitiveStandardAttributes
      • 15.25.3 Interface SVGFEBlendElement
      • 15.25.4 Interface SVGFEColorMatrixElement
      • 15.25.5 Interface SVGFEComponentTransferElement
      • 15.25.6 Interface SVGComponentTransferFunctionElement
      • 15.25.7 Interface SVGFEFuncRElement
      • 15.25.8 Interface SVGFEFuncGElement
      • 15.25.9 Interface SVGFEFuncBElement
      • 15.25.10 Interface SVGFEFuncAElement
      • 15.25.11 Interface SVGFECompositeElement
      • 15.25.12 Interface SVGFEConvolveMatrixElement
      • 15.25.13 Interface SVGFEDiffuseLightingElement
      • 15.25.14 Interface SVGFEDistantLightElement
      • 15.25.15 Interface SVGFEPointLightElement
      • 15.25.16 Interface SVGFESpotLightElement
      • 15.25.17 Interface SVGFEDisplacementMapElement
      • 15.25.18 Interface SVGFEFloodElement
      • 15.25.19 Interface SVGFEGaussianBlurElement
      • 15.25.20 Interface SVGFEImageElement
      • 15.25.21 Interface SVGFEMergeElement
      • 15.25.22 Interface SVGFEMergeNodeElement
      • 15.25.23 Interface SVGFEMorphologyElement
      • 15.25.24 Interface SVGFEOffsetElement
      • 15.25.25 Interface SVGFESpecularLightingElement
      • 15.25.26 Interface SVGFETileElement
      • 15.25.27 Interface SVGFETurbulenceElement
16. 16 Interactivity
    • 16.1 Introduction
    • 16.2 Complete list of supported events
    • 16.3 User interface events
    • 16.4 Pointer events
    • 16.5 Hit-testing and processing order for user interface events
      • 16.5.1 Hit-testing
      • 16.5.2 Event processing
    • 16.6 The ‘pointer-events’ property
    • 16.7 Magnification and panning
    • 16.8 Cursors
      • 16.8.1 Introduction to cursors
      • 16.8.2 The ‘cursor’ property
      • 16.8.3 The ‘cursor’ element
    • 16.9 DOM interfaces
      • 16.9.1 Interface SVGCursorElement
17. 17 Linking
    • 17.1 References
      • 17.1.1 Overview
      • 17.1.2 IRIs and URIs
      • 17.1.3 Syntactic forms: IRI and FuncIRI
      • 17.1.4 Processing of IRI references
      • 17.1.5 IRI reference attributes
    • 17.2 Links out of SVG content: the ‘a’ element
    • 17.3 Linking into SVG content: IRI fragments and SVG views
      • 17.3.1 Introduction: IRI fragments and SVG views
      • 17.3.2 SVG fragment identifiers
      • 17.3.3 Predefined views: the ‘view’ element
      • 17.3.4 Highlighting views
    • 17.4 DOM interfaces
      • 17.4.1 Interface SVGAElement
      • 17.4.2 Interface SVGViewElement
18. 18 Scripting
    • 18.1 Specifying the scripting language
      • 18.1.1 Specifying the default scripting language
      • 18.1.2 Local declaration of a scripting language
    • 18.2 The ‘script’ element
    • 18.3 Event handling
    • 18.4 Event attributes
      • 18.4.1 Event attribute for the SVGLoad event
      • 18.4.2 Event attributes on graphics and container elements
      • 18.4.3 Document-level event attributes
      • 18.4.4 Animation event attributes
    • 18.5 DOM interfaces
      • 18.5.1 Interface SVGScriptElement
      • 18.5.2 Interface SVGZoomEvent
19. 19 Animation
    • 19.1 Introduction
    • 19.2 Animation elements
      • 19.2.1 Overview
      • 19.2.2 Relationship to SMIL Animation
      • 19.2.3 Animation elements example
      • 19.2.4 Attributes to identify the target element for an animation
      • 19.2.5 Attributes to identify the target attribute or property for an animation
      • 19.2.6 Animation with namespaces
      • 19.2.7 Paced animation and complex types
      • 19.2.8 Attributes to control the timing of the animation
        • 19.2.8.1 Clock values
      • 19.2.9 Attributes that define animation values over time
      • 19.2.10 Attributes that control whether animations are additive
      • 19.2.11 Inheritance
      • 19.2.12 The ‘animate’ element
      • 19.2.13 The ‘set’ element
      • 19.2.14 The ‘animateMotion’ element
      • 19.2.15 The ‘animateColor’ element
      • 19.2.16 The ‘animateTransform’ element
      • 19.2.17 Elements, attributes and properties that can be animated
    • 19.3 Animation using the SVG DOM
    • 19.4 DOM interfaces
      • 19.4.1 Interface ElementTimeControl
      • 19.4.2 Interface TimeEvent
      • 19.4.3 Interface SVGAnimationElement
      • 19.4.4 Interface SVGAnimateElement
      • 19.4.5 Interface SVGSetElement
      • 19.4.6 Interface SVGAnimateMotionElement
      • 19.4.7 Interface SVGMPathElement
      • 19.4.8 Interface SVGAnimateColorElement
      • 19.4.9 Interface SVGAnimateTransformElement
20. 20 Fonts
    • 20.1 Introduction
    • 20.2 Overview of SVG fonts
    • 20.3 The ‘font’ element
    • 20.4 The ‘glyph’ element
    • 20.5 The ‘missing-glyph’ element
    • 20.6 Glyph selection rules
    • 20.7 The ‘hkern’ and ‘vkern’ elements
    • 20.8 Describing a font
      • 20.8.1 Overview of font descriptions
      • 20.8.2 Alternative ways for providing a font description
      • 20.8.3 The ‘font-face’ element
      • 20.8.4 The ‘font-face-src’ element
      • 20.8.5 The ‘font-face-uri’ and ‘font-face-format’ elements
      • 20.8.6 The ‘font-face-name’ element
    • 20.9 DOM interfaces
      • 20.9.1 Interface SVGFontElement
      • 20.9.2 Interface SVGGlyphElement
      • 20.9.3 Interface SVGMissingGlyphElement
      • 20.9.4 Interface SVGHKernElement
      • 20.9.5 Interface SVGVKernElement
      • 20.9.6 Interface SVGFontFaceElement
      • 20.9.7 Interface SVGFontFaceSrcElement
      • 20.9.8 Interface SVGFontFaceUriElement
      • 20.9.9 Interface SVGFontFaceFormatElement
      • 20.9.10 Interface SVGFontFaceNameElement
21. 21 Metadata
    • 21.1 Introduction
    • 21.2 The ‘metadata’ element
    • 21.3 An example
    • 21.4 DOM interfaces
      • 21.4.1 Interface SVGMetadataElement
22. 22 Backwards Compatibility
23. 23 Extensibility
    • 23.1 Foreign namespaces and private data
    • 23.2 Embedding foreign object types
    • 23.3 The ‘foreignObject’ element
    • 23.4 An example
    • 23.5 Adding private elements and attributes to the DTD
    • 23.6 DOM interfaces
      • 23.6.1 Interface SVGForeignObjectElement

1. Appendix A: Document Type Definition
   • A.1 Introduction
   • A.2 Modularization
     • A.2.1 Element and attribute collections
     • A.2.2 Profiling the SVG specification
     • A.2.3 Practical considerations
   • A.3 SVG 1.1 module definitions and DTD implementations
     • A.3.1 Modular Framework Module
     • A.3.2 Datatypes Module
     • A.3.3 Qualified Name Module
     • A.3.4 Core Attribute Module
     • A.3.5 Container Attribute Module
     • A.3.6 Viewport Attribute Module
     • A.3.7 Paint Attribute Module
     • A.3.8 Basic Paint Attribute Module
     • A.3.9 Paint Opacity Attribute Module
     • A.3.10 Graphics Attribute Module
     • A.3.11 Basic Graphics Attribute Module
     • A.3.12 Document Events Attribute Module
     • A.3.13 Graphical Element Events Attribute Module
     • A.3.14 Animation Events Attribute Module
     • A.3.15 XLink Attribute Module
     • A.3.16 External Resources Attribute Module
     • A.3.17 Structure Module
     • A.3.18 Basic Structure Module
     • A.3.19 Conditional Processing Module
     • A.3.20 Image Module
     • A.3.21 Style Module
     • A.3.22 Shape Module
     • A.3.23 Text Module
     • A.3.24 Basic Text Module
     • A.3.25 Marker Module
     • A.3.26 Color Profile Module
     • A.3.27 Gradient Module
     • A.3.28 Pattern Module
     • A.3.29 Clip Module
     • A.3.30 Basic Clip Module
     • A.3.31 Mask Module
     • A.3.32 Filter Module
     • A.3.33 Basic Filter Module
     • A.3.34 Cursor Module
     • A.3.35 Hyperlinking Module
     • A.3.36 View Module
     • A.3.37 Scripting Module
     • A.3.38 Animation Module
     • A.3.39 Font Module
     • A.3.40 Basic Font Module
     • A.3.41 Extensibility Module
   • A.4 SVG 1.1 Document Type Definition
     • A.4.1 SVG 1.1 DTD Driver
     • A.4.2 SVG 1.1 Document Model
     • A.4.3 SVG 1.1 Attribute Collection
2. Appendix B: SVG Document Object Model (DOM)
   • B.1 SVG DOM overview
     • B.1.1 SVG DOM object initialization
   • B.2 Elements in the SVG DOM
   • B.3 Naming conventions
   • B.4 Exception SVGException
   • B.5 Feature strings for the hasFeature method call
   • B.6 Relationship with DOM Level 2 Events
   • B.7 Relationship with DOM Level 2 CSS
     • B.7.1 Introduction
     • B.7.2 User agents that do not support styling with CSS
     • B.7.3 User agents that support styling with CSS
     • B.7.4 Extended interfaces
   • B.8 Read only nodes in the DOM
   • B.9 Invalid values
3. Appendix C: IDL Definitions
4. Appendix D: Java Language Binding
   • D.1 The Java language binding
   • D.2 Using SVG with the Java language
5. Appendix E: ECMAScript Language Binding
   • E.1 Exceptions
   • E.2 Constants
   • E.3 Types
   • E.4 Objects
6. Appendix F: Implementation Requirements
   • F.1 Introduction
   • F.2 Error processing
   • F.3 Version control
   • F.4 Clamping values which are restricted to a particular range
   • F.5 ‘path’ element implementation notes
   • F.6 Elliptical arc implementation notes
     • F.6.1 Elliptical arc syntax
     • F.6.2 Out-of-range parameters
     • F.6.3 Parameterization alternatives
     • F.6.4 Conversion from center to endpoint parameterization
     • F.6.5 Conversion from endpoint to center parameterization
     • F.6.6 Correction of out-of-range radii
   • F.7 Text selection implementation notes
   • F.8 Printing implementation notes
7. Appendix G: Conformance Criteria
   • G.1 Introduction
   • G.2 Conforming SVG Document Fragments
   • G.3 Conforming SVG Stand-Alone Files
   • G.4 Conforming SVG Generators
   • G.5 Conforming SVG Servers
   • G.6 Conforming SVG DOM Subtree
   • G.7 Conforming SVG Interpreters
   • G.8 Conforming SVG Viewers
8. Appendix H: Accessibility Support
   • H.1 WAI Accessibility Guidelines
   • H.2 SVG Content Accessibility Guidelines
9. Appendix I: Internationalization Support
   • I.1 Introduction
   • I.2 Internationalization and SVG
   • I.3 SVG Internationalization Guidelines
10. Appendix J: Minimizing SVG File Sizes
11. Appendix K: References
    • K.1 Normative references
    • K.2 Informative references
12. Appendix L: Element Index
13. Appendix M: Attribute Index
    • M.1 Regular attributes
    • M.2 Presentation attributes
14. Appendix N: Property Index
15. Appendix O: Feature Strings
    • O.1 Introduction
    • O.2 SVG 1.1 feature strings
    • O.3 SVG 1.0 feature strings
16. Appendix P: Media Type Registration for image/svg+xml
    • P.1 Introduction
    • P.2 Registration of media type image/svg+xml
17. Appendix Q: Changes

1 Introduction

Contents

• 1.1 About SVG
• 1.2 SVG MIME type, file name extension and Macintosh file type
• 1.3 SVG Namespace, Public Identifier and System Identifier
• 1.4 Compatibility with Other Standards Efforts
• 1.5 Terminology
• 1.6 Definitions

1.1 About SVG

This specification defines the features and syntax for Scalable Vector Graphics (SVG).

SVG is a language for describing two-dimensional graphics in XML [XML10]. SVG allows for three types of graphic objects: vector graphic shapes (e.g., paths consisting of straight lines and curves), images and text. Graphical objects can be grouped, styled, transformed and composited into previously rendered objects. The feature set includes nested transformations, clipping paths, alpha masks, filter effects and template objects.

SVG drawings can be interactive and dynamic. Animations can be defined and triggered either declaratively (i.e., by embedding SVG animation elements in SVG content) or via scripting.

Sophisticated applications of SVG are possible by use of a supplemental scripting language which accesses SVG Document Object Model (DOM), which provides complete access to all elements, attributes and properties. A rich set of event handlers such as ‘onmouseover’ and ‘onclick’ can be assigned to any SVG graphical object. Because of its compatibility and leveraging of other Web standards, features like scripting can be done on XHTML and SVG elements simultaneously within the same Web page.

SVG is a language for rich graphical content. For accessibility reasons, if there is an original source document containing higher-level structure and semantics, it is recommended that the higher-level information be made available somehow, either by making the original source document available, or making an alternative version available in an alternative format which conveys the higher-level information, or by using SVG's facilities to include the higher-level information within the SVG content. For suggested techniques in achieving greater accessibility, see Accessibility.

SVG 1.1 is a modularization of SVG 1.0 [SVG10]. See the Document Type Definition appendix for details on how the DTD is structured to allow profiling and composition with other XML languages.

1.2 SVG MIME type, file name extension and Macintosh file type

The MIME type for SVG is "image/svg+xml" (see XML Media Types [RFC3023]). The registration of this MIME type is in progress at the W3C.

It is recommended that SVG files have the extension ".svg" (all lowercase) on all platforms. It is recommended that gzip-compressed [RFC1952] SVG files have the extension ".svgz" (all lowercase) on all platforms.

It is recommended that SVG files stored on Macintosh HFS file systems be given a file type of "svg " (all lowercase, with a space character as the fourth letter). It is recommended that gzip-compressed SVG files stored on Macintosh HFS file systems be given a file type of "svgz" (all lowercase).

1.3 SVG Namespace, Public Identifier and System Identifier

The following are the SVG 1.1 namespace, public identifier and system identifier:

SVG Namespace:

http://www.w3.org/2000/svg

Public Identifier for SVG 1.1:

PUBLIC "-//W3C//DTD SVG 1.1//EN"

System Identifier for the SVG 1.1 Recommendation:

http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd

The following is an example document type declaration for an SVG document:

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
         "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

Note that DTD listed in the System Identifier is a modularized DTD (i.e. its contents are spread over multiple files), which means that a validator may have to fetch the multiple modules in order to validate. For that reason, there is a single flattened DTD available that corresponds to the SVG 1.1 modularized DTD. It can be found at http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-flat.dtd.

While a DTD is provided in this specification, the use of DTDs for validating XML documents is known to be problematic. In particular, DTDs do not handle namespaces gracefully. It is not recommended that a DOCTYPE declaration be included in SVG documents.

1.4 Compatibility with Other Standards Efforts

SVG leverages and integrates with other W3C specifications and standards efforts. By leveraging and conforming to other standards, SVG becomes more powerful and makes it easier for users to learn how to incorporate SVG into their Web sites.

The following describes some of the ways in which SVG maintains compatibility with, leverages and integrates with other W3C efforts:

• SVG is an application of XML and is compatible with the Extensible Markup Language (XML) 1.0 Recommendation [XML10]
• SVG is compatible with the Namespaces in XML Recommendation [XML-NS]
• SVG utilizes XML Linking Language (XLink) [XLINK] for IRI referencing and requires support for base IRI specifications defined in XML Base [XML-BASE].
• SVG content can be styled by either CSS (see Cascading Style Sheets (CSS) level 2 [CSS2]) or XSLT (see XSL Transformations (XSLT) Version 1.0 [XSLT] and XSL Transformations (XSLT) Version 2.0 [XSLT2]). See Styling with CSS and Styling with XSL for details.
• SVG supports relevant properties and approaches common to CSS and XSL, plus selected semantics and features of CSS (see SVG's styling properties and SVG's Use of Cascading Style Sheets).
• External style sheets are referenced using the mechanism documented in Associating Style Sheets with XML documents Version 1.0 [XML-SS].
• SVG includes a complete Document Object Model (DOM) and conforms to the Document Object Model (DOM) Level 1 Recommendation [DOM1]. The SVG DOM has a high level of compatibility and consistency with the HTML DOM that is defined in the DOM Level 1 specification. Additionally, the SVG DOM supports and incorporates many of the facilities described in DOM Level 2, including the CSS object model and event handling [DOM2] [DOM2STYLE] [DOM2EVENTS].
• SVG incorporates some features and approaches that are part of the Synchronized Multimedia Integration Language (SMIL) 3.0 Specification [SMIL], including the ‘switch’ element and the ‘systemLanguage’ attribute.
• SVG's animation features (see Animation) were developed in collaboration with the W3C Synchronized Multimedia (SYMM) Working Group, developers of the Synchronized Multimedia Integration Language (SMIL) 3.0 Specification [SMIL]. SVG's animation features incorporate and extend the general-purpose XML animation capabilities described in the SMIL Animation specification [SMILANIM].
• SVG has been designed to allow SMIL to use animated or static SVG content as media components.
• SVG attempts to achieve maximum compatibility with both HTML 4 [HTML4] and XHTML™ 1.0 [XHTML]. Many of SVG's facilities are modeled directly after HTML, including its use of CSS [CSS2], its approach to event handling, and its approach to its Document Object Model [DOM2].
• SVG is compatible with W3C work on internationalization. References (W3C and otherwise) include: [UNICODE] and [CHARMOD]. Also, see Internationalization Support.
• SVG is compatible with W3C work on Web Accessibility. Also, see Accessibility Support.

In environments which support DOM 2 Core [DOM2] for other XML grammars (e.g., XHTML [XHTML]) and which also support SVG and the SVG DOM, a single scripting approach can be used simultaneously for both XML documents and SVG graphics, in which case interactive and dynamic effects will be possible on multiple XML namespaces using the same set of scripts.

1.5 Terminology

Within this specification, the key words "MUST", "MUST NOT", "REQUIRED", "SHALL", "SHALL NOT", "SHOULD", "SHOULD NOT", "RECOMMENDED", "MAY", and "OPTIONAL" are to be interpreted as described in Key words for use in RFCs to Indicate Requirement Levels [RFC2119]. However, for readability, these words do not appear in all uppercase letters in this specification.

At times, this specification recommends good practice for authors and user agents. These recommendations are not normative and conformance with this specification does not depend on their realization. These recommendations contain the expression "We recommend ...", "This specification recommends ...", or some similar wording.

1.6 Definitions

animation element

An animation element is an element that can be used to animate the attribute or property value of another element. The following elements are animation elements: ‘animateColor’, ‘animateMotion’, ‘animateTransform’, ‘animate’ and ‘set’.

animation event attribute

An animation event attribute is an event attribute that specifies script to run for a particular animation-related event. See Animation event attributes. The animation event attributes are ‘onbegin’, ‘onend’, ‘onload’ and ‘onrepeat’.

basic shape

Standard shapes which are predefined in SVG as a convenience for common graphical operations. Specifically: ‘circle’, ‘ellipse’, ‘line’, ‘polygon’, ‘polyline’ and ‘rect’.

canvas

A surface onto which graphics elements are drawn, which can be real physical media such as a display or paper or an abstract surface such as a allocated region of computer memory. See the discussion of the SVG canvas in the chapter on Coordinate Systems, Transformations and Units.

clipping path

A combination of ‘path’, ‘text’ and basic shapes which serve as the outline of a (in the absence of anti-aliasing) 1-bit mask, where everything on the "inside" of the outline is allowed to show through but everything on the outside is masked out. See Clipping paths.

container element

An element which can have graphics elements and other container elements as child elements. Specifically: ‘a’, ‘defs’, ‘glyph’, ‘g’, ‘marker’, ‘mask’, ‘missing-glyph’, ‘pattern’, ‘svg’, ‘switch’ and ‘symbol’.

conditional processing attribute

A conditional processing attribute is one that controls whether or not the element on which it appears is processed. Most elements, but not all, may have conditional processing attributes specified on them. See Conditional processing for details. The conditional processing attributes defined in SVG 1.1 are ‘requiredExtensions’, ‘requiredFeatures’ and ‘systemLanguage’.

core attributes

The core attributes are those attributes that can be specified on any SVG element. See Common attributes. The core attributes are ‘id’, ‘xml:base’, ‘xml:lang’ and ‘xml:space’.

current innermost SVG document fragment

The XML document sub-tree which starts with the most immediate ancestor ‘svg’ element of a given SVG element.

current SVG document fragment

The XML document sub-tree which starts with the outermost ancestor ‘svg’ element of a given SVG element, with the requirement that all container elements between the outermost ‘svg’ and this element are all elements in the SVG language.

current transformation matrix (CTM)

Transformation matrices define the mathematical mapping from one coordinate system into another using a 3x3 matrix using the equation [x' y' 1] = [x y 1] * matrix. The current transformation matrix (CTM) defines the mapping from the user coordinate system into the viewport coordinate system. See Coordinate system transformations.

descriptive element

An element which provides supplementary descriptive information about its parent. Specifically, the following elements are descriptive elements: ‘desc’, ‘metadata’ and ‘title’.

document event attribute

A document event attribute is an event attribute that specifies script to run for a particular document-wide event. See Document-level event attributes. The document event attributes are ‘onabort’, ‘onerror’, ‘onresize’, ‘onscroll’, ‘onunload’ and ‘onzoom’.

event attribute

An event attribute is one that specifies some script to run when an event of a certain type is dispatched to the element on which the attribute is specified. See Event attributes.

fill

The operation of painting the interior of a shape or the interior of the character glyphs in a text string.

filter primitive attributes

The filter primitive attributes is the set of attributes that are common to all filter primitive elements. They are ‘height’, ‘result’, ‘width’, ‘x’ and ‘y’.

filter primitive element

A filter primitive element is one that can be used as a child of a ‘filter’ element to specify a node in the filter graph. The following elements are the filter primitive elements defined in SVG 1.1: ‘feBlend’, ‘feColorMatrix’, ‘feComponentTransfer’, ‘feComposite’, ‘feConvolveMatrix’, ‘feDiffuseLighting’, ‘feDisplacementMap’, ‘feFlood’, ‘feGaussianBlur’, ‘feImage’, ‘feMerge’, ‘feMorphology’, ‘feOffset’, ‘feSpecularLighting’, ‘feTile’ and ‘feTurbulence’.

font

A font represents an organized collection of glyphs in which the various glyph representations will share a common look or styling such that, when a string of characters is rendered together, the result is highly legible, conveys a particular artistic style and provides consistent inter-character alignment and spacing.

glyph

A glyph represents a unit of rendered content within a font. Often, there is a one-to-one correspondence between characters to be drawn and corresponding glyphs (e.g., often, the character "A" is rendered using a single glyph), but other times multiple glyphs are used to render a single character (e.g., use of accents) or a single glyph can be used to render multiple characters (e.g., ligatures). Typically, a glyph is defined by one or more shapes such as a path, possibly with additional information such as rendering hints that help a font engine to produce legible text in small sizes.

gradient element

A gradient element is one that defines a gradient paint server. SVG 1.1 defines the following gradient elements: ‘linearGradient’ and ‘radialGradient’.

graphical event attribute

A graphical event attribute is an event attribute that specifies script to run for a particular user interaction event. See Event attributes on graphics and container elements. The graphical event attributes are ‘onactivate’, ‘onclick’, ‘onfocusin’, ‘onfocusout’, ‘onload’, ‘onmousedown’, ‘onmousemove’, ‘onmouseout’, ‘onmouseover’ and ‘onmouseup’.

graphics element

One of the element types that can cause graphics to be drawn onto the target canvas. Specifically: ‘circle’, ‘ellipse’, ‘image’, ‘line’, ‘path’, ‘polygon’, ‘polyline’, ‘rect’, ‘text’ and ‘use’.

graphics referencing element

A graphics element which uses a reference to a different document or element as the source of its graphical content. Specifically: ‘image’ and ‘use’.

hit-testing

The process of determining whether a pointer intersects a given graphics element. Hit-testing is used in determining which element to dispatch a mouse event to, which might be done in response to the user moving the pointing device, or by changes in the position, shape and other attributes of elements in the document. Hit-testing is also known as hit detection or picking. See hit-testing and processing order for user interface events and the definition of the ‘pointer-events’ property.

IRI reference

An IRI reference is an Internationalized Resource Identifier with an optional fragment identifier, as defined in Internationalized Resource Identifiers [RFC3987]. An IRI reference serves as a reference to a resource or (with a fragment identifier) to a secondary resource. See References and the ‘defs’ element.

light source element

A light source element is one that can specify light source information for an ‘feDiffuseLighting’ or ‘feSpecularLighting’ element. The following light source elements are defined in SVG 1.1: ‘feDistantLight’, ‘fePointLight’ and ‘feSpotLight’.

local IRI reference

An Internationalized Resource Identifier [RFC3987] that does not include an <absoluteIRI> or <relativeIRI> and thus represents a reference to an element within the current document. See References and the ‘defs’ element.

mask

A container element which can contain graphics elements or other container elements which define a set of graphics that is to be used as a semi-transparent mask for compositing foreground objects into the current background. See Masks.

non-local IRI reference

An Internationalized Resource Identifier [RFC3987] that includes an <absoluteIRI> or <relativeIRI> and thus (usually) represents a reference to a different document or an element within a different document. See References and the ‘defs’ element.

outermost svg element

The furthest ‘svg’ ancestor element that remains in the current SVG document fragment.

paint

A paint represents a way of putting color values onto the canvas. A paint might consist of both color values and associated alpha values which control the blending of colors against already existing color values on the canvas. SVG supports three types of built-in paint: color, gradients and patterns.

presentation attribute

An XML attribute on an SVG element which specifies a value for a given property for that element. See Styling. Note that although any property may be specified on any element, not all properties will apply to (affect the rendering of) a given element. The definition of each property states to what set of elements it applies.

property

A parameter that helps specify how a document should be rendered. A complete list of SVG's properties can be found in Property Index. Properties are assigned to elements in the SVG language either by presentation attributes on elements in the SVG language or by using a styling language such as CSS [CSS2]. See Styling.

rootmost ‘svg’ element

The rootmost ‘svg’ element is the furthest ‘svg’ ancestor element that does not exit an SVG context. See also SVG document fragment.

shape

A graphics element that is defined by some combination of straight lines and curves. Specifically: ‘path’, ‘rect’, ‘circle’, ‘ellipse’, ‘line’, ‘polyline’ and ‘polygon’.

stroke

The operation of painting the outline of a shape or the outline of character glyphs in a text string.

structural element

The structural elements are those which define the primary structure of an SVG document. Specifically, the following elements are structural elements: ‘defs’, ‘g’, ‘svg’, ‘symbol’ and ‘use’.

SVG canvas

The canvas onto which the SVG content is rendered. See the discussion of the SVG canvas in the chapter on Coordinate Systems, Transformations and Units.

SVG context

An SVG context is a document fragment where all elements within the fragment must be subject to processing by an SVG user agent according to the rules in this specification.

If SVG content is embedded inline within parent XML (such as XHTML), the SVG context does not include the ancestors above the rootmost ‘svg’ element. If the SVG content contains any ‘foreignObject’ elements which in turn contain non-SVG content, the SVG context does not include the contents of the ‘foreignObject’ elements.

SVG document fragment

The XML document sub-tree which starts with an ‘svg’ element. An SVG document fragment can consist of a stand-alone SVG document, or a fragment of a parent XML document enclosed by an ‘svg’ element. When an ‘svg’ element is a descendant of another ‘svg’ element, there are two SVG document fragments, one for each ‘svg’ element. (One SVG document fragment is contained within another SVG document fragment.)

SVG user agent

An SVG user agent is a user agent that is able to retrieve and render SVG content.

SVG viewport

The viewport within the SVG canvas which defines the rectangular region into which SVG content is rendered. See the discussion of the SVG viewport in the chapter on Coordinate Systems, Transformations and Units.

text content element

A text content element is an SVG element that causes a text string to be rendered onto the canvas. The SVG 1.1 text content elements are the following: ‘altGlyph’, ‘textPath’, ‘text’, ‘tref’ and ‘tspan’

text content child element

A text content child element is a text content element that is allowed as a descendant of another text content element. In SVG 1.1, the text content child elements are the following: ‘altGlyph’, ‘textPath’, ‘tref’ and ‘tspan’

text content block element

A text content block element is a text content element that serves as a standalone element for a unit of text, and which may optionally contain certain child text content elements (e.g. ‘tspan’). .

transformation

A modification of the current transformation matrix (CTM) by providing a supplemental transformation in the form of a set of simple transformations specifications (such as scaling, rotation or translation) and/or one or more transformation matrices. See Coordinate system transformations.

transformation matrix

Transformation matrices define the mathematical mapping from one coordinate system into another using a 3x3 matrix using the equation [x' y' 1] = [x y 1] * matrix. See current transformation matrix (CTM) and Coordinate system transformations.

user agent

The general definition of a user agent is an application that retrieves and renders Web content, including text, graphics, sounds, video, images, and other content types. A user agent may require additional user agents that handle some types of content. For instance, a browser may run a separate program or plug-in to render sound or video. User agents include graphical desktop browsers, multimedia players, text browsers, voice browsers, and assistive technologies such as screen readers, screen magnifiers, speech synthesizers, onscreen keyboards, and voice input software.

A "user agent" may or may not have the ability to retrieve and render SVG content; however, an "SVG user agent" retrieves and renders SVG content.

user coordinate system

In general, a coordinate system defines locations and distances on the current canvas. The current user coordinate system is the coordinate system that is currently active and which is used to define how coordinates and lengths are located and computed, respectively, on the current canvas. See initial user coordinate system and Coordinate system transformations.

user space

A synonym for user coordinate system.

user units

A coordinate value or length expressed in user units represents a coordinate value or length in the current user coordinate system. Thus, 10 user units represents a length of 10 units in the current user coordinate system.

viewport

A rectangular region within the current canvas onto which graphics elements are to be rendered. See the discussion of the SVG viewport in the chapter on Coordinate Systems, Transformations and Units.

viewport coordinate system

In general, a coordinate system defines locations and distances on the current canvas. The viewport coordinate system is the coordinate system that is active at the start of processing of an ‘svg’ element, before processing the optional ‘viewBox’ attribute. In the case of an SVG document fragment that is embedded within a parent document which uses CSS to manage its layout, then the viewport coordinate system will have the same orientation and lengths as in CSS, with the origin at the top-left on the viewport. See The initial viewport and Establishing a new viewport.

viewport space

A synonym for viewport coordinate system.

viewport units

A coordinate value or length expressed in viewport units represents a coordinate value or length in the viewport coordinate system. Thus, 10 viewport units represents a length of 10 units in the viewport coordinate system.

XLink attributes

The XLink attributes are the seven attributes defined in the XML Linking Language specification [XLINK], which are used on various SVG elements that can reference resources. The most import XLink attribute is ‘xlink:href’, whose definition can be found on each element that allows it. The remaining XLink attributes are ‘xlink:type’, ‘xlink:role’, ‘xlink:arcrole’, ‘xlink:title’, ‘xlink:show’ and ‘xlink:actuate’.

2 Concepts

Contents

• 2.1 Explaining the name: SVG
• 2.2 Important SVG concepts
• 2.3 Options for using SVG in Web pages

2.1 Explaining the name: SVG

SVG stands for Scalable Vector Graphics, an XML grammar for stylable graphics, usable as an XML namespace.

Scalable

To be scalable means to increase or decrease uniformly. In terms of graphics, scalable means not being limited to a single, fixed, pixel size. On the Web, scalable means that a particular technology can grow to a large number of files, a large number of users, a wide variety of applications. SVG, being a graphics technology for the Web, is scalable in both senses of the word.

SVG graphics are scalable to different display resolutions, so that for example printed output uses the full resolution of the printer and can be displayed at the same size on screens of different resolutions. The same SVG graphic can be placed at different sizes on the same Web page, and re-used at different sizes on different pages. SVG graphics can be magnified to see fine detail, or to aid those with low vision.

SVG graphics are scalable because the same SVG content can be a stand-alone graphic or can be referenced or included inside other SVG graphics, thereby allowing a complex illustration to be built up in parts, perhaps by several people. The symbol, marker and font capabilities promote re-use of graphical components, maximize the advantages of HTTP caching and avoid the need for a centralized registry of approved symbols.

Vector

Vector graphics contain geometric objects such as lines and curves. This gives greater flexibility compared to raster-only formats (such as PNG and JPEG) which have to store information for every pixel of the graphic. Typically, vector formats can also integrate raster images and can combine them with vector information such as clipping paths to produce a complete illustration; SVG is no exception.

Since all modern displays are raster-oriented, the difference between raster-only and vector graphics comes down to where they are rasterized; client side in the case of vector graphics, as opposed to already rasterized on the server. SVG gives control over the rasterization process, for example to allow anti-aliased artwork without the ugly aliasing typical of low quality vector implementations. SVG also provides client-side raster filter effects, so that moving to a vector format does not mean the loss of popular effects such as soft drop shadows.

Graphics

Most existing XML grammars represent either textual information, or represent raw data such as financial information. They typically provide only rudimentary graphical capabilities, often less capable than the HTML 'img' element. SVG fills a gap in the market by providing a rich, structured description of vector and mixed vector/raster graphics; it can be used stand-alone, or as an XML namespace with other grammars.

XML

XML, a for structured information exchange, has become extremely popular and is both widely and reliably implemented. By being written in XML, SVG builds on this strong foundation and gains many advantages such as a sound basis for internationalization, powerful structuring capability, an object model, and so on. By building on existing, cleanly-implemented specifications, XML-based grammars are open to implementation without a huge reverse engineering effort.

Namespace

It is certainly useful to have a stand-alone, SVG-only viewer. But SVG is also intended to be used as one component in a multi-namespace XML application. This multiplies the power of each of the namespaces used, to allow innovative new content to be created. For example, SVG graphics may be included in a document which uses any text-oriented XML namespace - including XHTML. A scientific document, for example, might also use MathML for mathematics in the document. The combination of SVG and SMIL leads to interesting, time based, graphically rich presentations.

SVG is a good, general-purpose component for any multi-namespace grammar that needs to use graphics.

Stylable

The advantages of style sheets in terms of presentational control, flexibility, faster download and improved maintenance are now generally accepted, certainly for use with text. SVG extends this control to the realm of graphics.

The combination of scripting, DOM and CSS is often termed "Dynamic HTML" and is widely used for animation, interactivity and presentational effects. SVG allows the same script-based manipulation of the document tree and the style sheet.

2.2 Important SVG concepts

Graphical Objects

With any XML grammar, consideration has to be given to what exactly is being modelled. For textual formats, modelling is typically at the level of paragraphs and phrases, rather than individual nouns, adverbs, or phonemes. Similarly, SVG models graphics at the level of graphical objects rather than individual points.

SVG provides a general path element, which can be used to create a huge variety of graphical objects, and also provides common basic shapes such as rectangles and ellipses. These are convenient for hand coding and may be used in the same ways as the more general path element. SVG provides fine control over the coordinate system in which graphical objects are defined and the transformations that will be applied during rendering.

Symbols

It would have been possible to define some standard symbols that SVG would provide. But which ones? There would always be additional symbols for electronics, cartography, flowcharts, etc., that people would need that were not provided until the "next version". SVG allows users to create, re-use and share their own symbols without requiring a centralized registry. Communities of users can create and refine the symbols that they need, without having to ask a committee. Designers can be sure exactly of the graphical appearance of the symbols they use and not have to worry about unsupported symbols.

Symbols may be used at different sizes and orientations, and can be restyled to fit in with the rest of the graphical composition.

Raster Effects

Many existing Web graphics use the filtering operations found in paint packages to create blurs, shadows, lighting effects and so on. With the client-side rasterization used with vector formats, such effects might be thought impossible. SVG allows the declarative specification of filters, either singly or in combination, which can be applied on the client side when the SVG is rendered. These are specified in such a way that the graphics are still scalable and displayable at different resolutions.

Fonts

Graphically rich material is often highly dependent on the particular font used and the exact spacing of the glyphs. In many cases, designers convert text to outlines to avoid any font substitution problems. This means that the original text is not present and thus searchability and accessibility suffer. In response to feedback from designers, SVG includes font elements so that both text and graphical appearance are preserved.

Animation

Animation can be produced via script-based manipulation of the document, but scripts are difficult to edit and interchange between authoring tools is harder. Again in response to feedback from the design community, SVG includes declarative animation elements which were designed collaboratively by the SVG and SYMM Working Groups. This allows the animated effects common in existing Web graphics to be expressed in SVG.

2.3 Options for using SVG in Web pages

There are a variety of ways in which SVG content can be included within a Web page. Here are some of the options:

A stand-alone SVG Web page

In this case, an SVG document (i.e., a Web resource whose MIME type is "image/svg+xml") is loaded directly into a user agent such as a Web browser. The SVG document is the Web page that is presented to the user.

Embedding by reference

In this case, a parent Web page references a separately stored SVG document and specifies that the given SVG document should be embedded as a component of the parent Web page. For HTML or XHTML, here are three options:

• The HTML/XHTML ‘img’ element is the most common method for using graphics in HTML pages. For faster display, the width and height of the image can be given as attributes. One attribute that is required is ‘alt’, used to give an alternate textual string for people browsing with images off, or who cannot see the images. The string cannot contain any markup. A ‘longdesc’ attribute lets you point to a longer description - often in HTML - which can have markup and richer formatting.
• The HTML/XHTML ‘object’ element can contain other elements nested within it, unlike ‘img’, which is empty. This means that several different formats can be offered, using nested ‘object’ elements, with a final textual alternative (including markup, links, etc). The outermost element which can be displayed will be used.
• The HTML/XHTML ‘applet’ element which can invoke a Java applet to view SVG content within the given Web page. These applets can do many things, but a common task is to use them to display images, particularly ones in unusual formats or which need to be presented under the control of a program for some other reason.

Embedding inline

In this case, SVG content is embedded inline directly within the parent Web page. An example is an XHTML Web page with an SVG document fragment textually included within the XHTML.

External link, using the HTML ‘a’ element

This allows any stand-alone SVG viewer to be used, which can (but need not) be a different program to that used to display HTML. This option typically is used for unusual image formats.

Referenced from a CSS or XSL property

When a user agent supports CSS-styled XML content [CSS2] or XSL [XSL] and the user agent is a Conforming SVG Viewer, then that user agent must support the ability to reference SVG resources wherever CSS or XSL properties allow for the referencing of raster images, including the ability to tile SVG graphics wherever necessary and the ability to composite the SVG into the background if it has transparent portions. Examples include the ‘background-image’ and ‘list-style-image’ properties ([CSS2], sections 14.2.1 and 12.6.2) that are included in both CSS and XSL.

3 Rendering Model

Contents

• 3.1 Introduction
• 3.2 The painters model
• 3.3 Rendering Order
• 3.4 How groups are rendered
• 3.5 How elements are rendered
• 3.6 Types of graphics elements
  • 3.6.1 Painting shapes and text
  • 3.6.2 Painting raster images
• 3.7 Filtering painted regions
• 3.8 Clipping, masking and object opacity
• 3.9 Parent Compositing

3.1 Introduction

Implementations of SVG are expected to behave as though they implement a rendering (or imaging) model corresponding to the one described in this chapter. A real implementation is not required to implement the model in this way, but the result on any device supported by the implementation shall match that described by this model.

The appendix on conformance requirements describes the extent to which an actual implementation may deviate from this description. In practice an actual implementation will deviate slightly because of limitations of the output device (e.g. only a limited range of colors might be supported) and because of practical limitations in implementing a precise mathematical model (e.g. for realistic performance curves are approximated by straight lines, the approximation need only be sufficiently precise to match the conformance requirements).

3.2 The painters model

SVG uses a "painters model" of rendering. Paint is applied in successive operations to the output device such that each operation paints over some area of the output device. When the area overlaps a previously painted area the new paint partially or completely obscures the old. When the paint is not completely opaque the result on the output device is defined by the (mathematical) rules for compositing described under Alpha Blending.

3.3 Rendering Order

Elements in an SVG document fragment have an implicit drawing order, with the first elements in the SVG document fragment getting "painted" first. Subsequent elements are painted on top of previously painted elements.

3.4 How groups are rendered

Grouping elements such as the ‘g’ element (see container elements) have the effect of producing a temporary separate canvas initialized to transparent black onto which child elements are painted. Upon the completion of the group, any filter effects specified for the group are applied to create a modified temporary canvas. The modified temporary canvas is composited into the background, taking into account any group-level masking and opacity settings on the group.

3.5 How elements are rendered

Individual graphics elements are rendered as if each graphics element represented its own group; thus, the effect is as if a temporary separate canvas is created for each graphics element. The element is first painted onto the temporary canvas (see Painting shapes and text and Painting raster images below). Then any filter effects specified for the graphics element are applied to create a modified temporary canvas. The modified temporary canvas is then composited into the background, taking into account any clipping, masking and object opacity settings on the graphics element.

3.6 Types of graphics elements

SVG supports three fundamental types of graphics elements that can be rendered onto the canvas:

• Shapes, which represent some combination of straight line and curves
• Text, which represents some combination of character glyphs
• Raster images, which represent an array of values that specify the paint color and opacity (often termed alpha) at a series of points on a rectangular grid. (SVG requires support for specified raster image formats under conformance requirements.)

3.6.1 Painting shapes and text

Shapes and text can be filled (i.e., apply paint to the interior of the shape) and stroked (i.e., apply paint along the outline of the shape). A stroke operation is centered on the outline of the object; thus, in effect, half of the paint falls on the interior of the shape and half of the paint falls outside of the shape.

For certain types of shapes, marker symbols (which themselves can consist of any combination of shapes, text and images) can be drawn at selected vertices. Each marker symbol is painted as if its graphical content were expanded into the SVG document tree just after the shape object which is using the given marker symbol. The graphical contents of a marker symbol are rendered using the same methods as graphics elements. Marker symbols are not applicable to text.

The fill is painted first, then the stroke, and then the marker symbols. The marker symbols are rendered in order along the outline of the shape, from the start of the shape to the end of the shape.

Each fill and stroke operation has its own opacity settings; thus, you can fill and/or stroke a shape with a semi-transparently drawn solid color, with different opacity values for the fill and stroke operations.

The fill and stroke operations are entirely independent painting operations; thus, if you both fill and stroke a shape, half of the stroke will be painted on top of part of the fill.

SVG supports the following built-in types of paint which can be used in fill and stroke operations:

• Solid color
• Gradients (linear and radial)
• Patterns

3.6.2 Painting raster images

When a raster image is rendered, the original samples are "resampled" using standard algorithms to produce samples at the positions required on the output device. Resampling requirements are discussed under conformance requirements.

3.7 Filtering painted regions

SVG allows any painting operation to be filtered. (See Filter Effects.)

In this case the result must be as though the paint operations had been applied to an intermediate canvas initialized to transparent black, of a size determined by the rules given in Filter Effects then filtered by the processes defined in Filter Effects.

3.8 Clipping, masking and object opacity

SVG allows any painting operation to be limited to a subregion of the output device by clipping and masking. This is described in Clipping, Masking and Compositing.

Clipping uses a path to define a region of the output device to which paint can be applied. Any painting operation executed within the scope of the clipping must be rendered such that only those parts of the device that fall within the clipping region are affected by the painting operation. A clipping path can be thought of as a mask wherein those pixels outside the clipping path are black with an alpha value of zero and those pixels inside the clipping path are white with an alpha value of one. "Within" is defined by the same rules used to determine the interior of a path for painting. The clipping path is typically anti-aliased on low-resolution devices (see ‘shape-rendering’. Clipping is described in Clipping paths.

Masking uses the luminance of the color channels and alpha channel in a referenced SVG element to define a supplemental set of alpha values which are multiplied to the alpha values already present in the graphics to which the mask is applied. Masking is described in Masking.

A supplemental masking operation may also be specified by applying a "global" opacity to a set of rendering operations. In this case the mask is infinite, with a color of white and an alpha channel of the given opacity value. (See the ‘opacity’ property.)

In all cases the SVG implementation must behave as though all painting and filtering is first performed to an intermediate canvas which has been initialized to transparent black. Then, alpha values on the intermediate canvas are multiplied by the implicit alpha values from the clipping path, the alpha values from the mask, and the alpha values from the ‘opacity’ property. The resulting canvas is composited into the background using simple alpha blending. Thus if an area of the output device is painted with a group opacity of 50% using opaque red paint followed by opaque green paint the result is as though it had been painted with just 50% opaque green paint. This is because the opaque green paint completely obscures the red paint on the intermediate canvas before the intermediate as a whole is rendered onto the output device.

3.9 Parent Compositing

SVG document fragments can be semi-opaque. In many environments (e.g., Web browsers), the SVG document fragment has a final compositing step where the document as a whole is blended translucently into the background canvas.

5 Document Structure

Contents

• 5.1 Defining an SVG document fragment: the ‘svg’ element
  • 5.1.1 Overview
  • 5.1.2 The ‘svg’ element
• 5.2 Grouping: the ‘g’ element
  • 5.2.1 Overview
  • 5.2.2 The ‘g’ element
• 5.3 Defining content for reuse, and the ‘defs’ element
  • 5.3.1 Overview
  • 5.3.2 The ‘defs’ element
• 5.4 The ‘desc’ and ‘title’ elements
• 5.5 The ‘symbol’ element
• 5.6 The ‘use’ element
• 5.7 The ‘image’ element
• 5.8 Conditional processing
  • 5.8.1 Conditional processing overview
  • 5.8.2 The ‘switch’ element
  • 5.8.3 The ‘requiredFeatures’ attribute
  • 5.8.4 The ‘requiredExtensions’ attribute
  • 5.8.5 The ‘systemLanguage’ attribute
  • 5.8.6 Applicability of test attributes
• 5.9 Specifying whether external resources are required for proper rendering
• 5.10 Common attributes
  • 5.10.1 Attributes common to all elements: ‘id’ and ‘xml:base’
  • 5.10.2 The ‘xml:lang’ and ‘xml:space’ attributes
• 5.11 DOM interfaces
  • 5.11.1 Interface SVGDocument
  • 5.11.2 Interface SVGSVGElement
  • 5.11.3 Interface SVGGElement
  • 5.11.4 Interface SVGDefsElement
  • 5.11.5 Interface SVGDescElement
  • 5.11.6 Interface SVGTitleElement
  • 5.11.7 Interface SVGSymbolElement
  • 5.11.8 Interface SVGUseElement
  • 5.11.9 Interface SVGElementInstance
  • 5.11.10 Interface SVGElementInstanceList
  • 5.11.11 Interface SVGImageElement
  • 5.11.12 Interface SVGSwitchElement
  • 5.11.13 Interface GetSVGDocument

5.1 Defining an SVG document fragment: the ‘svg’ element

5.1.1 Overview

An SVG document fragment consists of any number of SVG elements contained within an ‘svg’ element.

An SVG document fragment can range from an empty fragment (i.e., no content inside of the ‘svg’ element), to a very simple SVG document fragment containing a single SVG graphics element such as a ‘rect’, to a complex, deeply nested collection of container elements and graphics elements.

An SVG document fragment can stand by itself as a self-contained file or resource, in which case the SVG document fragment is an SVG document, or it can be embedded inline as a fragment within a parent XML document.

The following example shows simple SVG content embedded inline as a fragment within a parent XML document. Note the use of XML namespaces to indicate that the ‘svg’ and ‘ellipse’ elements belong to the SVG namespace:

<?xml version="1.0" standalone="yes"?>
<parent xmlns="http://example.org"
        xmlns:svg="http://www.w3.org/2000/svg">
   <!-- parent contents here -->
   <svg:svg width="4cm" height="8cm" version="1.1">
      <svg:ellipse cx="2cm" cy="4cm" rx="2cm" ry="1cm" />
   </svg:svg>
   <!-- ... -->
</parent>

This example shows a slightly more complex (i.e., it contains multiple rectangles) stand-alone, self-contained SVG document:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="5cm" height="4cm" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
  <desc>Four separate rectangles
  </desc>
    <rect x="0.5cm" y="0.5cm" width="2cm" height="1cm"/>
    <rect x="0.5cm" y="2cm" width="1cm" height="1.5cm"/>
    <rect x="3cm" y="0.5cm" width="1.5cm" height="2cm"/>
    <rect x="3.5cm" y="3cm" width="1cm" height="0.5cm"/>

  <!-- Show outline of canvas using 'rect' element -->
  <rect x=".01cm" y=".01cm" width="4.98cm" height="3.98cm"
        fill="none" stroke="blue" stroke-width=".02cm" />

</svg>

‘svg’ elements can appear in the middle of SVG content. This is the mechanism by which SVG document fragments can be embedded within other SVG document fragments.

Another use for ‘svg’ elements within the middle of SVG content is to establish a new viewport. (See Establishing a new viewport.)

In all cases, for compliance with the Namespaces in XML Recommendation [XML-NS], an SVG namespace declaration must be provided so that all SVG elements are identified as belonging to the SVG namespace. The following are possible ways to provide a namespace declaration. An ‘xmlns’ attribute without a namespace prefix could be specified on an ‘svg’ element, which means that SVG is the default namespace for all elements within the scope of the element with the ‘xmlns’ attribute:

<svg xmlns="http://www.w3.org/2000/svg" …>
  <rect …/>
</svg>

If a namespace prefix is specified on the ‘xmlns’ attribute (e.g., xmlns:svg="http://www.w3.org/2000/svg"), then the corresponding namespace is not the default namespace, so an explicit namespace prefix must be assigned to the elements:

<svg:svg xmlns:svg="http://www.w3.org/2000/svg" …>
  <svg:rect …/>
</svg:svg>

Namespace prefixes can be specified on ancestor elements (illustrated in the above example). For more information, refer to the Namespaces in XML Recommendation [XML-NS].

5.1.2 The ‘svg’ element

If an SVG document is likely to be referenced as a component of another document, the author will often want to include a ‘viewBox’ attribute on the outermost svg element of the referenced document. This attribute provides a convenient way to design SVG documents to scale-to-fit into an arbitrary viewport.

5.2 Grouping: the ‘g’ element

5.2.1 Overview

The ‘g’ element is a container element for grouping together related graphics elements.

Grouping constructs, when used in conjunction with the ‘desc’ and ‘title’ elements, provide information about document structure and semantics. Documents that are rich in structure may be rendered graphically, as speech, or as braille, and thus promote accessibility.

A group of elements, as well as individual objects, can be given a name using the ‘id’ attribute. Named groups are needed for several purposes such as animation and re-usable objects.

An example:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
     version="1.1" width="5cm" height="5cm">
  <desc>Two groups, each of two rectangles</desc>
  <g id="group1" fill="red">
    <rect x="1cm" y="1cm" width="1cm" height="1cm"/>
    <rect x="3cm" y="1cm" width="1cm" height="1cm"/>
  </g>
  <g id="group2" fill="blue">
    <rect x="1cm" y="3cm" width="1cm" height="1cm"/>
    <rect x="3cm" y="3cm" width="1cm" height="1cm"/>
  </g>

  <!-- Show outline of canvas using 'rect' element -->
  <rect x=".01cm" y=".01cm" width="4.98cm" height="4.98cm"
        fill="none" stroke="blue" stroke-width=".02cm"/>
</svg>

View this example as SVG (SVG-enabled browsers only)

A ‘g’ element can contain other ‘g’ elements nested within it, to an arbitrary depth. Thus, the following is possible:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
     version="1.1" width="4in" height="3in">
  <desc>Groups can nest</desc>
  <g>
     <g>
       <g>
       </g>
     </g>
   </g>
</svg>

Any element that is not contained within a ‘g’ is treated (at least conceptually) as if it were in its own group.

5.2.2 The ‘g’ element

5.3 Defining content for reuse, and the ‘defs’ element

5.3.1 Overview

SVG allows graphical objects to be defined for later reuse. To do this, it makes extensive use of IRI references [RFC3987] to these other objects. For example, to fill a rectangle with a linear gradient, you first define a ‘linearGradient’ element and give it an ID, as in:

<linearGradient id="MyGradient">...</linearGradient>

You then reference the linear gradient as the value of the ‘fill’ property for the rectangle, as in:

<rect style="fill:url(#MyGradient)"/>

Some types of element, such as gradients, will not by themselves produce a graphical result. They can therefore be placed anywhere convenient. However, sometimes it is desired to define a graphical object and prevent it from being directly rendered. it is only there to be referenced elsewhere. To do this, and to allow convenient grouping defined content, SVG provides the ‘defs’ element.

It is recommended that, wherever possible, referenced elements be defined inside of a ‘defs’ element. Among the elements that are always referenced: ‘altGlyphDef’, ‘clipPath’, ‘cursor’, ‘filter’, ‘linearGradient’, ‘marker’, ‘mask’, ‘pattern’, ‘radialGradient’ and ‘symbol’. Defining these elements inside of a ‘defs’ element promotes understandability of the SVG content and thus promotes accessibility.

5.3.2 The ‘defs’ element

The ‘defs’ element is a container element for referenced elements. For understandability and accessibility reasons, it is recommended that, whenever possible, referenced elements be defined inside of a ‘defs’.

The content model for ‘defs’ is the same as for the ‘g’ element; thus, any element that can be a child of a ‘g’ can also be a child of a ‘defs’, and vice versa.

Elements that are descendants of a ‘defs’ are not rendered directly; they are prevented from becoming part of the rendering tree just as if the ‘defs’ element were a ‘g’ element and the ‘display’ property were set to none. Note, however, that the descendants of a ‘defs’ are always present in the source tree and thus can always be referenced by other elements; thus, the value of the ‘display’ property on the ‘defs’ element or any of its descendants does not prevent those elements from being referenced by other elements.

To provide some SVG user agents with an opportunity to implement efficient implementations in streaming environments, creators of SVG content are encouraged to place all elements which are targets of local IRI references within a ‘defs’ element which is a direct child of one of the ancestors of the referencing element. For example:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="8cm" height="3cm"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <desc>Local URI references within ancestor's 'defs' element.</desc>
  <defs>
    <linearGradient id="Gradient01">
      <stop offset="20%" stop-color="#39F" />
      <stop offset="90%" stop-color="#F3F" />
    </linearGradient>
  </defs>
  <rect x="1cm" y="1cm" width="6cm" height="1cm" 
        fill="url(#Gradient01)"  />

  <!-- Show outline of canvas using 'rect' element -->
  <rect x=".01cm" y=".01cm" width="7.98cm" height="2.98cm"
        fill="none" stroke="blue" stroke-width=".02cm" />

</svg>

View this example as SVG (SVG-enabled browsers only)

In the document above, the linear gradient is defined within a ‘defs’ element which is the direct child of the ‘svg’ element, which in turn is an ancestor of the ‘rect’ element which references the linear gradient. Thus, the above document conforms to the guideline.

5.4 The ‘desc’ and ‘title’ elements

Each container element or graphics element in an SVG drawing can supply a ‘desc’ and/or a ‘title’ description string where the description is text-only. When the current SVG document fragment is rendered as SVG on visual media, ‘desc’ and ‘title’ elements are not rendered as part of the graphics. User agents may, however, for example, display the ‘title’ element as a tooltip, as the pointing device moves over particular elements. Alternate presentations are possible, both visual and aural, which display the ‘desc’ and ‘title’ elements but do not display ‘path’ elements or other graphics elements. This is readily achieved by using a different (perhaps user) style sheet. For deep hierarchies, and for following ‘use’ element references, it is sometimes desirable to allow the user to control how deep they drill down into descriptive text.

In conforming SVG document fragments, any ‘title’ element should be the first child element of its parent. Note that those implementations that do use ‘title’ to display a tooltip often will only do so if the ‘title’ is indeed the first child element of its parent.

The following is an example. In typical operation, the SVG user agent would not render the ‘desc’ and ‘title’ elements but would render the remaining contents of the ‘g’ element.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg SYSTEM "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
     version="1.1" width="4in" height="3in">
  <g>
    <title>Company sales by region</title>
    <desc>
      This is a bar chart which shows 
      company sales by region.
    </desc>
    <!-- Bar chart defined as vector data -->
  </g>
</svg>

Description and title elements can contain marked-up text from other namespaces. Here is an example:

<?xml version="1.0" standalone="yes"?>
<svg xmlns="http://www.w3.org/2000/svg"
     version="1.1" width="4in" height="3in">
  <desc xmlns:mydoc="http://example.org/mydoc">
    <mydoc:title>This is an example SVG file</mydoc:title>
    <mydoc:para>The global description uses markup from the 
      <mydoc:emph>mydoc</mydoc:emph> namespace.</mydoc:para>
  </desc>
  <g>
    <!-- the picture goes here -->
  </g>
</svg>

Authors should always provide a ‘title’ child element to the outermost svg element within a stand-alone SVG document. The ‘title’ child element to an ‘svg’ element serves the purposes of identifying the content of the given SVG document fragment. Since users often consult documents out of context, authors should provide context-rich titles. Thus, instead of a title such as "Introduction", which doesn't provide much contextual background, authors should supply a title such as "Introduction to Medieval Bee-Keeping" instead. For reasons of accessibility, user agents should always make the content of the ‘title’ child element to the outermost svg element available to users. The mechanism for doing so depends on the user agent (e.g., as a caption, spoken).

The DTD definitions of many of SVG's elements (particularly, container and text elements) place no restriction on the placement or number of the ‘desc’ and ‘title’ sub-elements. This flexibility is only present so that there will be a consistent content model for container elements, because some container elements in SVG allow for mixed content, and because the mixed content rules for XML ([XML10], section 3.2.2) do not permit the desired restrictions. Representations of future versions of the SVG language might use more expressive representations than DTDs which allow for more restrictive mixed content rules. It is strongly recommended that at most one ‘desc’ and at most one ‘title’ element appear as a child of any particular element, and that these elements appear before any other child elements (except possibly ‘metadata’ elements) or character data content. If user agents need to choose among multiple ‘desc’ or ‘title’ elements for processing (e.g., to decide which string to use for a tooltip), the user agent shall choose the first one.

5.5 The ‘symbol’ element

The ‘symbol’ element is used to define graphical template objects which can be instantiated by a ‘use’ element.

The use of ‘symbol’ elements for graphics that are used multiple times in the same document adds structure and semantics. Documents that are rich in structure may be rendered graphically, as speech, or as braille, and thus promote accessibility.

The key distinctions between a ‘symbol’ and a ‘g’ are:

• A ‘symbol’ element itself is not rendered. Only instances of a ‘symbol’ element (i.e., a reference to a ‘symbol’ by a ‘use’ element) are rendered.
• A ‘symbol’ element has attributes ‘viewBox’ and ‘preserveAspectRatio’ which allow a ‘symbol’ to scale-to-fit within a rectangular viewport defined by the referencing ‘use’ element.

Closely related to the ‘symbol’ element are the ‘marker’ and ‘pattern’ elements.

‘symbol’ elements are never rendered directly; their only usage is as something that can be referenced using the ‘use’ element. The ‘display’ property does not apply to the ‘symbol’ element; thus, ‘symbol’ elements are not directly rendered even if the ‘display’ property is set to a value other than none, and ‘symbol’ elements are available for referencing even when the ‘display’ property on the ‘symbol’ element or any of its ancestors is set to none.

5.6 The ‘use’ element

Any ‘svg’, ‘symbol’, ‘g’, graphics element or other ‘use’ is potentially a template object that can be re-used (i.e., "instanced") in the SVG document via a ‘use’ element. The ‘use’ element references another element and indicates that the graphical contents of that element is included/drawn at that given point in the document.

Unlike ‘image’, the ‘use’ element cannot reference entire files.

The ‘use’ element has optional attributes ‘x’, ‘y’, ‘width’ and ‘height’ which are used to map the graphical contents of the referenced element onto a rectangular region within the current coordinate system.

The effect of a ‘use’ element is as if the contents of the referenced element were deeply cloned into a separate non-exposed DOM tree which had the ‘use’ element as its parent and all of the ‘use’ element's ancestors as its higher-level ancestors. Because the cloned DOM tree is non-exposed, the SVG Document Object Model (DOM) only contains the ‘use’ element and its attributes. The SVG DOM does not show the referenced element's contents as children of ‘use’ element.

For user agents that support Styling with CSS, the conceptual deep cloning of the referenced element into a non-exposed DOM tree also copies any property values resulting from the CSS cascade ([CSS2], chapter 6) on the referenced element and its contents. CSS2 selectors can be applied to the original (i.e., referenced) elements because they are part of the formal document structure. CSS2 selectors cannot be applied to the (conceptually) cloned DOM tree because its contents are not part of the formal document structure.

Property inheritance, however, works as if the referenced element had been textually included as a deeply cloned child of the ‘use’ element. The referenced element inherits properties from the ‘use’ element and the ‘use’ element's ancestors. An instance of a referenced element does not inherit properties from the referenced element's original parents.

If event attributes are assigned to referenced elements, then the actual target for the event will be the SVGElementInstance object within the "instance tree" corresponding to the given referenced element.

The event handling for the non-exposed tree works as if the referenced element had been textually included as a deeply cloned child of the ‘use’ element, except that events are dispatched to the SVGElementInstance objects. The event's target and currentTarget attributes are set to the SVGElementInstance that corresponds to the target and current target elements in the referenced subtree. An event propagates through the exposed and non-exposed portions of the tree in the same manner as it would in the regular document tree: first going from the root element to the ‘use’ element and then through non-exposed tree elements in the capture phase, followed by the target phase at the target of the event, then bubbling back through non-exposed tree to the use element and then back through regular tree to the root element in bubbling phase.

An element and all its corresponding SVGElementInstance objects share an event listener list. The currentTarget attribute of the event can be used to determine through which object an event listener was invoked.

The behavior of the ‘visibility’ property conforms to this model of property inheritance. Thus, specifying 'visibility:hidden' on a ‘use’ element does not guarantee that the referenced content will not be rendered. If the ‘use’ element specifies 'visibility:hidden' and the element it references specifies 'visibility:hidden' or 'visibility:inherit', then that one element will be hidden. However, if the referenced element instead specifies 'visibility:visible', then that element will be visible even if the ‘use’ element specifies 'visibility:hidden'.

Animations on a referenced element will cause the instances to also be animated.

A ‘use’ element has the same visual effect as if the ‘use’ element were replaced by the following generated content:

• If the ‘use’ element references a ‘symbol’ element:
  
  In the generated content, the ‘use’ will be replaced by ‘g’, where all attributes from the ‘use’ element except for ‘x’, ‘y’, ‘width’, ‘height’ and ‘xlink:href’ are transferred to the generated ‘g’ element. An additional transformation translate(x,y) is appended to the end (i.e., right-side) of the ‘transform’ attribute on the generated ‘g’, where x and y represent the values of the ‘x’ and ‘y’ attributes on the ‘use’ element. The referenced ‘symbol’ and its contents are deep-cloned into the generated tree, with the exception that the ‘symbol’ is replaced by an ‘svg’. This generated ‘svg’ will always have explicit values for attributes ‘width’ and ‘height’. If attributes ‘width’ and/or ‘height’ are provided on the ‘use’ element, then these attributes will be transferred to the generated ‘svg’. If attributes ‘width’ and/or ‘height’ are not specified, the generated ‘svg’ element will use values of '100%' for these attributes.
  
  
• If the ‘use’ element references an ‘svg’ element:
  
  In the generated content, the ‘use’ will be replaced by ‘g’, where all attributes from the ‘use’ element except for ‘x’, ‘y’, ‘width’, ‘height’ and ‘xlink:href’ are transferred to the generated ‘g’ element. An additional transformation translate(x,y) is appended to the end (i.e., right-side) of the ‘transform’ attribute on the generated ‘g’, where x and y represent the values of the ‘x’ and ‘y’ attributes on the ‘use’ element. The referenced ‘svg’ and its contents are deep-cloned into the generated tree. If attributes ‘width’ and/or ‘height’ are provided on the ‘use’ element, then these values will override the corresponding attributes on the ‘svg’ in the generated tree.
  
  
• Otherwise:
  
  In the generated content, the ‘use’ will be replaced by ‘g’, where all attributes from the ‘use’ element except for ‘x’, ‘y’, ‘width’, ‘height’ and ‘xlink:href’ are transferred to the generated ‘g’ element. An additional transformation translate(x,y) is appended to the end (i.e., right-side) of the ‘transform’ attribute on the generated ‘g’, where x and y represent the values of the ‘x’ and ‘y’ attributes on the ‘use’ element. The referenced object and its contents are deep-cloned into the generated tree.

For user agents that support Styling with CSS, the generated ‘g’ element carries along with it the "cascaded" property values on the ‘use’ element which result from the CSS cascade ([CSS2], chapter 6). Additionally, the copy (deep clone) of the referenced resource carries along with it the "cascaded" property values resulting from the CSS cascade on the original (i.e., referenced) elements. Thus, the result of various CSS selectors in combination with the ‘class’ and ‘style’ attributes are, in effect, replaced by the functional equivalent of a ‘style’ attribute in the generated content which conveys the "cascaded" property values.

Example Use01 below has a simple ‘use’ on a ‘rect’.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="10cm" height="3cm" viewBox="0 0 100 30" version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <desc>Example Use01 - Simple case of 'use' on a 'rect'</desc>
  <defs>
    <rect id="MyRect" width="60" height="10"/>
  </defs>
  <rect x=".1" y=".1" width="99.8" height="29.8"
        fill="none" stroke="blue" stroke-width=".2" />
  <use x="20" y="10" xlink:href="#MyRect" />
</svg>

Example Use01

View this example as SVG (SVG-enabled browsers only)

The visual effect would be equivalent to the following document:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="10cm" height="3cm" viewBox="0 0 100 30"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <desc>Example Use01-GeneratedContent - Simple case of 'use' on a 'rect'</desc>
  <!-- 'defs' section left out -->

  <rect x=".1" y=".1" width="99.8" height="29.8"
        fill="none" stroke="blue" stroke-width=".2" />

  <!-- Start of generated content. Replaces 'use' -->
  <g transform="translate(20,10)">
    <rect width="60" height="10"/>
  </g>
  <!-- End of generated content -->

</svg>

View this example as SVG (SVG-enabled browsers only)

Example Use02 below has a ‘use’ on a ‘symbol’.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="10cm" height="3cm" viewBox="0 0 100 30" version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <desc>Example Use02 - 'use' on a 'symbol'</desc>
  <defs>
    <symbol id="MySymbol" viewBox="0 0 20 20">
      <desc>MySymbol - four rectangles in a grid</desc>
      <rect x="1" y="1" width="8" height="8"/>
      <rect x="11" y="1" width="8" height="8"/>
      <rect x="1" y="11" width="8" height="8"/>
      <rect x="11" y="11" width="8" height="8"/>
    </symbol>
  </defs>
  <rect x=".1" y=".1" width="99.8" height="29.8"
        fill="none" stroke="blue" stroke-width=".2" />
  <use x="45" y="10" width="10" height="10" 
       xlink:href="#MySymbol" />
</svg>

Example Use02

View this example as SVG (SVG-enabled browsers only)

The visual effect would be equivalent to the following document:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="10cm" height="3cm" viewBox="0 0 100 30"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <desc>Example Use02-GeneratedContent - 'use' on a 'symbol'</desc>

  <!-- 'defs' section left out -->

  <rect x=".1" y=".1" width="99.8" height="29.8"
        fill="none" stroke="blue" stroke-width=".2" />

  <!-- Start of generated content. Replaces 'use' -->
  <g transform="translate(45, 10)" >
    <!-- Start of referenced 'symbol'. 'symbol' replaced by 'svg',
         with x,y,width,height=0,0,100%,100% -->
    <svg width="10" height="10" 
         viewBox="0 0 20 20">
      <rect x="1" y="1" width="8" height="8"/>
      <rect x="11" y="1" width="8" height="8"/>
      <rect x="1" y="11" width="8" height="8"/>
      <rect x="11" y="11" width="8" height="8"/>
    </svg>
    <!-- End of referenced symbol -->
  </g>
  <!-- End of generated content -->

</svg>

View this example as SVG (SVG-enabled browsers only)

Example Use03 illustrates what happens when a ‘use’ has a ‘transform’ attribute.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="10cm" height="3cm" viewBox="0 0 100 30" version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <desc>Example Use03 - 'use' with a 'transform' attribute</desc>
  <defs>
    <rect id="MyRect" x="0" y="0" width="60" height="10"/>
  </defs>
  <rect x=".1" y=".1" width="99.8" height="29.8"
        fill="none" stroke="blue" stroke-width=".2" />
  <use xlink:href="#MyRect"
       transform="translate(20,2.5) rotate(10)" />
</svg>

Example Use03

View this example as SVG (SVG-enabled browsers only)

The visual effect would be equivalent to the following document:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="10cm" height="3cm" viewBox="0 0 100 30"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <desc>Example Use03-GeneratedContent - 'use' with a 'transform' attribute</desc>

  <!-- 'defs' section left out -->

  <rect x=".1" y=".1" width="99.8" height="29.8"
        fill="none" stroke="blue" stroke-width=".2" />

  <!-- Start of generated content. Replaces 'use' -->
  <g transform="translate(20,2.5) rotate(10)">
    <rect x="0" y="0" width="60" height="10"/>
  </g>
  <!-- End of generated content -->

</svg>

View this example as SVG (SVG-enabled browsers only)

Example Use04 illustrates a ‘use’ element with various methods of applying CSS styling.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="12cm" height="3cm" viewBox="0 0 1200 300" version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <desc>Example Use04 - 'use' with CSS styling</desc>
  <defs style=" /* rule 9 */ stroke-miterlimit: 10" >
    <path id="MyPath" d="M300 50 L900 50 L900 250 L300 250"
                     class="MyPathClass"
                     style=" /* rule 10 */ stroke-dasharray:300,100" />
  </defs>
  <style type="text/css">
    <![CDATA[
      /* rule 1 */ #MyUse { fill: blue }
      /* rule 2 */ #MyPath { stroke: red }
      /* rule 3 */ use { fill-opacity: .5 }
      /* rule 4 */ path { stroke-opacity: .5 }
      /* rule 5 */ .MyUseClass { stroke-linecap: round }
      /* rule 6 */ .MyPathClass { stroke-linejoin: bevel }
      /* rule 7 */ use > path { shape-rendering: optimizeQuality }
      /* rule 8 */ g > path { visibility: hidden }
    ]]>
  </style>

  <rect x="0" y="0" width="1200" height="300"
         style="fill:none; stroke:blue; stroke-width:3"/>
  <g style=" /* rule 11 */ stroke-width:40">
    <use id="MyUse" xlink:href="#MyPath" 
         class="MyUseClass"
         style="/* rule 12 */ stroke-dashoffset:50" />
  </g>
</svg>

Example Use04

View this example as SVG (SVG-enabled browsers only)

The visual effect would be equivalent to the following document. Observe that some of the style rules above apply to the generated content (i.e., rules 1-6, 10-12), whereas others do not (i.e., rules 7-9). The rules which do not affect the generated content are:

• Rules 7 and 8: CSS selectors only apply to the formal document tree, not on the generated tree; thus, these selectors will not yield a match.
• Rule 9: The generated tree only inherits from the ancestors of the ‘use’ element and does not inherit from the ancestors of the referenced element; thus, this rule does not affect the generated content.

In the generated content below, the selectors that yield a match have been transferred into inline ‘style’ attributes for illustrative purposes.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="12cm" height="3cm" viewBox="0 0 1200 300"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <desc>Example Use04-GeneratedContent - 'use' with a 'transform' attribute</desc>

  <!-- 'style' and 'defs' sections left out -->

  <rect x="0" y="0" width="1200" height="300"
         style="fill:none; stroke:blue; stroke-width:3"/>
  <g style="/* rule 11 */ stroke-width:40">

    <!-- Start of generated content. Replaces 'use' -->
    <g style="/* rule 1 */ fill:blue;
                 /* rule 3 */ fill-opacity:.5;
                 /* rule 5 */ stroke-linecap:round;
                 /* rule 12 */ stroke-dashoffset:50" >
      <path d="M300 50 L900 50 L900 250 L300 250"
            style="/* rule 2 */ stroke:red; 
                   /* rule 4 */ stroke-opacity:.5; 
                   /* rule 6 */ stroke-linejoin: bevel; 
                   /* rule 10 */ stroke-dasharray:300,100" />
    </g> 
    <!-- End of generated content -->

  </g>
</svg>

View this example as SVG (SVG-enabled browsers only)

When a ‘use’ references another element which is another ‘use’ or whose content contains a ‘use’ element, then the deep cloning approach described above is recursive. However, a set of references that directly or indirectly reference a element to create a circular dependency is an error, as described in References and the ‘defs’ element.

5.7 The ‘image’ element

The ‘image’ element indicates that the contents of a complete file are to be rendered into a given rectangle within the current user coordinate system. The ‘image’ element can refer to raster image files such as PNG or JPEG or to files with MIME type of "image/svg+xml". Conforming SVG viewers need to support at least PNG, JPEG and SVG format files.

The result of processing an ‘image’ is always a four-channel RGBA result. When an ‘image’ element references a raster image file such as PNG or JPEG files which only has three channels (RGB), then the effect is as if the object were converted into a 4-channel RGBA image with the alpha channel uniformly set to 1. For a single-channel raster image, the effect is as if the object were converted into a 4-channel RGBA image, where the single channel from the referenced object is used to compute the three color channels and the alpha channel is uniformly set to 1.

An ‘image’ element establishes a new viewport for the referenced file as described in Establishing a new viewport.  The bounds for the new viewport are defined by attributes ‘x’, ‘y’, ‘width’ and ‘height’. The placement and scaling of the referenced image are controlled by the ‘preserveAspectRatio’ attribute on the ‘image’ element.

When an ‘image’ element references an SVG image, the ‘clip’ and ‘overflow’ properties on the root element in the referenced SVG image are ignored (in the same manner as the ‘x’, ‘y’, ‘width’ and ‘height’ attributes are ignored). Unless the value of ‘preserveAspectRatio’ on the ‘image’ element starts with 'defer', the ‘preserveAspectRatio’ attribute on the root element in the referenced SVG image is also ignored (see ‘preserveAspectRatio’ for details). Instead, the ‘preserveAspectRatio’ attribute on the referencing ‘image’ element defines how the SVG image content is fitted into the viewport and the ‘clip’ and ‘overflow’ properties on the ‘image’ element define how the SVG image content is clipped (or not) relative to the viewport.

The value of the ‘viewBox’ attribute to use when evaluating the ‘preserveAspectRatio’ attribute is defined by the referenced content. For content that clearly identifies a viewBox (e.g. an SVG file with the ‘viewBox’ attribute on the outermost svg element) that value should be used. For most raster content (PNG, JPEG) the bounds of the image should be used (i.e. the ‘image’ element has an implicit ‘viewBox’ of '0 0 raster-image-width raster-image-height'). Where no value is readily available (e.g. an SVG file with no ‘viewBox’ attribute on the outermost svg element) the ‘preserveAspectRatio’ attribute is ignored, and only the translation due to the ‘x’ & ‘y’ attributes of the viewport is used to display the content.

For example, if the image element referenced a PNG or JPEG and preserveAspectRatio="xMinYMin meet", then the aspect ratio of the raster would be preserved (which means that the scale factor from image's coordinates to current user space coordinates would be the same for both X and Y), the raster would be sized as large as possible while ensuring that the entire raster fits within the viewport, and the top/left of the raster would be aligned with the top/left of the viewport as defined by the attributes ‘x’, ‘y’, ‘width’ and ‘height’ on the ‘image’ element.  If the value of ‘preserveAspectRatio’ was 'none' then aspect ratio of the image would not be preserved. The image would be fitted such that the top/left corner of the raster exactly aligns with coordinate (‘x’, ‘y’) and the bottom/right corner of the raster exactly aligns with coordinate (‘x’+‘width’, ‘y’+‘height’).

The resource referenced by the ‘image’ element represents a separate document which generates its own parse tree and document object model (if the resource is XML). Thus, there is no inheritance of properties into the image.

Unlike ‘use’, the ‘image’ element cannot reference elements within an SVG file.

An example:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="4in" height="3in" version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <desc>This graphic links to an external image
  </desc>
  <image x="200" y="200" width="100px" height="100px"
         xlink:href="myimage.png">
    <title>My image</title>
  </image>
</svg>

5.8 Conditional processing

5.8.1 Conditional processing overview

SVG contains a ‘switch’ element along with attributes ‘requiredFeatures’, ‘requiredExtensions’ and ‘systemLanguage’ to provide an ability to specify alternate viewing depending on the capabilities of a given user agent or the user's language.

Attributes ‘requiredFeatures’, ‘requiredExtensions’ and ‘systemLanguage’ act as tests and return either true or false results. The ‘switch’ renders the first of its children for which all of these attributes test true. If the given attribute is not specified, then a true value is assumed.

Similar to the ‘display’ property, conditional processing attributes only affect the direct rendering of elements and do not prevent elements from being successfully referenced by other elements (such as via a ‘use’).

In consequence:

• ‘requiredFeatures’, ‘requiredExtensions’ and ‘systemLanguage’ attributes affect ‘a’, ‘altGlyph’, ‘foreignObject’, ‘textPath’, ‘tref’, and ‘tspan’ elements.
• ‘requiredFeatures’, ‘requiredExtensions’ and ‘systemLanguage’ attributes will have no effect on ‘mask’, ‘clipPath’, and ‘pattern’ elements.
• ‘requiredFeatures’, ‘requiredExtensions’ and ‘systemLanguage’ attributes do not apply to the ‘defs’, and ‘cursor’ elements because they are not part of the rendering tree.
• ‘requiredFeatures’, ‘requiredExtensions’ and ‘systemLanguage’ attributes affect ‘animate’, ‘animateColor’, ‘animateMotion’, ‘animateTransform’, and ‘set’ elements. If the conditional statement on these animation elements fails, the animation will never be triggered.

5.8.2 The ‘switch’ element

The ‘switch’ element evaluates the ‘requiredFeatures’, ‘requiredExtensions’ and ‘systemLanguage’ attributes on its direct child elements in order, and then processes and renders the first child for which these attributes evaluate to true. All others will be bypassed and therefore not rendered. If the child element is a container element such as a ‘g’, then the entire subtree is either processed/rendered or bypassed/not rendered.

Note that the values of properties ‘display’ and ‘visibility’ have no effect on ‘switch’ element processing. In particular, setting ‘display’ to none on a child of a ‘switch’ element has no effect on true/false testing associated with ‘switch’ element processing.

For more information and an example, see Embedding foreign object types.

5.8.3 The ‘requiredFeatures’ attribute

If the attribute is not present, then its implicit return value is "true". If a null string or empty string value is given to attribute ‘requiredFeatures’, the attribute returns "false".

‘requiredFeatures’ is often used in conjunction with the ‘switch’ element. If the ‘requiredFeatures’ is used in other situations, then it represents a simple switch on the given element whether to render the element or not.

5.8.4 The ‘requiredExtensions’ attribute

The ‘requiredExtensions’ attribute defines a list of required language extensions. Language extensions are capabilities within a user agent that go beyond the feature set defined in this specification. Each extension is identified by an IRI reference.

If a given IRI reference contains white space within itself, that white space must be escaped.

If the attribute is not present, then its implicit return value is "true". If a null string or empty string value is given to attribute ‘requiredExtensions’, the attribute returns "false".

‘requiredExtensions’ is often used in conjunction with the ‘switch’ element. If the ‘requiredExtensions’ is used in other situations, then it represents a simple switch on the given element whether to render the element or not.

The IRI names for the extension should include versioning information, such as "http://example.org/SVGExtensionXYZ/1.0", so that script writers can distinguish between different versions of a given extension.

5.8.5 The ‘systemLanguage’ attribute

The attribute value is a comma-separated list of language names as defined in BCP 47 [BCP47].

Evaluates to "true" if one of the languages indicated by user preferences exactly equals one of the languages given in the value of this parameter, or if one of the languages indicated by user preferences exactly equals a prefix of one of the languages given in the value of this parameter such that the first tag character following the prefix is "-".

Evaluates to "false" otherwise.

Note: This use of a prefix matching rule does not imply that language tags are assigned to languages in such a way that it is always true that if a user understands a language with a certain tag, then this user will also understand all languages with tags for which this tag is a prefix.

The prefix rule simply allows the use of prefix tags if this is the case.

Implementation note: When making the choice of linguistic preference available to the user, implementers should take into account the fact that users are not familiar with the details of language matching as described above, and should provide appropriate guidance. As an example, users may assume that on selecting "en-gb", they will be served any kind of English document if British English is not available. The user interface for setting user preferences should guide the user to add "en" to get the best matching behavior.

Multiple languages MAY be listed for content that is intended for multiple audiences. For example, content that is presented simultaneously in the original Maori and English versions, would call for:

<text systemLanguage="mi, en"><!-- content goes here --></text>

However, just because multiple languages are present within the object on which the ‘systemLanguage’ test attribute is placed, this does not mean that it is intended for multiple linguistic audiences. An example would be a beginner's language primer, such as "A First Lesson in Latin," which is clearly intended to be used by an English-literate audience. In this case, the ‘systemLanguage’ test attribute should only include "en".

Authoring note: Authors should realize that if several alternative language objects are enclosed in a ‘switch’, and none of them matches, this may lead to situations where no content is displayed. It is thus recommended to include a "catch-all" choice at the end of such a ‘switch’ which is acceptable in all cases.

For the ‘systemLanguage’ attribute: Animatable: no.

If the attribute is not present, then its implicit return value is "true". If a null string or empty string value is given to attribute ‘systemLanguage’, the attribute returns "false".

‘systemLanguage’ is often used in conjunction with the ‘switch’ element. If the ‘systemLanguage’ is used in other situations, then it represents a simple switch on the given element whether to render the element or not.

5.8.6 Applicability of test attributes

The following list describes the applicability of the test attributes to the elements that do not directly produce rendering.

• the test attributes do not effect the ‘mask’, ‘clipPath’, ‘linearGradient’, ‘radialGradient’ and ‘pattern’ elements. The test attributes on a referenced element do not affect the rendering of the referencing element.
• the test attributes do not effect the ‘defs’, and ‘cursor’ elements as they are not part of the rendering tree.
• an animation element (‘animate’, ‘animateMotion’, ‘animateTransform’, ‘animateColor’ and ‘set’) will never be triggered if it has a test attribute that evaluates to false.

5.9 Specifying whether external resources are required for proper rendering

Documents often reference and use the contents of other files (and other Web resources) as part of their rendering. In some cases, authors want to specify that particular resources are required for a document to be considered correct.

Attribute ‘externalResourcesRequired’ is available on all container elements and to all elements which potentially can reference external resources. It specifies whether referenced resources that are not part of the current document are required for proper rendering of the given container element or graphics element.

This attribute applies to all types of resource references, including style sheets, color profiles (see Color profile descriptions) and fonts specified by an IRI reference using a ‘font-face’ element or a CSS @font-face specification. In particular, if an element sets externalResourcesRequired="true", then all style sheets must be available since any style sheet might affect the rendering of that element.

Attribute ‘externalResourcesRequired’ is not inheritable (from a sense of attribute value inheritance), but if set on a container element, its value will apply to all elements within the container.

Because setting externalResourcesRequired="true" on a container element will have the effect of disabling progressive display of the contents of that container, if that container includes elements that reference external resources, tools that generate SVG content are cautioned against simply setting externalResourcesRequired="true" on the outermost svg element on a universal basis. Instead, it is better to specify externalResourcesRequired="true" on those particular graphics elements or container elements which specifically need the availability of external resources in order to render properly.

For ‘externalResourcesRequired’: Animatable: no.

5.10 Common attributes

5.10.1 Attributes common to all elements: ‘id’ and ‘xml:base’

The ‘id’ and ‘xml:base’ attributes are available on all SVG elements:

5.10.2 The ‘xml:lang’ and ‘xml:space’ attributes

Elements that might contain character data content have attributes ‘xml:lang’ and ‘xml:space’.

5.11 DOM interfaces

5.11.1 Interface SVGDocument

When an ‘svg’ element is embedded inline as a component of a document from another namespace, such as when an ‘svg’ element is embedded inline within an XHTML document [XHTML], then an SVGDocument object will not exist; instead, the root object in the document object hierarchy will be a Document object of a different type, such as an HTMLDocument object.

However, an SVGDocument object will indeed exist when the root element of the XML document hierarchy is an ‘svg’ element, such as when viewing a stand-alone SVG file (i.e., a file with MIME type "image/svg+xml"). In this case, the SVGDocument object will be the root object of the document object model hierarchy.

In the case where an SVG document is embedded by reference, such as when an XHTML document has an ‘object’ element whose ‘href’ attribute references an SVG document (i.e., a document whose MIME type is "image/svg+xml" and whose root element is thus an ‘svg’ element), there will exist two distinct DOM hierarchies. The first DOM hierarchy will be for the referencing document (e.g., an XHTML document). The second DOM hierarchy will be for the referenced SVG document. In this second DOM hierarchy, the root object of the document object model hierarchy is an SVGDocument object.

The SVGDocument interface contains a similar list of attributes and methods to the HTMLDocument interface described in the Document Object Model (HTML) Level 1 chapter of the [DOM1] specification.

interface SVGDocument : Document,
                        DocumentEvent {
  readonly attribute DOMString title;
  readonly attribute DOMString referrer;
  readonly attribute DOMString domain;
  readonly attribute DOMString URL;
  readonly attribute SVGSVGElement rootElement;
};

Attributes:

title (readonly DOMString)

The title of a document as specified by the ‘title’ sub-element of the ‘svg’ root element (i.e., <svg><title>Here is the title</title>...</svg>)

referrer (readonly DOMString)

Returns the URI of the page that linked to this page. The value is an empty string if the user navigated to the page directly (not through a link, but, for example, via a bookmark).

domain (readonly DOMString)

The domain name of the server that served the document, or a null string if the server cannot be identified by a domain name.

URL (readonly DOMString)

The complete URI of the document.

rootElement (readonly SVGSVGElement)

The root ‘svg’ in the document hierarchy.

5.11.2 Interface SVGSVGElement

A key interface definition is the SVGSVGElement interface, which is the interface that corresponds to the ‘svg’ element. This interface contains various miscellaneous commonly-used utility methods, such as matrix operations and the ability to control the time of redraw on visual rendering devices.

SVGSVGElement extends ViewCSS and DocumentCSS to provide access to the computed values of properties and the override style sheet as described in DOM Level 2 Style [DOM2STYLE].

interface SVGSVGElement : SVGElement,
                          SVGTests,
                          SVGLangSpace,
                          SVGExternalResourcesRequired,
                          SVGStylable,
                          SVGLocatable,
                          SVGFitToViewBox,
                          SVGZoomAndPan,
                          DocumentEvent,
                          ViewCSS,
                          DocumentCSS {

  readonly attribute SVGAnimatedLength x;
  readonly attribute SVGAnimatedLength y;
  readonly attribute SVGAnimatedLength width;
  readonly attribute SVGAnimatedLength height;
           attribute DOMString contentScriptType setraises(DOMException);
           attribute DOMString contentStyleType setraises(DOMException);
  readonly attribute SVGRect viewport;
  readonly attribute float pixelUnitToMillimeterX;
  readonly attribute float pixelUnitToMillimeterY;
  readonly attribute float screenPixelToMillimeterX;
  readonly attribute float screenPixelToMillimeterY;
  readonly attribute boolean useCurrentView;
  readonly attribute SVGViewSpec currentView;
           attribute float currentScale;
  readonly attribute SVGPoint currentTranslate;

  unsigned long suspendRedraw(in unsigned long maxWaitMilliseconds);
  void unsuspendRedraw(in unsigned long suspendHandleID);
  void unsuspendRedrawAll();
  void forceRedraw();
  void pauseAnimations();
  void unpauseAnimations();
  boolean animationsPaused();
  float getCurrentTime();
  void setCurrentTime(in float seconds);
  NodeList getIntersectionList(in SVGRect rect, in SVGElement referenceElement);
  NodeList getEnclosureList(in SVGRect rect, in SVGElement referenceElement);
  boolean checkIntersection(in SVGElement element, in SVGRect rect);
  boolean checkEnclosure(in SVGElement element, in SVGRect rect);
  void deselectAll();
  SVGNumber createSVGNumber();
  SVGLength createSVGLength();
  SVGAngle createSVGAngle();
  SVGPoint createSVGPoint();
  SVGMatrix createSVGMatrix();
  SVGRect createSVGRect();
  SVGTransform createSVGTransform();
  SVGTransform createSVGTransformFromMatrix(in SVGMatrix matrix);
  Element getElementById(in DOMString elementId);
};

Attributes:

x (readonly SVGAnimatedLength)

Corresponds to attribute ‘x’ on the given ‘svg’ element.

y (readonly SVGAnimatedLength)

Corresponds to attribute ‘y’ on the given ‘svg’ element.

width (readonly SVGAnimatedLength)

Corresponds to attribute ‘width’ on the given ‘svg’ element.

height (readonly SVGAnimatedLength)

Corresponds to attribute ‘height’ on the given ‘svg’ element.

contentScriptType (DOMString)

Corresponds to attribute ‘contentScriptType’ on the given ‘svg’ element.

Exceptions on setting

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised on an attempt to change the value of a read only attribute.

contentStyleType (DOMString)

Corresponds to attribute ‘contentStyleType’ on the given ‘svg’ element.

Exceptions on setting

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised on an attempt to change the value of a read only attribute.

viewport (readonly SVGRect)

The position and size of the viewport (implicit or explicit) that corresponds to this ‘svg’ element. When the user agent is actually rendering the content, then the position and size values represent the actual values when rendering. The position and size values are unitless values in the coordinate system of the parent element. If no parent element exists (i.e., ‘svg’ element represents the root of the document tree), if this SVG document is embedded as part of another document (e.g., via the HTML ‘object’ element), then the position and size are unitless values in the coordinate system of the parent document. (If the parent uses CSS or XSL layout, then unitless values represent pixel units for the current CSS or XSL viewport, as described in the CSS2 specification.) If the parent element does not have a coordinate system, then the user agent should provide reasonable default values for this attribute.

The SVGRect object is read only.

pixelUnitToMillimeterX (readonly float)

Size of a pixel units (as defined by CSS2) along the x-axis of the viewport, which represents a unit somewhere in the range of 70dpi to 120dpi, and, on systems that support this, might actually match the characteristics of the target medium. On systems where it is impossible to know the size of a pixel, a suitable default pixel size is provided.

pixelUnitToMillimeterY (readonly float)

Corresponding size of a pixel unit along the y-axis of the viewport.

screenPixelToMillimeterX (readonly float)

User interface (UI) events in DOM Level 2 indicate the screen positions at which the given UI event occurred. When the user agent actually knows the physical size of a "screen unit", this attribute will express that information; otherwise, user agents will provide a suitable default value such as .28mm.

screenPixelToMillimeterY (readonly float)

Corresponding size of a screen pixel along the y-axis of the viewport.

useCurrentView (readonly boolean)

The initial view (i.e., before magnification and panning) of the current innermost SVG document fragment can be either the "standard" view (i.e., based on attributes on the ‘svg’ element such as ‘viewBox’) or to a "custom" view (i.e., a hyperlink into a particular ‘view’ or other element - see Linking into SVG content: IRI fragments and SVG views). If the initial view is the "standard" view, then this attribute is false. If the initial view is a "custom" view, then this attribute is true.

currentView (readonly SVGViewSpec)

The definition of the initial view (i.e., before magnification and panning) of the current innermost SVG document fragment. The meaning depends on the situation:

• If the initial view was a "standard" view, then:
  • the values for viewBox, preserveAspectRatio and zoomAndPan within currentView will match the values for the corresponding DOM attributes that are on SVGSVGElement directly
  • the values for transform and viewTarget within currentView will be null
• If the initial view was a link into a ‘view’ element, then:
  • the values for viewBox, preserveAspectRatio and zoomAndPan within currentView will correspond to the corresponding attributes for the given ‘view’ element
  • the values for transform and viewTarget within currentView will be null
• If the initial view was a link into another element (i.e., other than a ‘view’), then:
  • the values for viewBox, preserveAspectRatio and zoomAndPan within currentView will match the values for the corresponding DOM attributes that are on SVGSVGElement directly for the closest ancestor ‘svg’ element
  • the values for transform within currentView will be null
  • the viewTarget within currentView will represent the target of the link
• If the initial view was a link into the SVG document fragment using an SVG view specification fragment identifier (i.e., #svgView(...)), then:
  • the values for viewBox, preserveAspectRatio, zoomAndPan, transform and viewTarget within currentView will correspond to the values from the SVG view specification fragment identifier

The object itself and its contents are both read only.

currentScale (float)

On an outermost svg element, this attribute indicates the current scale factor relative to the initial view to take into account user magnification and panning operations, as described under Magnification and panning. DOM attributes currentScale and currentTranslate are equivalent to the 2x3 matrix [a b c d e f] = [currentScale 0 0 currentScale currentTranslate.x currentTranslate.y]. If "magnification" is enabled (i.e., zoomAndPan="magnify"), then the effect is as if an extra transformation were placed at the outermost level on the SVG document fragment (i.e., outside the outermost svg element).

When accessed on an ‘svg’ element that is not an outermost svg element, it is undefined what behavior this attribute has.

currentTranslate (readonly SVGPoint)

On an outermost svg element, the corresponding translation factor that takes into account user "magnification".

When accessed on an ‘svg’ element that is not an outermost svg element, it is undefined what behavior this attribute has.

Operations:

unsigned long suspendRedraw(in unsigned long maxWaitMilliseconds)

Takes a time-out value which indicates that redraw shall not occur until:

1. the corresponding unsuspendRedraw() call has been made,
2. an unsuspendRedrawAll() call has been made, or
3. its timer has timed out.

In environments that do not support interactivity (e.g., print media), then redraw shall not be suspended. Calls to suspendRedraw() and unsuspendRedraw() should, but need not be, made in balanced pairs.

To suspend redraw actions as a collection of SVG DOM changes occur, precede the changes to the SVG DOM with a method call similar to:

suspendHandleID = suspendRedraw(maxWaitMilliseconds);

and follow the changes with a method call similar to:

unsuspendRedraw(suspendHandleID);

Note that multiple suspendRedraw calls can be used at once and that each such method call is treated independently of the other suspendRedraw method calls.

Parameters

1. unsigned long maxWaitMilliseconds
   The amount of time in milliseconds to hold off before redrawing the device. Values greater than 60 seconds will be truncated down to 60 seconds.

Returns

A number which acts as a unique identifier for the given suspendRedraw() call. This value must be passed as the parameter to the corresponding unsuspendRedraw() method call.

void unsuspendRedraw(in unsigned long suspendHandleID)

Cancels a specified suspendRedraw() by providing a unique suspend handle ID that was returned by a previous suspendRedraw() call.

Parameters

1. unsigned long suspendHandleID
   A number which acts as a unique identifier for the desired suspendRedraw() call. The number supplied must be a value returned from a previous call to suspendRedraw(). If an invalid handle ID value is provided then the request to unsuspendRedraw() is silently ignored.

void unsuspendRedrawAll()

Cancels all currently active suspendRedraw() method calls. This method is most useful at the very end of a set of SVG DOM calls to ensure that all pending suspendRedraw() method calls have been cancelled.

void forceRedraw()

In rendering environments supporting interactivity, forces the user agent to immediately redraw all regions of the viewport that require updating.

void pauseAnimations()

Suspends (i.e., pauses) all currently running animations that are defined within the SVG document fragment corresponding to this ‘svg’ element, causing the animation clock corresponding to this document fragment to stand still until it is unpaused.

void unpauseAnimations()

Unsuspends (i.e., unpauses) currently running animations that are defined within the SVG document fragment, causing the animation clock to continue from the time at which it was suspended.

boolean animationsPaused()

Returns true if this SVG document fragment is in a paused state.

Returns

Boolean indicating whether this SVG document fragment is in a paused state.

float getCurrentTime()

Returns the current time in seconds relative to the start time for the current SVG document fragment. If getCurrentTime is called before the document timeline has begun (for example, by script running in a ‘script’ element before the document's SVGLoad event is dispatched), then 0 is returned.

Returns

The current time in seconds, or 0 if the document timeline has not yet begun.

void setCurrentTime(in float seconds)

Adjusts the clock for this SVG document fragment, establishing a new current time. If setCurrentTime is called before the document timeline has begun (for example, by script running in a ‘script’ element before the document's SVGLoad event is dispatched), then the value of seconds in the last invocation of the method gives the time that the document will seek to once the document timeline has begun.

Parameters

1. float seconds
   The new current time in seconds relative to the start time for the current SVG document fragment.

NodeList getIntersectionList(in SVGRect rect, in SVGElement referenceElement)

Returns the list of graphics elements whose rendered content intersects the supplied rectangle. Each candidate graphics element is to be considered a match only if the same graphics element can be a target of pointer events as defined in ‘pointer-events’ processing.

Parameters

1. SVGRect rect
   The test rectangle. The values are in the initial coordinate system for the current ‘svg’ element.
2. SVGElement referenceElement
   If not null, then any intersected element that doesn't have the referenceElement as ancestor must not be included in the returned NodeList.

Returns

A list of Elements whose content intersects the supplied rectangle. This NodeList must be implemented identically to the NodeList interface as defined in DOM Level 2 Core ([DOM2], section 1.2) with the exception that the interface is not live.

NodeList getEnclosureList(in SVGRect rect, in SVGElement referenceElement)

Returns the list of graphics elements whose rendered content is entirely contained within the supplied rectangle. Each candidate graphics element is to be considered a match only if the same graphics element can be a target of pointer events as defined in ‘pointer-events’ processing.

Parameters

1. SVGRect rect
   The test rectangle. The values are in the initial coordinate system for the current ‘svg’ element.
2. SVGElement referenceElement
   If not null, then any intersected element that doesn't have the referenceElement as ancestor must not be included in the returned NodeList.

Returns

A list of Elements whose content is enclosed by the supplied rectangle. This NodeList must be implemented identically to the NodeList interface as defined in DOM Level 2 Core ([DOM2], section 1.2) with the exception that the interface is not live.

boolean checkIntersection(in SVGElement element, in SVGRect rect)

Returns true if the rendered content of the given element intersects the supplied rectangle. Each candidate graphics element is to be considered a match only if the same graphics element can be a target of pointer events as defined in ‘pointer-events’ processing.

Parameters

1. SVGElement element
   The element on which to perform the given test.
2. SVGRect rect
   The test rectangle. The values are in the initial coordinate system for the current ‘svg’ element.

Returns

True or false, depending on whether the given element intersects the supplied rectangle.

boolean checkEnclosure(in SVGElement element, in SVGRect rect)

Returns true if the rendered content of the given element is entirely contained within the supplied rectangle. Each candidate graphics element is to be considered a match only if the same graphics element can be a target of pointer events as defined in ‘pointer-events’ processing.

Parameters

1. SVGElement element
   The element on which to perform the given test.
2. SVGRect rect
   The test rectangle. The values are in the initial coordinate system for the current ‘svg’ element.

Returns

True or false, depending on whether the given element is enclosed by the supplied rectangle.

void deselectAll()

Unselects any selected objects, including any selections of text strings and type-in bars.

SVGNumber createSVGNumber()

Creates an SVGNumber object outside of any document trees. The object is initialized to a value of zero.

Returns

An SVGNumber object.

SVGLength createSVGLength()

Creates an SVGLength object outside of any document trees. The object is initialized to the value of 0 user units.

Returns

An SVGLength object.

SVGAngle createSVGAngle()

Creates an SVGAngle object outside of any document trees. The object is initialized to the value 0 degrees (unitless).

Returns

An SVGAngle object.

SVGPoint createSVGPoint()

Creates an SVGPoint object outside of any document trees. The object is initialized to the point (0,0) in the user coordinate system.

Returns

An SVGPoint object.

SVGMatrix createSVGMatrix()

Creates an SVGMatrix object outside of any document trees. The object is initialized to the identity matrix.

Returns

An SVGMatrix object.

SVGRect createSVGRect()

Creates an SVGRect object outside of any document trees. The object is initialized such that all values are set to 0 user units.

Returns

An SVGRect object.

SVGTransform createSVGTransform()

Creates an SVGTransform object outside of any document trees. The object is initialized to an identity matrix transform (SVG_TRANSFORM_MATRIX).

Returns

An SVGTransform object.

SVGTransform createSVGTransformFromMatrix(in SVGMatrix matrix)

Creates an SVGTransform object outside of any document trees. The object is initialized to the given matrix transform (i.e., SVG_TRANSFORM_MATRIX). The values from the parameter matrix are copied, the matrix parameter is not adopted as SVGTransform::matrix.

Parameters

1. SVGMatrix matrix
   The transform matrix.

Returns

An SVGTransform object.

Element getElementById(in DOMString elementId)

Searches this SVG document fragment (i.e., the search is restricted to a subset of the document tree) for an Element whose id is given by elementId. If an Element is found, that Element is returned. If no such element exists, returns null. Behavior is not defined if more than one element has this id.

Parameters

1. DOMString elementId
   The unique id value for an element.

Returns

The matching element.

5.11.3 Interface SVGGElement

The SVGSVGElement interface corresponds to the ‘g’ element.

interface SVGGElement : SVGElement,
                        SVGTests,
                        SVGLangSpace,
                        SVGExternalResourcesRequired,
                        SVGStylable,
                        SVGTransformable {
};

5.11.4 Interface SVGDefsElement

The SVGDefsElement interface corresponds to the ‘defs’ element.

interface SVGDefsElement : SVGElement,
                           SVGTests,
                           SVGLangSpace,
                           SVGExternalResourcesRequired,
                           SVGStylable,
                           SVGTransformable {
};

5.11.5 Interface SVGDescElement

The SVGDescElement interface corresponds to the ‘desc’ element.

interface SVGDescElement : SVGElement,
                           SVGLangSpace,
                           SVGStylable {
};

5.11.6 Interface SVGTitleElement

The SVGTitleElement interface corresponds to the ‘title’ element.

interface SVGTitleElement : SVGElement,
                            SVGLangSpace,
                            SVGStylable {
};

5.11.7 Interface SVGSymbolElement

The SVGSymbolElement interface corresponds to the ‘symbol’ element.

interface SVGSymbolElement : SVGElement,
                             SVGLangSpace,
                             SVGExternalResourcesRequired,
                             SVGStylable,
                             SVGFitToViewBox {
};

5.11.8 Interface SVGUseElement

The SVGUseElement interface corresponds to the ‘use’ element.

interface SVGUseElement : SVGElement,
                          SVGURIReference,
                          SVGTests,
                          SVGLangSpace,
                          SVGExternalResourcesRequired,
                          SVGStylable,
                          SVGTransformable {
  readonly attribute SVGAnimatedLength x;
  readonly attribute SVGAnimatedLength y;
  readonly attribute SVGAnimatedLength width;
  readonly attribute SVGAnimatedLength height;
  readonly attribute SVGElementInstance instanceRoot;
  readonly attribute SVGElementInstance animatedInstanceRoot;
};

Attributes:

x (readonly SVGAnimatedLength)

Corresponds to attribute ‘x’ on the given ‘use’ element.

y (readonly SVGAnimatedLength)

Corresponds to attribute ‘y’ on the given ‘use’ element.

width (readonly SVGAnimatedLength)

Corresponds to attribute ‘width’ on the given ‘use’ element.

height (readonly SVGAnimatedLength)

Corresponds to attribute ‘height’ on the given ‘use’ element.

instanceRoot (readonly SVGElementInstance)

The root of the "instance tree". See description of SVGElementInstance for a discussion on the instance tree.

animatedInstanceRoot (readonly SVGElementInstance)

If the ‘xlink:href’ attribute is being animated, contains the current animated root of the "instance tree". If the ‘xlink:href’ attribute is not currently being animated, contains the same value as instanceRoot. See description of SVGElementInstance for a discussion on the instance tree.

5.11.9 Interface SVGElementInstance

For each ‘use’ element, the SVG DOM maintains a shadow tree (the "instance tree") of objects of type SVGElementInstance. An SVGElementInstance represents a single node in the instance tree. The root object in the instance tree is pointed to by the instanceRoot attribute on the SVGUseElement object for the corresponding ‘use’ element.

If the ‘use’ element references a simple graphics element such as a ‘rect’, then there is only a single SVGElementInstance object, and the correspondingElement attribute on this SVGElementInstance object is the SVGRectElement that corresponds to the referenced ‘rect’ element.

If the ‘use’ element references a ‘g’ which contains two ‘rect’ elements, then the instance tree contains three SVGElementInstance objects, a root SVGElementInstance object whose correspondingElement is the SVGGElement object for the ‘g’, and then two child SVGElementInstance objects, each of which has its correspondingElement that is an SVGRectElement object.

If the referenced object is itself a ‘use’, or if there are ‘use’ subelements within the referenced object, the instance tree will contain recursive expansion of the indirect references to form a complete tree. For example, if a ‘use’ element references a ‘g’, and the ‘g’ itself contains a ‘use’, and that ‘use’ references a ‘rect’, then the instance tree for the original (outermost) ‘use’ will consist of a hierarchy of SVGElementInstance objects, as follows:

SVGElementInstance #1 (parentNode=null, firstChild=#2, correspondingElement is the 'g')
  SVGElementInstance #2 (parentNode=#1, firstChild=#3, correspondingElement is the other 'use')
    SVGElementInstance #3 (parentNode=#2, firstChild=null, correspondingElement is the 'rect')

interface SVGElementInstance : EventTarget {
  readonly attribute SVGElement correspondingElement;
  readonly attribute SVGUseElement correspondingUseElement;
  readonly attribute SVGElementInstance parentNode;
  readonly attribute SVGElementInstanceList childNodes;
  readonly attribute SVGElementInstance firstChild;
  readonly attribute SVGElementInstance lastChild;
  readonly attribute SVGElementInstance previousSibling;
  readonly attribute SVGElementInstance nextSibling;
};

Attributes:

correspondingElement (readonly SVGElement)

The corresponding element to which this object is an instance. For example, if a ‘use’ element references a ‘rect’ element, then an SVGElementInstance is created, with its correspondingElement being the SVGRectElement object for the ‘rect’ element.

correspondingUseElement (readonly SVGUseElement)

The corresponding ‘use’ element to which this SVGElementInstance object belongs. When ‘use’ elements are nested (e.g., a ‘use’ references another ‘use’ which references a graphics element such as a ‘rect’), then the correspondingUseElement is the outermost ‘use’ (i.e., the one which indirectly references the ‘rect’, not the one with the direct reference).

parentNode (readonly SVGElementInstance)

The parent of this SVGElementInstance within the instance tree. All SVGElementInstance objects have a parent except the SVGElementInstance which corresponds to the element which was directly referenced by the ‘use’ element, in which case parentNode is null.

childNodes (readonly SVGElementInstanceList)

An SVGElementInstanceList that contains all children of this SVGElementInstance within the instance tree. If there are no children, this is an SVGElementInstanceList containing no entries (i.e., an empty list).

firstChild (readonly SVGElementInstance)

The first child of this SVGElementInstance within the instance tree. If there is no such SVGElementInstance, this returns null.

lastChild (readonly SVGElementInstance)

The last child of this SVGElementInstance within the instance tree. If there is no such SVGElementInstance, this returns null.

previousSibling (readonly SVGElementInstance)

The SVGElementInstance immediately preceding this SVGElementInstance. If there is no such SVGElementInstance, this returns null.

nextSibling (readonly SVGElementInstance)

The SVGElementInstance immediately following this SVGElementInstance. If there is no such SVGElementInstance, this returns null.

5.11.10 Interface SVGElementInstanceList

The SVGElementInstanceList interface provides the abstraction of an ordered collection of SVGElementInstance objects, without defining or constraining how this collection is implemented.

interface SVGElementInstanceList {

  readonly attribute unsigned long length;

  SVGElementInstance item(in unsigned long index);
};

Attributes:

length (readonly unsigned long)

The number of SVGElementInstance objects in the list. The range of valid child indices is 0 to length-1 inclusive.

Operations:

SVGElementInstance item(in unsigned long index)

Returns the indexth item in the collection. If index is greater than or equal to the number of nodes in the list, this returns null.

Parameters

1. unsigned long index
   Index into the collection.

Returns

The SVGElementInstance object at the indexth position in the SVGElementInstanceList, or null if that is not a valid index.

5.11.11 Interface SVGImageElement

The SVGImageElement interface corresponds to the ‘image’ element.

interface SVGImageElement : SVGElement,
                            SVGURIReference,
                            SVGTests,
                            SVGLangSpace,
                            SVGExternalResourcesRequired,
                            SVGStylable,
                            SVGTransformable {
  readonly attribute SVGAnimatedLength x;
  readonly attribute SVGAnimatedLength y;
  readonly attribute SVGAnimatedLength width;
  readonly attribute SVGAnimatedLength height;
  readonly attribute SVGAnimatedPreserveAspectRatio preserveAspectRatio;
};

Attributes:

x (readonly SVGAnimatedLength)

Corresponds to attribute ‘x’ on the given ‘image’ element.

y (readonly SVGAnimatedLength)

Corresponds to attribute ‘y’ on the given ‘image’ element.

width (readonly SVGAnimatedLength)

Corresponds to attribute ‘width’ on the given ‘image’ element.

height (readonly SVGAnimatedLength)

Corresponds to attribute ‘height’ on the given ‘image’ element.

preserveAspectRatio (readonly SVGAnimatedPreserveAspectRatio)

Corresponds to attribute ‘preserveAspectRatio’ on the given ‘image’ element.

5.11.12 Interface SVGSwitchElement

The SVGSwitchElement interface corresponds to the ‘switch’ element.

interface SVGSwitchElement : SVGElement,
                             SVGTests,
                             SVGLangSpace,
                             SVGExternalResourcesRequired,
                             SVGStylable,
                             SVGTransformable {
};

5.11.13 Interface GetSVGDocument

This interface provides access to an SVG document embedded by reference in another DOM-based language. The expectation is that the interface is implemented on DOM objects that allow such SVG document references, such as the DOM Element object that corresponds to an HTML ‘object’ element. Such DOM objects are often also required to implement the EmbeddingElement defined in the Window specification [WINDOW].

This interface is deprecated and may be dropped from future versions of the SVG specification. Authors are suggested to use the contentDocument attribute on the EmbeddingElement interface to obtain a referenced SVG document, if that interface is available.

interface GetSVGDocument {
  SVGDocument getSVGDocument();
};

Operations:

SVGDocument getSVGDocument()

This method must return the Document object embedded content in an embedding element, or null if there is no document.

Note that this is equivalent to fetching the value of the EmbeddingElement::contentDocument attribute of the embedding element, if the EmbeddingElement interface is also implemented. The author is advised to check that the document element of the returned Document is indeed an ‘svg’ element instead of assuming that that will always be the case.

Returns

The Document object for the referenced document, or null if there is no document.

4 Basic Data Types and Interfaces

Contents

• 4.1 Syntax
• 4.2 Basic data types
• 4.3 Real number precision
• 4.4 Recognized color keyword names
• 4.5 Basic DOM interfaces
  • 4.5.1 Interface SVGElement
  • 4.5.2 Interface SVGAnimatedBoolean
  • 4.5.3 Interface SVGAnimatedString
  • 4.5.4 Interface SVGStringList
  • 4.5.5 Interface SVGAnimatedEnumeration
  • 4.5.6 Interface SVGAnimatedInteger
  • 4.5.7 Interface SVGNumber
  • 4.5.8 Interface SVGAnimatedNumber
  • 4.5.9 Interface SVGNumberList
  • 4.5.10 Interface SVGAnimatedNumberList
  • 4.5.11 Interface SVGLength
  • 4.5.12 Interface SVGAnimatedLength
  • 4.5.13 Interface SVGLengthList
  • 4.5.14 Interface SVGAnimatedLengthList
  • 4.5.15 Interface SVGAngle
  • 4.5.16 Interface SVGAnimatedAngle
  • 4.5.17 Interface SVGColor
  • 4.5.18 Interface SVGICCColor
  • 4.5.19 Interface SVGRect
  • 4.5.20 Interface SVGAnimatedRect
  • 4.5.21 Interface SVGUnitTypes
  • 4.5.22 Interface SVGStylable
  • 4.5.23 Interface SVGLocatable
  • 4.5.24 Interface SVGTransformable
  • 4.5.25 Interface SVGTests
  • 4.5.26 Interface SVGLangSpace
  • 4.5.27 Interface SVGExternalResourcesRequired
  • 4.5.28 Interface SVGFitToViewBox
  • 4.5.29 Interface SVGZoomAndPan
  • 4.5.30 Interface SVGViewSpec
  • 4.5.31 Interface SVGURIReference
  • 4.5.32 Interface SVGCSSRule
  • 4.5.33 Interface SVGRenderingIntent

4.1 Syntax

The EBNF grammar is as used in the XML specification, with the addition of ~, a case-insensitive literal: characters in the ASCII range (only) are declared to be case-insensitive. For example, ~"Hello" will match (H|h)(e|e)(l|L)(l|L)(o|O). This makes the productions much easier to read.

?	optional, zero or one
+	one or more
*	zero or more
|	alternation
"string"	literal
~"string"	case-insensitive literal
[]	a character range
[^]	excluded character range
()	grouping

4.2 Basic data types

This section defines a number of common data types used in the definitions of SVG properties and attributes. Some data types that are not referenced by multiple properties and attributes are defined inline in subsequent chapters.

Note that, as noted below, the specification of some types is different for CSS property values in style sheets (in the ‘style’ attribute, ‘style’ element or an external style sheet) than it is for for XML attribute values (including presentation attributes). This is due to restrictions in the CSS grammar. For example, scientific notation is allowed in attributes, including presentation attributes, but not in style sheets.

<angle>

Angles are specified in one of two ways depending upon whether they are used in CSS property syntax or SVG presentation attribute syntax:

• When an <angle> is used in a style sheet or with a property in a ‘style’ attribute, the syntax must match the following pattern:

  angle ::= number (~"deg" | ~"grad" | ~"rad")?

  where deg indicates degrees, grad indicates grads and rad indicates radians. The unit identifier may be in lower (recommended) or upper case.

  For properties defined in CSS2 [CSS2], an angle unit identifier must be provided (for non-zero values). For SVG-specific properties the angle unit identifier is optional. If a unit is not provided, the angle value is assumed to be in degrees.

• When an <angle> is used in an SVG presentation attribute, the syntax must match the following pattern:

  angle ::= number ("deg" | "grad" | "rad")?

  The unit identifier, if present, must be in lower case; if not present, the angle value is assumed to be in degrees.

In the SVG DOM, <angle> values are represented using SVGAngle or SVGAnimatedAngle objects.

<anything>

The basic type <anything> is a sequence of zero or more characters. Specifically:

anything ::= Char*

where Char is the production for a character, as defined in XML 1.0 ([XML10], section 2.2).

<color>

The basic type <color> is a CSS2 compatible specification for a color in the sRGB color space [SRGB]. <color> applies to SVG's use of the ‘color’ property and is a component of the definitions of properties ‘fill’, ‘stroke’, ‘stop-color’, ‘flood-color’ and ‘lighting-color’, which also offer optional ICC-based color specifications.

SVG supports all of the syntax alternatives for <color> defined in CSS2 syntax and basic data types ([CSS2], section 4.3.6), with the exception that SVG allows an expanded list of recognized color keywords names.

A <color> is either a keyword (see Recognized color keyword names) or a numerical RGB specification.

In addition to these color keywords, users may specify keywords that correspond to the colors used by objects in the user's environment. The normative definition of these keywords is found in User preferences for colors ([CSS2], section 18.2).

The format of an RGB value in hexadecimal notation is a "#" immediately followed by either three or six hexadecimal characters. The three-digit RGB notation (#rgb) is converted into six-digit form (#rrggbb) by replicating digits, not by adding zeros. For example, #fb0 expands to #ffbb00. This ensures that white (#ffffff) can be specified with the short notation (#fff) and removes any dependencies on the color depth of the display. The format of an RGB value in the functional notation is an RGB start-function followed by a comma-separated list of three numerical values (either three integer values or three percentage values) followed by ")". An RGB start-function is the case-insensitive string "rgb(", for example "RGB(" or "rGb(". For compatibility, the all-lowercase form "rgb(" is preferred. The integer value 255 corresponds to 100%, and to F or FF in the hexadecimal notation: rgb(255,255,255) = rgb(100%,100%,100%) = #FFF. White space characters are allowed around the numerical values. All RGB colors are specified in the sRGB color space [SRGB]. Using sRGB provides an unambiguous and objectively measurable definition of the color, which can be related to international standards (see [COLORIMETRY]).

color    ::= "#" hexdigit hexdigit hexdigit (hexdigit hexdigit hexdigit)?
             | "rgb(" wsp* integer comma integer comma integer wsp* ")"
             | "rgb(" wsp* integer "%" comma integer "%" comma integer "%" wsp* ")"
             | color-keyword
hexdigit ::= [0-9A-Fa-f]
comma    ::= wsp* "," wsp*
    

where color-keyword matches (case insensitively) one of the color keywords listed in Recognized color keyword names below, or one of the system color keywords listed in User preferences for colors ([CSS2], section 18.2).

The corresponding SVG DOM interface definitions for <color> are defined in Document Object Model CSS; in particular, see RGBColor ([DOM2STYLE], section 2.2). SVG's extension to color, including the ability to specify ICC-based colors, are represented using DOM interface SVGColor.

<coordinate>

A <coordinate> is a length in the user coordinate system that is the given distance from the origin of the user coordinate system along the relevant axis (the x-axis for X coordinates, the y-axis for Y coordinates). Its syntax is the same as that for <length>.

coordinate ::= length

Within the SVG DOM, a <coordinate> is represented as an SVGLength or an SVGAnimatedLength.

<frequency>

Frequency values are used with aural properties. As defined in CSS2, a frequency value is a <number> immediately followed by a frequency unit identifier. The frequency unit identifiers are:

• Hz: Hertz
• kHz: kilo Hertz

Frequency values may not be negative.

In the SVG DOM, <frequency> values are represented using the CSSPrimitiveValue interface defined in Document Object Model CSS ([DOM2STYLE], section 2.2).

<FuncIRI>

Functional notation for an IRI: "url(" <IRI> ")".

<icccolor>

An <icccolor> is an ICC color specification. In SVG 1.1, an ICC color specification is given by a name, which references a ‘color-profile’ element, and one or more color component values. The grammar is as follows:

icccolor ::= "icc-color(" name (comma-wsp number)+ ")"
name     ::= [^,()#x20#x9#xD#xA] /* any char except ",", "(", ")" or wsp */

The corresponding SVG DOM interface for <icccolor> is SVGICCColor.

<integer>

An <integer> is specified as an optional sign character ("+" or "-") followed by one or more digits "0" to "9":

integer ::= [+-]? [0-9]+

If the sign character is not present, the number is non-negative.

Unless stated otherwise for a particular attribute or property, the range for an <integer> encompasses (at a minimum) -2147483648 to 2147483647.

Within the SVG DOM, an <integer> is represented as a long or an SVGAnimatedInteger.

<IRI>

An Internationalized Resource Identifier (see IRI). For the specification of IRI references in SVG, see IRI references.

<length>

A length is a distance measurement, given as a number along with a unit which may be optional. Lengths are specified in one of two ways depending upon whether they are used in CSS property syntax or SVG presentation attribute syntax:

• When a <length> is used in a style sheet or with a property in a ‘style’ attribute, the syntax must match the following pattern:

  length ::= number (~"em" | ~"ex" | ~"px" | ~"in" | ~"cm" | ~"mm" | ~"pt" | ~"pc")?

  See the CSS2 specification for the meanings of the unit identifiers. The unit identifier may be in lower (recommended) or upper case.

  For properties defined in CSS2 [CSS2], a length unit identifier must be provided (for non-zero values). For SVG-specific properties, the length unit identifier is optional. If a unit is not provided, the length value represents a distance in the current user coordinate system.

• When a <length> is used in an SVG presentation attribute, the syntax must match the following pattern:

  length ::= number ("em" | "ex" | "px" | "in" | "cm" | "mm" | "pt" | "pc" | "%")?

  The unit identifier, if present, must be in lower case; if not present, the length value represents a distance in the current user coordinate system.

  Note that the non-property <length> definition also allows a percentage unit identifier. The meaning of a percentage length value depends on the attribute for which the percentage length value has been specified. Two common cases are: (a) when a percentage length value represents a percentage of the viewport width or height (refer to the section that discusses units in general), and (b) when a percentage length value represents a percentage of the bounding box width or height on a given object (refer to the section that describes object bounding box units).

In the SVG DOM, <length> values are represented using SVGLength or SVGAnimatedLength objects.

<list-of-family-names>

A <list-of-family-names> is a list of font family names using the same syntax as the ‘font-family’ property, excluding the <generic-family> and 'inherit' values.

<list-of-strings>

A <list-of-strings> consists of a separated sequence of <string>s. String lists are white space-separated, where white space is defined as one or more of the following consecutive characters: "space" (U+0020), "tab" (U+0009), "line feed" (U+000A) and "carriage return" (U+000D).

The following is an EBNF grammar describing the <list-of-strings> syntax:

list-of-strings ::= string
                    | string wsp list-of-strings
string          ::= [^#x9#xA#xD#x20]*
wsp             ::= [#x9#xA#xD#x20]+

<list-of-Ts>

(Where T is a type other than <string> and <family-name>.) A list consists of a separated sequence of values. Unless explicitly described differently, lists within SVG's XML attributes can be either comma-separated, with optional white space before or after the comma, or white space-separated.

White space in lists is defined as one or more of the following consecutive characters: "space" (U+0020), "tab" (U+0009), "line feed" (U+000A), "carriage return" (U+000D) and "form-feed" (U+000C).

The following is a template for an EBNF grammar describing the <list-of-Ts> syntax:

list-of-Ts ::= T
               | T comma-wsp list-of-Ts
comma-wsp  ::= (wsp+ ","? wsp*) | ("," wsp*)
wsp        ::= (#x20 | #x9 | #xD | #xA)

Within the SVG DOM, values of a <list-of-Ts> type are represented by an interface specific for the particular type T. For example, a <list-of-lengths> is represented in the SVG DOM using an SVGLengthList or SVGAnimatedLengthList object.

<name>

A name, which is a string where a few characters of syntactic significance are disallowed.

name  ::= [^,()#x20#x9#xD#xA] /* any char except ",", "(", ")" or wsp */

<number>

Real numbers are specified in one of two ways. When used in a style sheet, a <number> is defined as follows:

number ::= integer
           | [+-]? [0-9]* "." [0-9]+

This syntax is the same as the definition in CSS ([CSS2], section 4.3.1).

When used in an SVG attribute, a <number> is defined differently, to allow numbers with large magnitudes to be specified more concisely:

number ::= integer ([Ee] integer)?
           | [+-]? [0-9]* "." [0-9]+ ([Ee] integer)?

Within the SVG DOM, a <number> is represented as a float, SVGNumber or a SVGAnimatedNumber.

<number-optional-number>

A pair of <number>s, where the second <number> is optional.

number-optional-number ::= number
                           | number comma-wsp number

In the SVG DOM, a <number-optional-number> is represented using a pair of SVGAnimatedInteger or SVGAnimatedNumber objects.

<paint>

The values for properties ‘fill’ and ‘stroke’ are specifications of the type of paint to use when filling or stroking a given graphics element. The available options and syntax for <paint> are described in Specifying paint.

Within the SVG DOM, <paint> values are represented using SVGPaint objects.

<percentage>

Percentages are specified as a number followed by a "%" character:

percentage ::= number "%"

Note that the definition of <number> depends on whether the percentage is specified in a style sheet or in an attribute that is not also a presentation attribute.

Percentage values are always relative to another value, for example a length. Each attribute or property that allows percentages also defines the reference distance measurement to which the percentage refers.

Within the SVG DOM, a <percentage> is represented using an SVGNumber or SVGAnimatedNumber object.

<time>

A time value is a <number> immediately followed by a time unit identifier. The time unit identifiers are:

• ms: milliseconds
• s: seconds

In the SVG DOM, <time> values are represented using the CSSPrimitiveValue interface defined in Document Object Model CSS ([DOM2STYLE], section 2.2).

<transform-list>

A <transform-list> is used to specify a list of coordinate system transformations. A detailed description of the possible values for a <transform-list> is given in Modifying the User Coordinate System: the transform attribute.

Within the SVG DOM, a <transform-list> value is represented using an SVGTransformList or SVGAnimatedTransformList object.

<XML-Name>

An XML name, as defined by the Name production in Extensible Markup Language (XML) 1.0 ([XML10], section 2.3).

4.3 Real number precision

Unless stated otherwise for a particular attribute or property, a <number> has the capacity for at least a single-precision floating point number and has a range (at a minimum) of -3.4e+38F to +3.4e+38F.

It is recommended that higher precision floating point storage and computation be performed on operations such as coordinate system transformations to provide the best possible precision and to prevent round-off errors.

Conforming High-Quality SVG Viewers are required to use at least double-precision floating point for intermediate calculations on certain numerical operations.

4.4 Recognized color keyword names

The following is the list of recognized color keywords that can be used as a keyword value for data type <color>:

aliceblue rgb(240, 248, 255) antiquewhite rgb(250, 235, 215) aqua rgb( 0, 255, 255) aquamarine rgb(127, 255, 212) azure rgb(240, 255, 255) beige rgb(245, 245, 220) bisque rgb(255, 228, 196) black rgb( 0, 0, 0) blanchedalmond rgb(255, 235, 205) blue rgb( 0, 0, 255) blueviolet rgb(138, 43, 226) brown rgb(165, 42, 42) burlywood rgb(222, 184, 135) cadetblue rgb( 95, 158, 160) chartreuse rgb(127, 255, 0) chocolate rgb(210, 105, 30) coral rgb(255, 127, 80) cornflowerblue rgb(100, 149, 237) cornsilk rgb(255, 248, 220) crimson rgb(220, 20, 60) cyan rgb( 0, 255, 255) darkblue rgb( 0, 0, 139) darkcyan rgb( 0, 139, 139) darkgoldenrod rgb(184, 134, 11) darkgray rgb(169, 169, 169) darkgreen rgb( 0, 100, 0) darkgrey rgb(169, 169, 169) darkkhaki rgb(189, 183, 107) darkmagenta rgb(139, 0, 139) darkolivegreen rgb( 85, 107, 47) darkorange rgb(255, 140, 0) darkorchid rgb(153, 50, 204) darkred rgb(139, 0, 0) darksalmon rgb(233, 150, 122) darkseagreen rgb(143, 188, 143) darkslateblue rgb( 72, 61, 139) darkslategray rgb( 47, 79, 79) darkslategrey rgb( 47, 79, 79) darkturquoise rgb( 0, 206, 209) darkviolet rgb(148, 0, 211) deeppink rgb(255, 20, 147) deepskyblue rgb( 0, 191, 255) dimgray rgb(105, 105, 105) dimgrey rgb(105, 105, 105) dodgerblue rgb( 30, 144, 255) firebrick rgb(178, 34, 34) floralwhite rgb(255, 250, 240) forestgreen rgb( 34, 139, 34) fuchsia rgb(255, 0, 255) gainsboro rgb(220, 220, 220) ghostwhite rgb(248, 248, 255) gold rgb(255, 215, 0) goldenrod rgb(218, 165, 32) gray rgb(128, 128, 128) grey rgb(128, 128, 128) green rgb( 0, 128, 0) greenyellow rgb(173, 255, 47) honeydew rgb(240, 255, 240) hotpink rgb(255, 105, 180) indianred rgb(205, 92, 92) indigo rgb( 75, 0, 130) ivory rgb(255, 255, 240) khaki rgb(240, 230, 140) lavender rgb(230, 230, 250) lavenderblush rgb(255, 240, 245) lawngreen rgb(124, 252, 0) lemonchiffon rgb(255, 250, 205) lightblue rgb(173, 216, 230) lightcoral rgb(240, 128, 128) lightcyan rgb(224, 255, 255) lightgoldenrodyellow rgb(250, 250, 210) lightgray rgb(211, 211, 211) lightgreen rgb(144, 238, 144) lightgrey rgb(211, 211, 211)

lightpink rgb(255, 182, 193) lightsalmon rgb(255, 160, 122) lightseagreen rgb( 32, 178, 170) lightskyblue rgb(135, 206, 250) lightslategray rgb(119, 136, 153) lightslategrey rgb(119, 136, 153) lightsteelblue rgb(176, 196, 222) lightyellow rgb(255, 255, 224) lime rgb( 0, 255, 0) limegreen rgb( 50, 205, 50) linen rgb(250, 240, 230) magenta rgb(255, 0, 255) maroon rgb(128, 0, 0) mediumaquamarine rgb(102, 205, 170) mediumblue rgb( 0, 0, 205) mediumorchid rgb(186, 85, 211) mediumpurple rgb(147, 112, 219) mediumseagreen rgb( 60, 179, 113) mediumslateblue rgb(123, 104, 238) mediumspringgreen rgb( 0, 250, 154) mediumturquoise rgb( 72, 209, 204) mediumvioletred rgb(199, 21, 133) midnightblue rgb( 25, 25, 112) mintcream rgb(245, 255, 250) mistyrose rgb(255, 228, 225) moccasin rgb(255, 228, 181) navajowhite rgb(255, 222, 173) navy rgb( 0, 0, 128) oldlace rgb(253, 245, 230) olive rgb(128, 128, 0) olivedrab rgb(107, 142, 35) orange rgb(255, 165, 0) orangered rgb(255, 69, 0) orchid rgb(218, 112, 214) palegoldenrod rgb(238, 232, 170) palegreen rgb(152, 251, 152) paleturquoise rgb(175, 238, 238) palevioletred rgb(219, 112, 147) papayawhip rgb(255, 239, 213) peachpuff rgb(255, 218, 185) peru rgb(205, 133, 63) pink rgb(255, 192, 203) plum rgb(221, 160, 221) powderblue rgb(176, 224, 230) purple rgb(128, 0, 128) red rgb(255, 0, 0) rosybrown rgb(188, 143, 143) royalblue rgb( 65, 105, 225) saddlebrown rgb(139, 69, 19) salmon rgb(250, 128, 114) sandybrown rgb(244, 164, 96) seagreen rgb( 46, 139, 87) seashell rgb(255, 245, 238) sienna rgb(160, 82, 45) silver rgb(192, 192, 192) skyblue rgb(135, 206, 235) slateblue rgb(106, 90, 205) slategray rgb(112, 128, 144) slategrey rgb(112, 128, 144) snow rgb(255, 250, 250) springgreen rgb( 0, 255, 127) steelblue rgb( 70, 130, 180) tan rgb(210, 180, 140) teal rgb( 0, 128, 128) thistle rgb(216, 191, 216) tomato rgb(255, 99, 71) turquoise rgb( 64, 224, 208) violet rgb(238, 130, 238) wheat rgb(245, 222, 179) white rgb(255, 255, 255) whitesmoke rgb(245, 245, 245) yellow rgb(255, 255, 0) yellowgreen rgb(154, 205, 50)

4.5 Basic DOM interfaces

4.5.1 Interface SVGElement

All of the SVG DOM interfaces that correspond directly to elements in the SVG language (such as the SVGPathElement interface for the ‘path’ element) derive from the SVGElement interface.

interface SVGElement : Element {
           attribute DOMString id setraises(DOMException);
           attribute DOMString xmlbase setraises(DOMException);
  readonly attribute SVGSVGElement ownerSVGElement;
  readonly attribute SVGElement viewportElement;
};

Attributes:

id (DOMString)

The value of the ‘id’ attribute on the given element, or the empty string if ‘id’ is not present.

Exceptions on setting

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised on an attempt to change the value of a read only attribute.

xmlbase (DOMString)

Corresponds to attribute ‘xml:base’ on the given element.

Exceptions on setting

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised on an attempt to change the value of a read only attribute.

ownerSVGElement (readonly SVGSVGElement)

The nearest ancestor ‘svg’ element. Null if the given element is the outermost svg element.

viewportElement (readonly SVGElement)

The element which established the current viewport. Often, the nearest ancestor ‘svg’ element. Null if the given element is the outermost svg element.

4.5.2 Interface SVGAnimatedBoolean

Used for attributes of type boolean which can be animated.

interface SVGAnimatedBoolean {
           attribute boolean baseVal setraises(DOMException);
  readonly attribute boolean animVal;
};

Attributes:

baseVal (boolean)

The base value of the given attribute before applying any animations.

Exceptions on setting

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised on an attempt to change the value of a read only attribute.

animVal (readonly boolean)

If the given attribute or property is being animated, contains the current animated value of the attribute or property. If the given attribute or property is not currently being animated, contains the same value as baseVal.

4.5.3 Interface SVGAnimatedString

Used for attributes of type DOMString which can be animated.

interface SVGAnimatedString {
           attribute DOMString baseVal setraises(DOMException);
  readonly attribute DOMString animVal;
};

Attributes:

baseVal (DOMString)

The base value of the given attribute before applying any animations.

Exceptions on setting

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised on an attempt to change the value of a read only attribute.

animVal (readonly DOMString)

If the given attribute or property is being animated, contains the current animated value of the attribute or property. If the given attribute or property is not currently being animated, contains the same value as baseVal.

4.5.4 Interface SVGStringList

This interface defines a list of DOMString values.

SVGStringList has the same attributes and methods as other SVGxxxList interfaces. Implementers may consider using a single base class to implement the various SVGxxxList interfaces.

interface SVGStringList {

  readonly attribute unsigned long numberOfItems;

  void clear() raises(DOMException);
  DOMString initialize(in DOMString newItem) raises(DOMException);
  DOMString getItem(in unsigned long index) raises(DOMException);
  DOMString insertItemBefore(in DOMString newItem, in unsigned long index) raises(DOMException);
  DOMString replaceItem(in DOMString newItem, in unsigned long index) raises(DOMException);
  DOMString removeItem(in unsigned long index) raises(DOMException);
  DOMString appendItem(in DOMString newItem) raises(DOMException);
};

Attributes:

numberOfItems (readonly unsigned long)

The number of items in the list.

Operations:

void clear()

Clears all existing current items from the list, with the result being an empty list.

Exceptions

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised when the list cannot be modified.

DOMString initialize(in DOMString newItem)

Clears all existing current items from the list and re-initializes the list to hold the single item specified by the parameter.

Parameters

1. DOMString newItem
   The item which should become the only member of the list.

Returns

The item being inserted into the list.

Exceptions

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised when the list cannot be modified.

DOMString getItem(in unsigned long index)

Returns the specified item from the list.

Parameters

1. unsigned long index
   The index of the item from the list which is to be returned. The first item is number 0.

Returns

The selected item.

Exceptions

DOMException, code INDEX_SIZE_ERR

Raised if the index number is greater than or equal to numberOfItems.

DOMString insertItemBefore(in DOMString newItem, in unsigned long index)

Inserts a new item into the list at the specified position. The first item is number 0.

Parameters

1. DOMString newItem
   The item which is to be inserted into the list.
2. unsigned long index
   The index of the item before which the new item is to be inserted. The first item is number 0. If the index is equal to 0, then the new item is inserted at the front of the list. If the index is greater than or equal to numberOfItems, then the new item is appended to the end of the list.

Returns

The inserted item.

Exceptions

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised when the list cannot be modified.

DOMString replaceItem(in DOMString newItem, in unsigned long index)

Replaces an existing item in the list with a new item.

Parameters

1. DOMString newItem
   The item which is to be inserted into the list.
2. unsigned long index
   The index of the item which is to be replaced. The first item is number 0.

Returns

The inserted item.

Exceptions

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised when the list cannot be modified.

DOMException, code INDEX_SIZE_ERR

Raised if the index number is greater than or equal to numberOfItems.

DOMString removeItem(in unsigned long index)

Removes an existing item from the list.

Parameters

1. unsigned long index
   The index of the item which is to be removed. The first item is number 0.

Returns

The removed item.

Exceptions

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised when the list cannot be modified.

DOMException, code INDEX_SIZE_ERR

Raised if the index number is greater than or equal to numberOfItems.

DOMString appendItem(in DOMString newItem)

Inserts a new item at the end of the list.

Parameters

1. DOMString newItem
   The item which is to be inserted. The first item is number 0.

Returns

The inserted item.

Exceptions

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised when the list cannot be modified.

4.5.5 Interface SVGAnimatedEnumeration

Used for attributes whose value must be a constant from a particular enumeration and which can be animated.

interface SVGAnimatedEnumeration {
           attribute unsigned short baseVal setraises(DOMException);
  readonly attribute unsigned short animVal;
};

Attributes:

baseVal (unsigned short)

The base value of the given attribute before applying any animations.

Exceptions on setting

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised on an attempt to change the value of a read only attribute.

animVal (readonly unsigned short)

If the given attribute or property is being animated, contains the current animated value of the attribute or property. If the given attribute or property is not currently being animated, contains the same value as baseVal.

4.5.6 Interface SVGAnimatedInteger

Used for attributes of basic type <integer> which can be animated.

interface SVGAnimatedInteger {
           attribute long baseVal setraises(DOMException);
  readonly attribute long animVal;
};

Attributes:

baseVal (long)

The base value of the given attribute before applying any animations.

Exceptions on setting

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised on an attempt to change the value of a read only attribute.

animVal (readonly long)

If the given attribute or property is being animated, contains the current animated value of the attribute or property. If the given attribute or property is not currently being animated, contains the same value as baseVal.

4.5.7 Interface SVGNumber

Used for attributes of basic type <number>.

interface SVGNumber {
  attribute float value setraises(DOMException);
};

Attributes:

value (float)

The value of the given attribute.

Exceptions on setting

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised on an attempt to change the value of a read only attribute.

4.5.8 Interface SVGAnimatedNumber

Used for attributes of basic type <number> which can be animated.

interface SVGAnimatedNumber {
           attribute float baseVal setraises(DOMException);
  readonly attribute float animVal;
};

Attributes:

baseVal (float)

The base value of the given attribute before applying any animations.

Exceptions on setting

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised on an attempt to change the value of a read only attribute.

animVal (readonly float)

If the given attribute or property is being animated, contains the current animated value of the attribute or property. If the given attribute or property is not currently being animated, contains the same value as baseVal.

4.5.9 Interface SVGNumberList

This interface defines a list of SVGNumber objects.

SVGNumberList has the same attributes and methods as other SVGxxxList interfaces. Implementers may consider using a single base class to implement the various SVGxxxList interfaces.

An SVGNumberList object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown, as described below.

interface SVGNumberList {

  readonly attribute unsigned long numberOfItems;

  void clear() raises(DOMException);
  SVGNumber initialize(in SVGNumber newItem) raises(DOMException);
  SVGNumber getItem(in unsigned long index) raises(DOMException);
  SVGNumber insertItemBefore(in SVGNumber newItem, in unsigned long index) raises(DOMException);
  SVGNumber replaceItem(in SVGNumber newItem, in unsigned long index) raises(DOMException);
  SVGNumber removeItem(in unsigned long index) raises(DOMException);
  SVGNumber appendItem(in SVGNumber newItem) raises(DOMException);
};

Attributes:

numberOfItems (readonly unsigned long)

The number of items in the list.

Operations:

void clear()

Clears all existing current items from the list, with the result being an empty list.

Exceptions

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised when the list corresponds to a read only attribute or when the object itself is read only.

SVGNumber initialize(in SVGNumber newItem)

Clears all existing current items from the list and re-initializes the list to hold the single item specified by the parameter. If the inserted item is already in a list, it is removed from its previous list before it is inserted into this list. The inserted item is the item itself and not a copy.

Parameters

1. SVGNumber newItem
   The item which should become the only member of the list.

Returns

The item being inserted into the list.

Exceptions

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised when the list corresponds to a read only attribute or when the object itself is read only.

SVGNumber getItem(in unsigned long index)

Returns the specified item from the list. The returned item is the item itself and not a copy. Any changes made to the item are immediately reflected in the list.

Parameters

1. unsigned long index
   The index of the item from the list which is to be returned. The first item is number 0.

Returns

The selected item.

Exceptions

DOMException, code INDEX_SIZE_ERR

Raised if the index number is greater than or equal to numberOfItems.

SVGNumber insertItemBefore(in SVGNumber newItem, in unsigned long index)

Inserts a new item into the list at the specified position. The first item is number 0. If newItem is already in a list, it is removed from its previous list before it is inserted into this list. The inserted item is the item itself and not a copy. If the item is already in this list, note that the index of the item to insert before is before the removal of the item.

Parameters

1. SVGNumber newItem
   The item which is to be inserted into the list.
2. unsigned long index
   The index of the item before which the new item is to be inserted. The first item is number 0. If the index is equal to 0, then the new item is inserted at the front of the list. If the index is greater than or equal to numberOfItems, then the new item is appended to the end of the list.

Returns

The inserted item.

Exceptions

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised when the list corresponds to a read only attribute or when the object itself is read only.

SVGNumber replaceItem(in SVGNumber newItem, in unsigned long index)

Replaces an existing item in the list with a new item. If newItem is already in a list, it is removed from its previous list before it is inserted into this list. The inserted item is the item itself and not a copy. If the item is already in this list, note that the index of the item to replace is before the removal of the item.

Parameters

1. SVGNumber newItem
   The item which is to be inserted into the list.
2. unsigned long index
   The index of the item which is to be replaced. The first item is number 0.

Returns

The inserted item.

Exceptions

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised when the list corresponds to a read only attribute or when the object itself is read only.

DOMException, code INDEX_SIZE_ERR

Raised if the index number is greater than or equal to numberOfItems.

SVGNumber removeItem(in unsigned long index)

Removes an existing item from the list.

Parameters

1. unsigned long index
   The index of the item which is to be removed. The first item is number 0.

Returns

The removed item.

Exceptions

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised when the list cannot be modified.

DOMException, code INDEX_SIZE_ERR

Raised if the index number is greater than or equal to numberOfItems.

SVGNumber appendItem(in SVGNumber newItem)

Inserts a new item at the end of the list. If newItem is already in a list, it is removed from its previous list before it is inserted into this list. The inserted item is the item itself and not a copy.

Parameters

1. SVGNumber newItem
   The item which is to be inserted. The first item is number 0.

Returns

The inserted item.

Exceptions

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised when the list cannot be modified.

4.5.10 Interface SVGAnimatedNumberList

Used for attributes which take a list of numbers and which can be animated.

interface SVGAnimatedNumberList {
  readonly attribute SVGNumberList baseVal;
  readonly attribute SVGNumberList animVal;
};

Attributes:

baseVal (readonly SVGNumberList)

The base value of the given attribute before applying any animations.

animVal (readonly SVGNumberList)

A read only SVGNumberList representing the current animated value of the given attribute. If the given attribute is not currently being animated, then the SVGNumberList will have the same contents as baseVal. The object referenced by animVal will always be distinct from the one referenced by baseVal, even when the attribute is not animated.

4.5.11 Interface SVGLength

The SVGLength interface corresponds to the <length> basic data type.

An SVGLength object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown, as described below.

interface SVGLength {

  // Length Unit Types
  const unsigned short SVG_LENGTHTYPE_UNKNOWN = 0;
  const unsigned short SVG_LENGTHTYPE_NUMBER = 1;
  const unsigned short SVG_LENGTHTYPE_PERCENTAGE = 2;
  const unsigned short SVG_LENGTHTYPE_EMS = 3;
  const unsigned short SVG_LENGTHTYPE_EXS = 4;
  const unsigned short SVG_LENGTHTYPE_PX = 5;
  const unsigned short SVG_LENGTHTYPE_CM = 6;
  const unsigned short SVG_LENGTHTYPE_MM = 7;
  const unsigned short SVG_LENGTHTYPE_IN = 8;
  const unsigned short SVG_LENGTHTYPE_PT = 9;
  const unsigned short SVG_LENGTHTYPE_PC = 10;

  readonly attribute unsigned short unitType;
           attribute float value setraises(DOMException);
           attribute float valueInSpecifiedUnits setraises(DOMException);
           attribute DOMString valueAsString setraises(DOMException);

  void newValueSpecifiedUnits(in unsigned short unitType, in float valueInSpecifiedUnits) raises(DOMException);
  void convertToSpecifiedUnits(in unsigned short unitType) raises(DOMException);
};

Constants in group “Length Unit Types”:

SVG_LENGTHTYPE_UNKNOWN (unsigned short)

The unit type is not one of predefined unit types. It is invalid to attempt to define a new value of this type or to attempt to switch an existing value to this type.

SVG_LENGTHTYPE_NUMBER (unsigned short)

No unit type was provided (i.e., a unitless value was specified), which indicates a value in user units.

SVG_LENGTHTYPE_PERCENTAGE (unsigned short)

A percentage value was specified.

SVG_LENGTHTYPE_EMS (unsigned short)

A value was specified using the em units defined in CSS2.

SVG_LENGTHTYPE_EXS (unsigned short)

A value was specified using the ex units defined in CSS2.

SVG_LENGTHTYPE_PX (unsigned short)

A value was specified using the px units defined in CSS2.

SVG_LENGTHTYPE_CM (unsigned short)

A value was specified using the cm units defined in CSS2.

SVG_LENGTHTYPE_MM (unsigned short)

A value was specified using the mm units defined in CSS2.

SVG_LENGTHTYPE_IN (unsigned short)

A value was specified using the in units defined in CSS2.

SVG_LENGTHTYPE_PT (unsigned short)

A value was specified using the pt units defined in CSS2.

SVG_LENGTHTYPE_PC (unsigned short)

A value was specified using the pc units defined in CSS2.

Attributes:

unitType (readonly unsigned short)

The type of the value as specified by one of the SVG_LENGTHTYPE_* constants defined on this interface.

value (float)

The value as a floating point value, in user units. Setting this attribute will cause valueInSpecifiedUnits and valueAsString to be updated automatically to reflect this setting.

Exceptions on setting

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised when the length corresponds to a read only attribute or when the object itself is read only.

valueInSpecifiedUnits (float)

The value as a floating point value, in the units expressed by unitType. Setting this attribute will cause value and valueAsString to be updated automatically to reflect this setting.

Exceptions on setting

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised when the length corresponds to a read only attribute or when the object itself is read only.

valueAsString (DOMString)

The value as a string value, in the units expressed by unitType. Setting this attribute will cause value, valueInSpecifiedUnits and unitType to be updated automatically to reflect this setting.

Exceptions on setting

DOMException, code SYNTAX_ERR

Raised if the assigned string cannot be parsed as a valid <length>.

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised when the length corresponds to a read only attribute or when the object itself is read only.

Operations:

void newValueSpecifiedUnits(in unsigned short unitType, in float valueInSpecifiedUnits)

Reset the value as a number with an associated unitType, thereby replacing the values for all of the attributes on the object.

Parameters

1. unsigned short unitType
   The unit type for the value (e.g., SVG_LENGTHTYPE_MM).
2. float valueInSpecifiedUnits
   The new value.

Exceptions

DOMException, code NOT_SUPPORTED_ERR

Raised if unitType is SVG_LENGTHTYPE_UNKNOWN or not a valid unit type constant (one of the other SVG_LENGTHTYPE_* constants defined on this interface).

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised when the length corresponds to a read only attribute or when the object itself is read only.

void convertToSpecifiedUnits(in unsigned short unitType)

Preserve the same underlying stored value, but reset the stored unit identifier to the given unitType. Object attributes unitType, valueInSpecifiedUnits and valueAsString might be modified as a result of this method. For example, if the original value were "0.5cm" and the method was invoked to convert to millimeters, then the unitType would be changed to SVG_LENGTHTYPE_MM, valueInSpecifiedUnits would be changed to the numeric value 5 and valueAsString would be changed to "5mm".

Parameters

1. unsigned short unitType
   The unit type to switch to (e.g., SVG_LENGTHTYPE_MM).

Exceptions

DOMException, code NOT_SUPPORTED_ERR

Raised if unitType is SVG_LENGTHTYPE_UNKNOWN or not a valid unit type constant (one of the other SVG_LENGTHTYPE_* constants defined on this interface).

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised when the length corresponds to a read only attribute or when the object itself is read only.

4.5.12 Interface SVGAnimatedLength

Used for attributes of basic type <length> which can be animated.

interface SVGAnimatedLength {
  readonly attribute SVGLength baseVal;
  readonly attribute SVGLength animVal;
};

Attributes:

baseVal (readonly SVGLength)

The base value of the given attribute before applying any animations.

animVal (readonly SVGLength)

A read only SVGLength representing the current animated value of the given attribute. If the given attribute is not currently being animated, then the SVGLength will have the same contents as baseVal. The object referenced by animVal will always be distinct from the one referenced by baseVal, even when the attribute is not animated.

4.5.13 Interface SVGLengthList

This interface defines a list of SVGLength objects.

SVGLengthList has the same attributes and methods as other SVGxxxList interfaces. Implementers may consider using a single base class to implement the various SVGxxxList interfaces.

An SVGLengthList object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown, as described below.

interface SVGLengthList {

  readonly attribute unsigned long numberOfItems;

  void clear() raises(DOMException);
  SVGLength initialize(in SVGLength newItem) raises(DOMException);
  SVGLength getItem(in unsigned long index) raises(DOMException);
  SVGLength insertItemBefore(in SVGLength newItem, in unsigned long index) raises(DOMException);
  SVGLength replaceItem(in SVGLength newItem, in unsigned long index) raises(DOMException);
  SVGLength removeItem(in unsigned long index) raises(DOMException);
  SVGLength appendItem(in SVGLength newItem) raises(DOMException);
};

Attributes:

numberOfItems (readonly unsigned long)

The number of items in the list.

Operations:

void clear()

Clears all existing current items from the list, with the result being an empty list.

Exceptions

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised when the list corresponds to a read only attribute or when the object itself is read only.

SVGLength initialize(in SVGLength newItem)

Clears all existing current items from the list and re-initializes the list to hold the single item specified by the parameter. If the inserted item is already in a list, it is removed from its previous list before it is inserted into this list. The inserted item is the item itself and not a copy.

Parameters

1. SVGLength newItem
   The item which should become the only member of the list.

Returns

The item being inserted into the list.

Exceptions

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised when the list corresponds to a read only attribute or when the object itself is read only.

SVGLength getItem(in unsigned long index)

Returns the specified item from the list. The returned item is the item itself and not a copy. Any changes made to the item are immediately reflected in the list.

Parameters

1. unsigned long index
   The index of the item from the list which is to be returned. The first item is number 0.

Returns

The selected item.

Exceptions

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised when the list corresponds to a read only attribute or when the object itself is read only.

SVGLength insertItemBefore(in SVGLength newItem, in unsigned long index)

Inserts a new item into the list at the specified position. The first item is number 0. If newItem is already in a list, it is removed from its previous list before it is inserted into this list. The inserted item is the item itself and not a copy. If the item is already in this list, note that the index of the item to insert before is before the removal of the item.

Parameters

1. SVGLength newItem
   The item which is to be inserted into the list.
2. unsigned long index
   The index of the item before which the new item is to be inserted. The first item is number 0. If the index is equal to 0, then the new item is inserted at the front of the list. If the index is greater than or equal to numberOfItems, then the new item is appended to the end of the list.

Returns

The inserted item.

Exceptions

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised when the list corresponds to a read only attribute or when the object itself is read only.

SVGLength replaceItem(in SVGLength newItem, in unsigned long index)

Replaces an existing item in the list with a new item. If newItem is already in a list, it is removed from its previous list before it is inserted into this list. The inserted item is the item itself and not a copy. If the item is already in this list, note that the index of the item to replace is before the removal of the item.

Parameters

1. SVGLength newItem
   The item which is to be inserted into the list.
2. unsigned long index
   The index of the item which is to be replaced. The first item is number 0.

Returns

The inserted item.

Exceptions

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised when the list corresponds to a read only attribute or when the object itself is read only.

DOMException, code INDEX_SIZE_ERR

Raised if the index number is greater than or equal to numberOfItems.

SVGLength removeItem(in unsigned long index)

Removes an existing item from the list.

Parameters

1. unsigned long index
   The index of the item which is to be removed. The first item is number 0.

Returns

The removed item.

Exceptions

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised when the list corresponds to a read only attribute or when the object itself is read only.

DOMException, code INDEX_SIZE_ERR

Raised if the index number is greater than or equal to numberOfItems.

SVGLength appendItem(in SVGLength newItem)

Inserts a new item at the end of the list. If newItem is already in a list, it is removed from its previous list before it is inserted into this list. The inserted item is the item itself and not a copy.

Parameters

1. SVGLength newItem
   The item which is to be inserted. The first item is number 0.

Returns

The inserted item.

Exceptions

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised when the list corresponds to a read only attribute or when the object itself is read only.

4.5.14 Interface SVGAnimatedLengthList

Used for attributes of type SVGLengthList which can be animated.

interface SVGAnimatedLengthList {
  readonly attribute SVGLengthList baseVal;
  readonly attribute SVGLengthList animVal;
};

Attributes:

baseVal (readonly SVGLengthList)

The base value of the given attribute before applying any animations.

animVal (readonly SVGLengthList)

A read only SVGLengthList representing the current animated value of the given attribute. If the given attribute is not currently being animated, then the SVGLengthList will have the same contents as baseVal. The object referenced by animVal will always be distinct from the one referenced by baseVal, even when the attribute is not animated.

4.5.15 Interface SVGAngle

The SVGAngle interface corresponds to the <angle> basic data type.

An SVGAngle object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown, as described below.

interface SVGAngle {

  // Angle Unit Types
  const unsigned short SVG_ANGLETYPE_UNKNOWN = 0;
  const unsigned short SVG_ANGLETYPE_UNSPECIFIED = 1;
  const unsigned short SVG_ANGLETYPE_DEG = 2;
  const unsigned short SVG_ANGLETYPE_RAD = 3;
  const unsigned short SVG_ANGLETYPE_GRAD = 4;

  readonly attribute unsigned short unitType;
           attribute float value setraises(DOMException);
           attribute float valueInSpecifiedUnits setraises(DOMException);
           attribute DOMString valueAsString setraises(DOMException);

  void newValueSpecifiedUnits(in unsigned short unitType, in float valueInSpecifiedUnits) raises(DOMException);
  void convertToSpecifiedUnits(in unsigned short unitType) raises(DOMException);
};

Constants in group “Angle Unit Types”:

SVG_ANGLETYPE_UNKNOWN (unsigned short)

The unit type is not one of predefined unit types. It is invalid to attempt to define a new value of this type or to attempt to switch an existing value to this type.

SVG_ANGLETYPE_UNSPECIFIED (unsigned short)

No unit type was provided (i.e., a unitless value was specified). For angles, a unitless value is treated the same as if degrees were specified.

SVG_ANGLETYPE_DEG (unsigned short)

The unit type was explicitly set to degrees.

SVG_ANGLETYPE_RAD (unsigned short)

The unit type is radians.

SVG_ANGLETYPE_GRAD (unsigned short)

The unit type is radians.

Attributes:

unitType (readonly unsigned short)

The type of the value as specified by one of the SVG_ANGLETYPE_* constants defined on this interface.

value (float)

The angle value as a floating point value, in degrees. Setting this attribute will cause valueInSpecifiedUnits and valueAsString to be updated automatically to reflect this setting.

Exceptions on setting

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised when the angle corresponds to a read only attribute or when the object itself is read only.

valueInSpecifiedUnits (float)

The angle value as a floating point value, in the units expressed by unitType. Setting this attribute will cause value and valueAsString to be updated automatically to reflect this setting.

Exceptions on setting

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised when the angle corresponds to a read only attribute or when the object itself is read only.

valueAsString (DOMString)

The angle value as a string value, in the units expressed by unitType. Setting this attribute will cause value, valueInSpecifiedUnits and unitType to be updated automatically to reflect this setting.

Exceptions on setting

DOMException, code SYNTAX_ERR

Raised if the assigned string cannot be parsed as a valid <angle>.

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised when the angle corresponds to a read only attribute or when the object itself is read only.

Operations:

void newValueSpecifiedUnits(in unsigned short unitType, in float valueInSpecifiedUnits)

Reset the value as a number with an associated unitType, thereby replacing the values for all of the attributes on the object.

Parameters

1. unsigned short unitType
   The unit type for the value (e.g., SVG_ANGLETYPE_DEG).
2. float valueInSpecifiedUnits
   The angle value.

Exceptions

DOMException, code NOT_SUPPORTED_ERR

Raised if unitType is SVG_ANGLETYPE_UNKNOWN or not a valid unit type constant (one of the other SVG_ANGLETYPE_* constants defined on this interface).

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised when the angle corresponds to a read only attribute or when the object itself is read only.

void convertToSpecifiedUnits(in unsigned short unitType)

Preserve the same underlying stored value, but reset the stored unit identifier to the given unitType. Object attributes unitType, valueInSpecifiedUnits and valueAsString might be modified as a result of this method.

Parameters

1. unsigned short unitType
   The unit type to switch to (e.g., SVG_ANGLETYPE_DEG).

Exceptions

DOMException, code NOT_SUPPORTED_ERR

Raised if unitType is SVG_ANGLETYPE_UNKNOWN or not a valid unit type constant (one of the other SVG_ANGLETYPE_* constants defined on this interface).

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised when the angle corresponds to a read only attribute or when the object itself is read only.

4.5.16 Interface SVGAnimatedAngle

Used for attributes of basic data type <angle> that can be animated.

interface SVGAnimatedAngle {
  readonly attribute SVGAngle baseVal;
  readonly attribute SVGAngle animVal;
};

Attributes:

baseVal (readonly SVGAngle)

The base value of the given attribute before applying any animations.

animVal (readonly SVGAngle)

A read only SVGAngle representing the current animated value of the given attribute. If the given attribute is not currently being animated, then the SVGAngle will have the same contents as baseVal. The object referenced by animVal will always be distinct from the one referenced by baseVal, even when the attribute is not animated.

4.5.17 Interface SVGColor

The SVGColor interface corresponds to color value definition for properties ‘stop-color’, ‘flood-color’ and ‘lighting-color’ and is a base class for interface SVGPaint. It incorporates SVG's extended notion of color, which incorporates ICC-based color specifications.

Interface SVGColor does not correspond to the <color> basic data type. For the <color> basic data type, the applicable DOM interfaces are defined in DOM Level 2 Style; in particular, see the RGBColor interface ([DOM2STYLE], section 2.2).

Note: The SVGColor interface is deprecated, and may be dropped from future versions of the SVG specification.

interface SVGColor : CSSValue {

  // Color Types
  const unsigned short SVG_COLORTYPE_UNKNOWN = 0;
  const unsigned short SVG_COLORTYPE_RGBCOLOR = 1;
  const unsigned short SVG_COLORTYPE_RGBCOLOR_ICCCOLOR = 2;
  const unsigned short SVG_COLORTYPE_CURRENTCOLOR = 3;

  readonly attribute unsigned short colorType;
  readonly attribute RGBColor rgbColor;
  readonly attribute SVGICCColor iccColor;

  void setRGBColor(in DOMString rgbColor) raises(SVGException);
  void setRGBColorICCColor(in DOMString rgbColor, in DOMString iccColor) raises(SVGException);
  void setColor(in unsigned short colorType, in DOMString rgbColor, in DOMString iccColor) raises(SVGException);
};

Constants in group “Color Types”:

SVG_COLORTYPE_UNKNOWN (unsigned short)

The color type is not one of predefined types. It is invalid to attempt to define a new value of this type or to attempt to switch an existing value to this type.

SVG_COLORTYPE_RGBCOLOR (unsigned short)

An sRGB color has been specified without an alternative ICC color specification.

SVG_COLORTYPE_RGBCOLOR_ICCCOLOR (unsigned short)

An sRGB color has been specified along with an alternative ICC color specification.

SVG_COLORTYPE_CURRENTCOLOR (unsigned short)

Corresponds to when keyword currentColor has been specified.

Attributes:

colorType (readonly unsigned short)

The type of the value as specified by one of the SVG_COLORTYPE_* constants defined on this interface.

rgbColor (readonly RGBColor)

The color specified in the sRGB color space.

iccColor (readonly SVGICCColor)

The alternate ICC color specification.

Operations:

void setRGBColor(in DOMString rgbColor)

Modifies the color value to be the specified sRGB color without an alternate ICC color specification.

Parameters

1. DOMString rgbColor
   A string that matches <color>, which specifies the new sRGB color value.

Exceptions

SVGException, code SVG_INVALID_VALUE_ERR

Raised if rgbColor does not match <color>.

void setRGBColorICCColor(in DOMString rgbColor, in DOMString iccColor)

Modifies the color value to be the specified sRGB color with an alternate ICC color specification.

Parameters

1. DOMString rgbColor
   A string that matches <color>, which specifies the new sRGB color value.
2. DOMString iccColor
   A string that matches <icccolor>, which specifies the alternate ICC color specification.

Exceptions

SVGException, code SVG_INVALID_VALUE_ERR

Raised if rgbColor does not match <color> or if iccColor does not match <icccolor>.

void setColor(in unsigned short colorType, in DOMString rgbColor, in DOMString iccColor)

Sets the color value as specified by the parameters. If colorType requires an RGBColor, then rgbColor must be a string that matches <color>; otherwise, rgbColor. must be null. If colorType requires an SVGICCColor, then iccColor must be a string that matches <icccolor>; otherwise, iccColor must be null.

Parameters

1. unsigned short colorType
   One of the defined constants for colorType.
2. DOMString rgbColor
   The specification of an sRGB color, or null.
3. DOMString iccColor
   The specification of an ICC color, or null.

Exceptions

SVGException, code SVG_INVALID_VALUE_ERR

Raised if one of the parameters has an invalid value.

4.5.18 Interface SVGICCColor

The SVGICCColor interface expresses an ICC-based color specification.

Note: The SVGICCColor interface is deprecated, and may be dropped from future versions of the SVG specification.

interface SVGICCColor {
           attribute DOMString colorProfile setraises(DOMException);
  readonly attribute SVGNumberList colors;
};

Attributes:

colorProfile (DOMString)

The name of the color profile, which is the first parameter of an ICC color specification.

Exceptions on setting

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised on an attempt to change the value of a read only attribute.

colors (readonly SVGNumberList)

The list of color values that define this ICC color. Each color value is an arbitrary floating point number.

4.5.19 Interface SVGRect

Represents rectangular geometry. Rectangles are defined as consisting of a (x,y) coordinate pair identifying a minimum X value, a minimum Y value, and a width and height, which are usually constrained to be non-negative.

An SVGRect object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown, as described below.

interface SVGRect {
  attribute float x setraises(DOMException);
  attribute float y setraises(DOMException);
  attribute float width setraises(DOMException);
  attribute float height setraises(DOMException);
};

Attributes:

x (float)

The x coordinate of the rectangle, in user units.

Exceptions on setting

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised when the rectangle corresponds to a read only attribute or when the object itself is read only.

y (float)

The y coordinate of the rectangle, in user units.

Exceptions on setting

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised when the rectangle corresponds to a read only attribute or when the object itself is read only.

width (float)

The width coordinate of the rectangle, in user units.

Exceptions on setting

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised when the rectangle corresponds to a read only attribute or when the object itself is read only.

height (float)

The height coordinate of the rectangle, in user units.

Exceptions on setting

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised when the rectangle corresponds to a read only attribute or when the object itself is read only.

4.5.20 Interface SVGAnimatedRect

Used for attributes of type SVGRect which can be animated.

interface SVGAnimatedRect {
  readonly attribute SVGRect baseVal;
  readonly attribute SVGRect animVal;
};

Attributes:

baseVal (readonly SVGRect)

The base value of the given attribute before applying any animations.

animVal (readonly SVGRect)

A read only SVGRect representing the current animated value of the given attribute. If the given attribute is not currently being animated, then the SVGRect will have the same contents as baseVal. The object referenced by animVal will always be distinct from the one referenced by baseVal, even when the attribute is not animated.

4.5.21 Interface SVGUnitTypes

The SVGUnitTypes interface defines a commonly used set of constants and is a base interface used by SVGGradientElement, SVGPatternElement, SVGClipPathElement, SVGMaskElement and SVGFilterElement.

interface SVGUnitTypes {
  // Unit Types
  const unsigned short SVG_UNIT_TYPE_UNKNOWN = 0;
  const unsigned short SVG_UNIT_TYPE_USERSPACEONUSE = 1;
  const unsigned short SVG_UNIT_TYPE_OBJECTBOUNDINGBOX = 2;
};

Constants in group “Unit Types”:

SVG_UNIT_TYPE_UNKNOWN (unsigned short)

The type is not one of predefined types. It is invalid to attempt to define a new value of this type or to attempt to switch an existing value to this type.

SVG_UNIT_TYPE_USERSPACEONUSE (unsigned short)

Corresponds to value 'userSpaceOnUse'.

SVG_UNIT_TYPE_OBJECTBOUNDINGBOX (unsigned short)

Corresponds to value 'objectBoundingBox'.

4.5.22 Interface SVGStylable

The SVGStylable interface is implemented on all objects corresponding to SVG elements that can have ‘style’, ‘class’ and presentation attributes specified on them. It is thus an ancestor interface for many of the interfaces defined in this specification.

interface SVGStylable {

  readonly attribute SVGAnimatedString className;
  readonly attribute CSSStyleDeclaration style;

  CSSValue getPresentationAttribute(in DOMString name);
};

Attributes:

className (readonly SVGAnimatedString)

Corresponds to attribute ‘class’ on the given element.

style (readonly CSSStyleDeclaration)

Corresponds to attribute ‘style’ on the given element. If the user agent does not support styling with CSS, then this attribute must always have the value of null.

Operations:

CSSValue getPresentationAttribute(in DOMString name)

Returns the base (i.e., static) value of a given presentation attribute as an object of type CSSValue. The returned object is live; changes to the objects represent immediate changes to the objects to which the CSSValue is attached.

Note: The getPresentationAttribute method is deprecated, and may be dropped from future versions of the SVG specification.

Parameters

1. DOMString name
   The name of the presentation attribute whose value is to be returned.

Returns

The static/base value of the given presentation attribute as a CSSValue, or null if the given attribute does not have a specified value.

4.5.23 Interface SVGLocatable

Interface SVGLocatable is for all elements which either have a ‘transform’ attribute or don't have a ‘transform’ attribute but whose content can have a bounding box in current user space.

interface SVGLocatable {

  readonly attribute SVGElement nearestViewportElement;
  readonly attribute SVGElement farthestViewportElement;

  SVGRect getBBox();
  SVGMatrix getCTM();
  SVGMatrix getScreenCTM();
  SVGMatrix getTransformToElement(in SVGElement element) raises(SVGException);
};

Attributes:

nearestViewportElement (readonly SVGElement)

The element which established the current viewport. Often, the nearest ancestor ‘svg’ element. Null if the current element is the outermost svg element.

farthestViewportElement (readonly SVGElement)

The farthest ancestor ‘svg’ element. Null if the current element is the outermost svg element.

Operations:

SVGRect getBBox()

Returns the tight bounding box in current user space (i.e., after application of the ‘transform’ attribute, if any) on the geometry of all contained graphics elements, exclusive of stroking, clipping, masking and filter effects). Note that getBBox must return the actual bounding box at the time the method was called, even in case the element has not yet been rendered.

Returns

An SVGRect object that defines the bounding box.

SVGMatrix getCTM()

Returns the transformation matrix from current user units (i.e., after application of the ‘transform’ attribute, if any) to the viewport coordinate system for the nearestViewportElement.

Returns

An SVGMatrix object that defines the CTM.

SVGMatrix getScreenCTM()

Returns the transformation matrix from current user units (i.e., after application of the ‘transform’ attribute, if any) to the parent user agent's notice of a "pixel". For display devices, ideally this represents a physical screen pixel. For other devices or environments where physical pixel sizes are not known, then an algorithm similar to the CSS2 definition of a "pixel" can be used instead. Note that null is returned if this element is not hooked into the document tree. This method would have been more aptly named as getClientCTM, but the name getScreenCTM is kept for historical reasons.

Returns

An SVGMatrix object that defines the given transformation matrix.

SVGMatrix getTransformToElement(in SVGElement element)

Returns the transformation matrix from the user coordinate system on the current element (after application of the ‘transform’ attribute, if any) to the user coordinate system on parameter element (after application of its ‘transform’ attribute, if any).

Parameters

1. SVGElement element
   The target element.

Returns

An SVGMatrix object that defines the transformation.

Exceptions

SVGException, code SVG_MATRIX_NOT_INVERTABLE

Raised if the currently defined transformation matrices make it impossible to compute the given matrix (e.g., because one of the transformations is singular).

4.5.24 Interface SVGTransformable

Interface SVGTransformable contains properties and methods that apply to all elements which have attribute ‘transform’.

interface SVGTransformable : SVGLocatable {
  readonly attribute SVGAnimatedTransformList transform;
};

Attributes:

transform (readonly SVGAnimatedTransformList)

Corresponds to attribute ‘transform’ on the given element.

4.5.25 Interface SVGTests

Interface SVGTests defines an interface which applies to all elements which have attributes ‘requiredFeatures’, ‘requiredExtensions’ and ‘systemLanguage’.

interface SVGTests {

  readonly attribute SVGStringList requiredFeatures;
  readonly attribute SVGStringList requiredExtensions;
  readonly attribute SVGStringList systemLanguage;

  boolean hasExtension(in DOMString extension);
};

Attributes:

requiredFeatures (readonly SVGStringList)

Corresponds to attribute ‘requiredFeatures’ on the given element.

requiredExtensions (readonly SVGStringList)

Corresponds to attribute ‘requiredExtensions’ on the given element.

systemLanguage (readonly SVGStringList)

Corresponds to attribute ‘systemLanguage’ on the given element.

Operations:

boolean hasExtension(in DOMString extension)

Returns true if the user agent supports the given extension, specified by a URI.

Parameters

1. DOMString extension
   The name of the extension, expressed as a URI.

Returns

True or false, depending on whether the given extension is supported.

4.5.26 Interface SVGLangSpace

Interface SVGLangSpace defines an interface which applies to all elements which have attributes ‘xml:lang’ and ‘xml:space’.

interface SVGLangSpace {
  attribute DOMString xmllang setraises(DOMException);
  attribute DOMString xmlspace setraises(DOMException);
};

Attributes:

xmllang (DOMString)

Corresponds to attribute ‘xml:lang’ on the given element.

Exceptions on setting

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised on an attempt to change the value of a read only attribute.

xmlspace (DOMString)

Corresponds to attribute ‘xml:space’ on the given element.

Exceptions on setting

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised on an attempt to change the value of a read only attribute.

4.5.27 Interface SVGExternalResourcesRequired

Interface SVGExternalResourcesRequired defines an interface which applies to all elements where this element or one of its descendants can reference an external resource.

interface SVGExternalResourcesRequired {
  readonly attribute SVGAnimatedBoolean externalResourcesRequired;
};

Attributes:

externalResourcesRequired (readonly SVGAnimatedBoolean)

Corresponds to attribute ‘externalResourcesRequired’ on the given element. Note that the SVG DOM defines the attribute ‘externalResourcesRequired’ as being of type SVGAnimatedBoolean, whereas the SVG language definition says that ‘externalResourcesRequired’ is not animated. Because the SVG language definition states that ‘externalResourcesRequired’ cannot be animated, the animVal will always be the same as the baseVal.

4.5.28 Interface SVGFitToViewBox

Interface SVGFitToViewBox defines DOM attributes that apply to elements which have XML attributes ‘viewBox’ and ‘preserveAspectRatio’.

interface SVGFitToViewBox {
  readonly attribute SVGAnimatedRect viewBox;
  readonly attribute SVGAnimatedPreserveAspectRatio preserveAspectRatio;
};

Attributes:

viewBox (readonly SVGAnimatedRect)

Corresponds to attribute ‘viewBox’ on the given element.

preserveAspectRatio (readonly SVGAnimatedPreserveAspectRatio)

Corresponds to attribute ‘preserveAspectRatio’ on the given element.

4.5.29 Interface SVGZoomAndPan

The SVGZoomAndPan interface defines attribute zoomAndPan and associated constants.

interface SVGZoomAndPan {

  // Zoom and Pan Types
  const unsigned short SVG_ZOOMANDPAN_UNKNOWN = 0;
  const unsigned short SVG_ZOOMANDPAN_DISABLE = 1;
  const unsigned short SVG_ZOOMANDPAN_MAGNIFY = 2;

  attribute unsigned short zoomAndPan setraises(DOMException);
};

Constants in group “Zoom and Pan Types”:

SVG_ZOOMANDPAN_UNKNOWN (unsigned short)

The enumeration was set to a value that is not one of predefined types. It is invalid to attempt to define a new value of this type or to attempt to switch an existing value to this type.

SVG_ZOOMANDPAN_DISABLE (unsigned short)

Corresponds to value 'disable'.

SVG_ZOOMANDPAN_MAGNIFY (unsigned short)

Corresponds to value 'magnify'.

Attributes:

zoomAndPan (unsigned short)

Corresponds to attribute ‘zoomAndPan’ on the given element. The value must be one of the SVG_ZOOMANDPAN_* constants defined on this interface.

Exceptions on setting

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised on an attempt to change the value of a read only attribute.

4.5.30 Interface SVGViewSpec

The interface corresponds to an SVG View Specification.

interface SVGViewSpec : SVGZoomAndPan,
                        SVGFitToViewBox {
  readonly attribute SVGTransformList transform;
  readonly attribute SVGElement viewTarget;
  readonly attribute DOMString viewBoxString;
  readonly attribute DOMString preserveAspectRatioString;
  readonly attribute DOMString transformString;
  readonly attribute DOMString viewTargetString;
};

Attributes:

transform (readonly SVGTransformList)

Corresponds to the transform setting on the SVG View Specification.

viewTarget (readonly SVGElement)

Corresponds to the viewTarget setting on the SVG View Specification.

viewBoxString (readonly DOMString)

Corresponds to the viewBox setting on the SVG View Specification.

preserveAspectRatioString (readonly DOMString)

Corresponds to the preserveAspectRatio setting on the SVG View Specification.

transformString (readonly DOMString)

Corresponds to the transform setting on the SVG View Specification.

viewTargetString (readonly DOMString)

Corresponds to the viewTarget setting on the SVG View Specification.

4.5.31 Interface SVGURIReference

Interface SVGURIReference defines an interface which applies to all elements which have the collection of XLink attributes, such as ‘xlink:href’, which define a URI reference.

interface SVGURIReference {
  readonly attribute SVGAnimatedString href;
};

Attributes:

href (readonly SVGAnimatedString)

Corresponds to attribute ‘xlink:href’ on the given element.

4.5.32 Interface SVGCSSRule

SVG extends interface CSSRule with interface SVGCSSRule by adding an SVGColorProfileRule rule to allow for specification of ICC-based color.

It is likely that this extension will become part of a future version of CSS and DOM.

interface SVGCSSRule : CSSRule {
  const unsigned short COLOR_PROFILE_RULE = 7;
};

Constants:

COLOR_PROFILE_RULE (unsigned short)

The rule is an @color-profile.

4.5.33 Interface SVGRenderingIntent

The SVGRenderingIntent interface defines the enumerated list of possible values for ‘rendering-intent’ attributes or descriptors.

interface SVGRenderingIntent {
  // Rendering Intent Types
  const unsigned short RENDERING_INTENT_UNKNOWN = 0;
  const unsigned short RENDERING_INTENT_AUTO = 1;
  const unsigned short RENDERING_INTENT_PERCEPTUAL = 2;
  const unsigned short RENDERING_INTENT_RELATIVE_COLORIMETRIC = 3;
  const unsigned short RENDERING_INTENT_SATURATION = 4;
  const unsigned short RENDERING_INTENT_ABSOLUTE_COLORIMETRIC = 5;
};

Constants in group “Rendering Intent Types”:

RENDERING_INTENT_UNKNOWN (unsigned short)

The type is not one of predefined types. It is invalid to attempt to define a new value of this type or to attempt to switch an existing value to this type.

RENDERING_INTENT_AUTO (unsigned short)

Corresponds to a value of 'auto'.

RENDERING_INTENT_PERCEPTUAL (unsigned short)

Corresponds to a value of 'perceptual'.

RENDERING_INTENT_RELATIVE_COLORIMETRIC (unsigned short)

Corresponds to a value of 'relative-colorimetric'.

RENDERING_INTENT_SATURATION (unsigned short)

Corresponds to a value of 'saturation'.

RENDERING_INTENT_ABSOLUTE_COLORIMETRIC (unsigned short)

Corresponds to a value of 'absolute-colorimetric'.