Table of Contents

• Full Table of Contents
• 1. Introduction
• 2. Concepts
• 3. Rendering Model
• 4. Basic Data Types and Interfaces
• 5. Document Structure
• 6. Styling
• 7. Coordinate Systems, Transformations and Units
• 8. Paths
• 9. Basic Shapes
• 10. Text
• 11. Painting: Filling, Stroking and Marker Symbols
• 12. Color
• 13. Paint Servers: Solid Colors, Gradients, and Patterns
• 14. Clipping, Masking and Compositing
• 15. Filter Effects
• 16. Interactivity
• 17. Linking
• 18. Scripting
• 19. Animation
• 20. Fonts
• 21. Metadata
• 22. Backwards Compatibility
• 23. Extensibility
• Appendix A: SVG Document Object Model (DOM)
• Appendix B: IDL Definitions
• Appendix C: Implementation Requirements
• Appendix D: Conformance Criteria
• Appendix E: Accessibility Support
• Appendix F: Internationalization Support
• Appendix G: Minimizing SVG File Sizes
• Appendix H: References
• Appendix I: Element Index
• Appendix J: Attribute Index
• Appendix K: Property Index
• Appendix L: Feature Strings
• Appendix M: Media Type Registration for image/svg+xml
• Appendix N: Changes from SVG 1.1

Full Table of Contents

• 1. Introduction
  • 1.1. About SVG
  • 1.2. SVG MIME type, file name extension and Macintosh file type
  • 1.3. SVG namespace and DTD
  • 1.4. Compatibility with other standards efforts
  • 1.5. Terminology
  • 1.6. Definitions
• 2. Concepts
  • 2.1. Explaining the name: SVG
  • 2.2. Important SVG concepts
  • 2.3. Options for using SVG in Web pages
• 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. 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 SVGLocatableElement
    • 4.5.23. Interface SVGTransformableElement
    • 4.5.24. Interface SVGGraphicsElement
    • 4.5.25. Interface SVGDefinitionElement
    • 4.5.26. Interface SVGTests
    • 4.5.27. Interface SVGFitToViewBox
    • 4.5.28. Interface SVGZoomAndPan
    • 4.5.29. Interface SVGViewSpec
    • 4.5.30. Interface SVGURIReference
    • 4.5.31. Interface SVGCSSRule
    • 4.5.32. Interface SVGRenderingIntent
• 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 ‘discard’ element
  • 5.5. The ‘desc’ and ‘title’ elements
  • 5.6. The ‘symbol’ element
  • 5.7. The ‘use’ element
  • 5.8. The ‘image’ element
  • 5.9. Conditional processing
    • 5.9.1. Conditional processing overview
    • 5.9.2. The ‘switch’ element
    • 5.9.3. The ‘requiredFeatures’ attribute
    • 5.9.4. The ‘requiredExtensions’ attribute
    • 5.9.5. The ‘systemLanguage’ attribute
    • 5.9.6. Applicability of test attributes
  • 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. 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. Property inheritance
  • 6.14. The scope/range of styles
  • 6.15. User agent style sheet
  • 6.16. Aural style sheets
  • 6.17. DOM interfaces
    • 6.17.1. Interface SVGStyleElement
• 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’ property
  • 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. 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. 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. 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. Setting the inline-progression-direction
    • 10.7.2. Glyph orientation within a text run
    • 10.7.3. Relationship with bidirectionality
  • 10.8. Text rendering order
    • 10.8.1. Text overflow processing
  • 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. The ‘textPath’ element
    • 10.13.2. 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.15.1. SVG 2 Preferred white space handling
    • 10.15.2. Legacy whitespace handling
    • 10.15.3. Duplicate whitespace directives
  • 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. Painting: Filling, Stroking and Marker Symbols
  • 11.1. Introduction
  • 11.2. Specifying paint
  • 11.3. Fill properties
    • 11.3.1. Specifying fill paint: the ‘fill’ property
    • 11.3.2. Winding rule: the ‘fill-rule’ property
    • 11.3.3. Fill paint opacity: the ‘fill-opacity’ property
  • 11.4. Stroke properties
    • 11.4.1. Specifying stroke paint: the ‘stroke’ property
    • 11.4.2. Stroke paint opacity: the ‘stroke-opacity’ property
    • 11.4.3. Stroke width: the ‘stroke-width’ property
    • 11.4.4. Drawing caps at the ends of strokes: the ‘stroke-linecap’ property
    • 11.4.5. Controlling line joins: the ‘stroke-linejoin’ and ‘stroke-miterlimit’ properties
    • 11.4.6. Dashing strokes: the ‘stroke-dasharray’ and ‘stroke-dashoffset’ properties
    • 11.4.7. Computing the shape of the stroke
  • 11.5. Controlling visibility: the effect of the ‘display’ and ‘visibility’ properties
  • 11.6. Markers
    • 11.6.1. The ‘marker’ element
    • 11.6.2. Vertex markers: the ‘marker-start’, ‘marker-mid’ and ‘marker-end’ properties
    • 11.6.3. Segment markers: the ‘marker-segment’ property
    • 11.6.4. Repeating markers: the ‘marker-pattern’ property
    • 11.6.5. Marker shorthand: the ‘marker’ property
    • 11.6.6. Knocking out the stroke: the ‘marker-knockout-left’ and ‘marker-knockout-right’ properties
    • 11.6.7. Details on how markers are rendered
  • 11.7. Controlling paint operation order: the ‘paint-order’ property
  • 11.8. Color space for interpolation: the ‘color-interpolation’ property
  • 11.9. Rendering hints
    • 11.9.1. The ‘color-rendering’ property
    • 11.9.2. The ‘shape-rendering’ property
    • 11.9.3. The ‘text-rendering’ property
    • 11.9.4. The ‘image-rendering’ property
    • 11.9.5. The ‘buffered-rendering’ property
  • 11.10. Inheritance of painting properties
  • 11.11. DOM interfaces
    • 11.11.1. Interface SVGPaint
    • 11.11.2. Interface SVGMarkerElement
• 12. Color
  • 12.1. Introduction
  • 12.2. Color-managed images
  • 12.3. Color syntax
    • 12.3.1. sRGB colors
    • 12.3.2. sRGB colors with alpha
    • 12.3.3. ICC colors
    • 12.3.4. LAB color
    • 12.3.5. ICC named color
  • 12.4. Unmanaged colors
    • 12.4.1. Uncalibrated device color
  • 12.5. The effect of the ‘color’ property
  • 12.6. Color profile descriptions
    • 12.6.1. Overview of color profile descriptions
    • 12.6.2. Alternative ways of defining a color profile description
    • 12.6.3. The ‘color-profile’ element
    • 12.6.4. The CSS @color-profile rule
  • 12.7. Color syntax
  • 12.8. DOM interfaces
    • 12.8.1. Interface SVGColorProfileElement
    • 12.8.2. Interface SVGColorProfileRule
• 13. Paint Servers: Solid Colors, Gradients, and Patterns
  • 13.1. Introduction
  • 13.2. Solid colors
    • 13.2.1. Properties
  • 13.3. Gradients
    • 13.3.1. Linear gradients
      • 13.3.1.1. Attributes
      • 13.3.1.2. Notes on linear gradients
    • 13.3.2. Radial gradients
      • 13.3.2.1. Attributes
      • 13.3.2.2. Notes on radial gradients
    • 13.3.3. Mesh gradients
    • 13.3.4. Gradient stops
      • 13.3.4.1. Attributes
      • 13.3.4.2. Properties
      • 13.3.4.3. Notes on gradient stops
  • 13.4. Patterns
    • 13.4.1. Attributes
    • 13.4.2. Notes on patterns
  • 13.5. DOM interfaces
    • 13.5.1. Interface SVGSolidColorElement
    • 13.5.2. Interface SVGGradientElement
    • 13.5.3. Interface SVGLinearGradientElement
    • 13.5.4. Interface SVGRadialGradientElement
    • 13.5.5. Interface SVGMeshGradientElement
    • 13.5.6. Interface SVGMeshRowElement
    • 13.5.7. Interface SVGMeshPatchElement
    • 13.5.8. Interface SVGStopElement
    • 13.5.9. Interface SVGPatternElement
• 14. Clipping, Masking and Compositing
  • 14.1. Introduction
  • 14.2. Simple alpha compositing
  • 14.3. Clipping paths
    • 14.3.1. The initial clipping path
    • 14.3.2. The ‘overflow’ and ‘clip’ properties
    • 14.3.3. Clip to viewport vs. clip to ‘viewBox’
    • 14.3.4. Establishing a new clipping path: the ‘clipPath’ element
    • 14.3.5. Clipping paths, geometry, and pointer events
  • 14.4. Masking
    • 14.4.1. The ‘mask’ property
    • 14.4.2. Mask source content
      • 14.4.2.1. Calculating mask values
      • 14.4.2.2. Defining a mask source: the ‘mask’ element
      • 14.4.2.3. Using an SVG paint server as a mask source
  • 14.5. Object and group opacity: the effect of the ‘opacity’ property
  • 14.6. DOM interfaces
    • 14.6.1. Interface SVGClipPathElement
    • 14.6.2. Interface SVGMaskElement
• 15. Filter Effects
• 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. The effect of the ‘cursor’ property
    • 16.8.2. The ‘cursor’ element
  • 16.9. DOM interfaces
    • 16.9.1. Interface SVGCursorElement
• 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. SVG fragment identifiers
    • 17.3.2. Predefined views: the ‘view’ element
    • 17.3.3. Highlighting views
  • 17.4. DOM interfaces
    • 17.4.1. Interface SVGAElement
    • 17.4.2. Interface SVGViewElement
• 18. Scripting
  • 18.1. The ‘script’ element
  • 18.2. Event handling
  • 18.3. Event attributes
    • 18.3.1. Event attribute for the SVGLoad event
    • 18.3.2. Event attributes on graphics and container elements
    • 18.3.3. Document-level event attributes
    • 18.3.4. Animation event attributes
  • 18.4. DOM interfaces
    • 18.4.1. Interface SVGScriptElement
    • 18.4.2. Interface SVGZoomEvent
• 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 TimeEvent
    • 19.4.2. Interface SVGAnimationElement
    • 19.4.3. Interface SVGAnimateElement
    • 19.4.4. Interface SVGSetElement
    • 19.4.5. Interface SVGAnimateMotionElement
    • 19.4.6. Interface SVGMPathElement
    • 19.4.7. Interface SVGAnimateColorElement
    • 19.4.8. Interface SVGAnimateTransformElement
• 20. Fonts
  • 20.1. Introduction
  • 20.2. Describing a font
    • 20.2.1. Overview of font descriptions
    • 20.2.2. Alternative ways for providing a font description
    • 20.2.3. The ‘font-face’ element
    • 20.2.4. The ‘font-face-src’ element
    • 20.2.5. The ‘font-face-uri’ and ‘font-face-format’ elements
    • 20.2.6. The ‘font-face-name’ element
  • 20.3. Overview of SVG fonts
  • 20.4. The ‘font’ element
  • 20.5. The ‘glyph’ element
  • 20.6. The ‘missing-glyph’ element
  • 20.7. Glyph selection rules
  • 20.8. The ‘hkern’ and ‘vkern’ elements
  • 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. Metadata
  • 21.1. Introduction
  • 21.2. The ‘metadata’ element
  • 21.3. An example
  • 21.4. DOM interfaces
    • 21.4.1. Interface SVGMetadataElement
• 22. Backwards Compatibility
• 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. DOM interfaces
    • 23.5.1. Interface SVGForeignObjectElement
• Appendix A: SVG Document Object Model (DOM)
  • A.1. SVG DOM overview
    • A.1.1. SVG DOM object initialization
  • A.2. Elements in the SVG DOM
  • A.3. Naming conventions
  • A.4. Feature strings for the hasFeature method call
  • A.5. Relationship with DOM Level 2 Events
  • A.6. Relationship with DOM Level 2 CSS
    • A.6.1. User agents that do not support styling with CSS
    • A.6.2. User agents that support styling with CSS
    • A.6.3. Extended interfaces
  • A.7. Invalid values
• Appendix B: IDL Definitions
• Appendix C: Implementation Requirements
  • C.1. Introduction
  • C.2. Error processing
  • C.3. Version control
  • C.4. Clamping values which are restricted to a particular range
  • C.5. ‘path’ element implementation notes
  • C.6. Elliptical arc implementation notes
    • C.6.1. Elliptical arc syntax
    • C.6.2. Out-of-range parameters
    • C.6.3. Parameterization alternatives
    • C.6.4. Conversion from center to endpoint parameterization
    • C.6.5. Conversion from endpoint to center parameterization
    • C.6.6. Correction of out-of-range radii
  • C.7. Text selection implementation notes
  • C.8. Printing implementation notes
• Appendix D: Conformance Criteria
  • D.1. Introduction
  • D.2. Conforming SVG Document Fragments
  • D.3. Conforming SVG Stand-Alone Files
  • D.4. Conforming SVG Generators
  • D.5. Conforming SVG Servers
  • D.6. Conforming SVG DOM Subtree
  • D.7. Conforming SVG Interpreters
  • D.8. Conforming SVG Viewers
• Appendix E: Accessibility Support
  • E.1. WAI accessibility guidelines
  • E.2. SVG content accessibility guidelines
• Appendix F: Internationalization Support
  • F.1. Introduction
  • F.2. Internationalization and SVG
  • F.3. SVG internationalization guidelines
• Appendix G: Minimizing SVG File Sizes
• Appendix H: References
  • H.1. Normative references
  • H.2. Informative references
• Appendix I: Element Index
• Appendix J: Attribute Index
  • J.1. Regular attributes
  • J.2. Presentation attributes
• Appendix K: Property Index
• Appendix L: Feature Strings
  • L.1. Introduction
  • L.2. SVG 2 feature strings
  • L.3. SVG 1.1 feature strings
  • L.4. SVG 1.0 feature strings
• Appendix M: Media Type Registration for image/svg+xml
  • M.1. Introduction
  • M.2. Registration of media type image/svg+xml
• Appendix N: Changes from SVG 1.1
  • N.1. Editorial changes
  • N.2. Substantial changes
    • N.2.1. Across the whole document
    • N.2.2. Basic Data Types and Interfaces chapter
    • N.2.3. Document Structure chapter
    • N.2.4. Styling chapter
    • N.2.5. Text chapter
    • N.2.6. Painting chapter
    • N.2.7. Color chapter
    • N.2.8. Paint Servers chapter
    • N.2.9. Clipping, Masking and Compositing chapter
    • N.2.10. Filter Effects chapter
    • N.2.11. Scripting chapter
    • N.2.12. Animation chapter
    • N.2.13. Fonts chapter
    • N.2.14. Document Type Definition appendix
    • N.2.15. SVG Document Object Model (DOM) appendix
    • N.2.16. Java Language Binding appendix
    • N.2.17. ECMAScript Language Binding appendix
    • N.2.18. References appendix

Chapter 1: Introduction

Contents

• • 1.1. About SVG
  • 1.2. SVG MIME type, file name extension and Macintosh file type
  • 1.3. SVG namespace and DTD
  • 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.

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

  The plan is to move away from XLink and use non-namespaced attributes for linking, while keeping ‘xlink:href’ for compatibility with existing content. Other unrelated XLink attributes like ‘xlink:role’ will be removed.

• SVG content can be styled by either CSS (see Cascading Style Sheets (CSS) Level 2 Revision 1 [CSS21]) 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 extends DOM4. 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 [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 [DOM4].
• 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 DOM4 [DOM4] 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: ‘animate’, ‘animateColor’, ‘animateMotion’, ‘animateTransform’ 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’, ‘onrepeat’ and ‘onload’.

basic shape

shape

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

bounding box

Need a definition, which can probably be ported over from SVG Tiny 1.2.

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’, ‘g’, ‘glyph’, ‘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 ‘requiredFeatures’, ‘requiredExtensions’ 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.

decorated bounding box

Need a definition, which can probably be ported over from SVG Tiny 1.2.

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 ‘onunload’, ‘onabort’, ‘onerror’, ‘onresize’, ‘onscroll’ 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 ‘x’, ‘y’, ‘width’, ‘height’ and ‘result’.

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’, ‘feCustom’, ‘feDiffuseLighting’, ‘feDisplacementMap’, ‘feDropShadow’, ‘feFlood’, ‘feGaussianBlur’, ‘feImage’, ‘feMerge’, ‘feMorphology’, ‘feOffset’, ‘feSpecularLighting’, ‘feTile’, ‘feTurbulence’ and ‘feUnsharpMask’.

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’, ‘meshGradient’ 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 ‘onfocusin’, ‘onfocusout’, ‘onactivate’, ‘onclick’, ‘onmousedown’, ‘onmouseup’, ‘onmouseover’, ‘onmousemove’, ‘onmouseout’ and ‘onload’.

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 References and the ‘defs’ element.

invalid value

An invalid value specified for a property, either in a style sheet or a presentation attribute, is one that is either not allowed according to the grammar defining the property's values, or is allowed by the grammar but subsequently disallowed in prose. A CSS declaration with an invalid value is ignored; see Declarations and properties ([CSS21], section 4.1.8).

lacuna value

Provide an appropriate definition. This legalese sounding term comes from SVG 1.2 Tiny. A search for "lacuna value" results in the SVG 1.2 Tiny and the proto-SVG 2 specs (of February 2010).

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.

markable element

A markable element is one that can have markers painted on it either through the use of the marker properties or by having a ‘marker’ element as a child. The following elements are markable elements: ‘line’, ‘path’, ‘polygon’ and ‘polyline’

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 [CSS21]. 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.

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’, ‘text’, ‘textPath’, ‘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’). SVG 2 defines a single text content block element: ‘text’.

transformation

A modification of the current transformation matrix 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 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’.

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

  HTML5 doesn't have longdesc; we should reference the appropriate aria attributes.

• 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 [CSS21] 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 ([CSS21], sections 14.2.1 and 12.5.1) that are included in both CSS and XSL.

Chapter 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

There is an unresolved incompatibility with filter-effects. http://lists.w3.org/Archives/Public/public-svg-wg/2012JulSep/0050.html

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.

Chapter 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 SVGLocatableElement
    • 4.5.23. Interface SVGTransformableElement
    • 4.5.24. Interface SVGGraphicsElement
    • 4.5.25. Interface SVGDefinitionElement
    • 4.5.26. Interface SVGTests
    • 4.5.27. Interface SVGFitToViewBox
    • 4.5.28. Interface SVGZoomAndPan
    • 4.5.29. Interface SVGViewSpec
    • 4.5.30. Interface SVGURIReference
    • 4.5.31. Interface SVGCSSRule
    • 4.5.32. 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.

4.2. Basic data types

We should reference css3-values, and not redefine a bunch of types in this chapter.

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 mentioned 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 CSS 2.1 [CSS21], 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 CSS 2.1 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 CSS 2.1 syntax and basic data types ([CSS21], 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 System Colors ([CSS21], 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 System Colors ([CSS21], 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.

<child-selector>

A comma-separated list of compound selectors. When used, the scope in which the selectors are evaluated is also defined. Typically only the first matching element in tree order (as defined in [DOM4]) as a result of evaluating the list of selectors is used.

child-selector ::= select(compound selector#)

<coordinate>

Do we need this separate data type? Why not just <length> in all the places we currently use <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 CSS 2.1, 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(" author-ident (comma-wsp number)+ ")"

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

<image>

An image source (including gradients) as defined by CSS Level 4 Image Values ([CSS4IMAGES], section 4.3).

<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 CSS 2.1 specification for the meanings of the unit identifiers. The unit identifier may be in lower (recommended) or upper case.

  For properties defined in CSS 2.1 [CSS21], 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.

<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 ([CSS21], 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 property.

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>:

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;
           attribute DOMString xmlbase;

  readonly attribute SVGAnimatedString className;
  readonly attribute CSSStyleDeclaration style;

  CSSValue getPresentationAttribute(DOMString name);

  attribute DOMString xmllang;
  attribute DOMString xmlspace;

  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.

xmlbase (DOMString)

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

xmllang (DOMString)

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

xmlspace (DOMString)

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

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.

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.

Operations:

CSSValue getPresentationAttribute(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.2. Interface SVGAnimatedBoolean

interface SVGAnimatedBoolean {
           attribute boolean baseVal;
  readonly attribute boolean animVal;
};

Attributes:

baseVal (boolean)

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

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

interface SVGAnimatedString {
           attribute DOMString baseVal;
  readonly attribute DOMString animVal;
};

Attributes:

baseVal (DOMString)

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

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();
  DOMString initialize(DOMString newItem);
  DOMString getItem(unsigned long index);
  DOMString insertItemBefore(DOMString newItem, unsigned long index);
  DOMString replaceItem(DOMString newItem, unsigned long index);
  DOMString removeItem(unsigned long index);
  DOMString appendItem(DOMString newItem);
};

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(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(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(DOMString newItem, 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(DOMString newItem, 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(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(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

interface SVGAnimatedEnumeration {
           attribute unsigned short baseVal;
  readonly attribute unsigned short animVal;
};

Attributes:

baseVal (unsigned short)

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

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

interface SVGAnimatedInteger {
           attribute long baseVal;
  readonly attribute long animVal;
};

Attributes:

baseVal (long)

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

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

interface SVGNumber {
  attribute float value;
};

Attributes:

value (float)

The value of the given attribute.

4.5.8. Interface SVGAnimatedNumber

interface SVGAnimatedNumber {
           attribute float baseVal;
  readonly attribute float animVal;
};

Attributes:

baseVal (float)

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

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();
  SVGNumber initialize(SVGNumber newItem);
  SVGNumber getItem(unsigned long index);
  SVGNumber insertItemBefore(SVGNumber newItem, unsigned long index);
  SVGNumber replaceItem(SVGNumber newItem, unsigned long index);
  SVGNumber removeItem(unsigned long index);
  SVGNumber appendItem(SVGNumber newItem);
};

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 is read only.

SVGNumber initialize(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 is read only.

SVGNumber getItem(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(SVGNumber newItem, 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 is read only.

SVGNumber replaceItem(SVGNumber newItem, 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 is read only.

DOMException, code INDEX_SIZE_ERR

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

SVGNumber removeItem(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(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

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;
           attribute float valueInSpecifiedUnits;
           attribute DOMString valueAsString;

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

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 CSS 2.1.

SVG_LENGTHTYPE_EXS (unsigned short)

A value was specified using the ex units defined in CSS 2.1.

SVG_LENGTHTYPE_PX (unsigned short)

A value was specified using the px units defined in CSS 2.1.

SVG_LENGTHTYPE_CM (unsigned short)

A value was specified using the cm units defined in CSS 2.1.

SVG_LENGTHTYPE_MM (unsigned short)

A value was specified using the mm units defined in CSS 2.1.

SVG_LENGTHTYPE_IN (unsigned short)

A value was specified using the in units defined in CSS 2.1.

SVG_LENGTHTYPE_PT (unsigned short)

A value was specified using the pt units defined in CSS 2.1.

SVG_LENGTHTYPE_PC (unsigned short)

A value was specified using the pc units defined in CSS 2.1.

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 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 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 is read only.

Operations:

void newValueSpecifiedUnits(unsigned short unitType, 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 is read only.

void convertToSpecifiedUnits(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 is read only.

4.5.12. Interface SVGAnimatedLength

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();
  SVGLength initialize(SVGLength newItem);
  SVGLength getItem(unsigned long index);
  SVGLength insertItemBefore(SVGLength newItem, unsigned long index);
  SVGLength replaceItem(SVGLength newItem, unsigned long index);
  SVGLength removeItem(unsigned long index);
  SVGLength appendItem(SVGLength newItem);
};

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 is read only.

SVGLength initialize(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 is read only.

SVGLength getItem(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 is read only.

SVGLength insertItemBefore(SVGLength newItem, 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 is read only.

SVGLength replaceItem(SVGLength newItem, 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 is read only.

DOMException, code INDEX_SIZE_ERR

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

SVGLength removeItem(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 is read only.

DOMException, code INDEX_SIZE_ERR

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

SVGLength appendItem(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 is read only.

4.5.14. Interface SVGAnimatedLengthList

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;
           attribute float valueInSpecifiedUnits;
           attribute DOMString valueAsString;

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

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 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 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 is read only.

Operations:

void newValueSpecifiedUnits(unsigned short unitType, 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 is read only.

void convertToSpecifiedUnits(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 is read only.

4.5.16. Interface SVGAnimatedAngle

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(DOMString rgbColor);
  void setRGBColorICCColor(DOMString rgbColor, DOMString iccColor);
  void setColor(unsigned short colorType, DOMString rgbColor, DOMString iccColor);
};

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(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

SyntaxError

Raised if rgbColor does not match <color>.

void setRGBColorICCColor(DOMString rgbColor, 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

SyntaxError

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

void setColor(unsigned short colorType, DOMString rgbColor, 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

InvalidAccessError

Raised if the colorType parameter has an invalid value.

SyntaxError

Raised if the rgbColor or iccColor parameter 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;
  readonly attribute SVGNumberList colors;
};

Attributes:

colorProfile (DOMString)

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

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;
  attribute float y;
  attribute float width;
  attribute float height;
};

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 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 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 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 is read only.

4.5.20. Interface SVGAnimatedRect

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.

[NoInterfaceObject]
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 SVGLocatableElement

Interface SVGLocatableElement is for all elements to which the ‘transform’ property applies or which can have a bounding box in current user space.

interface SVGLocatableElement : SVGElement {

  readonly attribute SVGElement nearestViewportElement;
  readonly attribute SVGElement farthestViewportElement;

  SVGRect getBBox();
  SVGRect getStrokeBBox();
  SVGMatrix getCTM();
  SVGMatrix getScreenCTM();
  SVGMatrix getTransformToElement(SVGElement element);
};

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’ property) 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.

SVGRect getStrokeBBox()

Returns the tight stroke bounding box in current user space (i.e., after application of the ‘transform’ property) on the geometry of all contained graphics elements, exclusive of clipping, masking, markers and filter effects but inclusive of stroking). The stroke bounding box takes the properties ‘stroke-width’, ‘stroke-linecap’, ‘stroke-linejoin’, ‘stroke-miterlimit’, ‘stroke-dasharray’ and ‘stroke-dashoffset’ into account. If no stroke is applied to the graphics elements, the bounding box in current user space gets returned (see getBBox). Note that getStrokeBBox must return the actual stroke 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 stroke bounding box.

SVGMatrix getCTM()

Returns the transformation matrix from current user units (i.e., after application of the ‘transform’ property) 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’ property) 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 CSS 2.1 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(SVGElement element)

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

Parameters

1. SVGElement element
   The target element.

Returns

An SVGMatrix object that defines the transformation.

Exceptions

InvalidStateError

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.23. Interface SVGTransformableElement

Interface SVGTransformableElement contains properties and methods that apply to all elements to which the ‘transform’ property applies.

interface SVGTransformableElement : SVGLocatableElement {
  readonly attribute SVGAnimatedTransformList transform;
};

Attributes:

transform (readonly SVGAnimatedTransformList)

Corresponds to attribute ‘transform’ on the given element.

This needs to be updated to reflect the value of the ‘transform’ property.

4.5.24. Interface SVGGraphicsElement

Interface SVGGraphicsElement represents SVG elements whose primary purpose is to directly render graphics into a group.

interface SVGGraphicsElement : SVGTransformableElement {
};

SVGGraphicsElement implements SVGTests;

4.5.25. Interface SVGDefinitionElement

Interface SVGGraphicsElement represents SVG elements whose primary purpose is to define a reusable resource.

interface SVGDefinitionElement : SVGElement {
};

SVGDefinitionElement implements SVGTests;

4.5.26. Interface SVGTests

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

[NoInterfaceObject]
interface SVGTests {

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

  boolean hasExtension(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(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.27. Interface SVGFitToViewBox

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

[NoInterfaceObject]
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.28. Interface SVGZoomAndPan

The SVGZoomAndPan interface defines attribute zoomAndPan and associated constants.

[NoInterfaceObject]
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;
};

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.

4.5.29. Interface SVGViewSpec

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

SVGViewSpec implements SVGFitToViewBox;
SVGViewSpec implements SVGZoomAndPan;

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.30. Interface SVGURIReference

Interface SVGURIReference defines an interface which applies to all elements which have an ‘xlink:href’ attribute.

[NoInterfaceObject]
interface SVGURIReference {
  readonly attribute SVGAnimatedString href;
};

Attributes:

href (readonly SVGAnimatedString)

Corresponds to the ‘xlink:href’ attribute.

4.5.31. 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.32. Interface SVGRenderingIntent

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

[NoInterfaceObject]
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'.

Chapter 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 ‘discard’ element
  • 5.5. The ‘desc’ and ‘title’ elements
  • 5.6. The ‘symbol’ element
  • 5.7. The ‘use’ element
  • 5.8. The ‘image’ element
  • 5.9. Conditional processing
    • 5.9.1. Conditional processing overview
    • 5.9.2. The ‘switch’ element
    • 5.9.3. The ‘requiredFeatures’ attribute
    • 5.9.4. The ‘requiredExtensions’ attribute
    • 5.9.5. The ‘systemLanguage’ attribute
    • 5.9.6. Applicability of test attributes
  • 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"?>
<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"?>
<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>

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