Full Table of Contents

1. 1. Introduction
   1. 1.1. About SVG
   2. 1.2. Compatibility with other standards efforts
   3. 1.3. Conformance
2. 2. Rendering Model
   1. 2.1. Introduction
   2. 2.2. The rendering tree
      1. 2.2.1. Definitions
      2. 2.2.2. Rendered versus non-rendered elements
      3. 2.2.3. Controlling visibility: the effect of the ‘display’ and ‘visibility’ properties
      4. 2.2.4. Re-used graphics
   3. 2.3. The painters model
   4. 2.4. Rendering order
      1. 2.4.1. Controlling element rendering order: the ‘z-index’ property
      2. 2.4.2. Establishing a stacking context in SVG
   5. 2.5. How elements are rendered
   6. 2.6. How groups are rendered
      1. 2.6.1. Object and group opacity: the effect of the ‘opacity’ property
   7. 2.7. Types of graphics elements
      1. 2.7.1. Painting shapes and text
      2. 2.7.2. Painting raster images
   8. 2.8. Filtering painted regions
   9. 2.9. Clipping and masking
   10. 2.10. Parent compositing
   11. 2.11. The effect of the ‘overflow’ property
3. 3. Basic Data Types and Interfaces
   1. 3.1. Definitions
   2. 3.2. Attribute syntax
   3. 3.3. Real number precision
   4. 3.4. DOM interfaces for SVG elements
      1. 3.4.1. Interface SVGElement
      2. 3.4.2. Interface SVGGraphicsElement
      3. 3.4.3. Interface SVGGeometryElement
   5. 3.5. DOM interfaces for basic data types
      1. 3.5.1. Interface SVGNumber
      2. 3.5.2. Interface SVGLength
      3. 3.5.3. Interface SVGAngle
      4. 3.5.4. List interfaces
      5. 3.5.5. Interface SVGNumberList
      6. 3.5.6. Interface SVGLengthList
   6. 3.6. DOM interfaces for reflecting SVG attributes
      1. 3.6.1. Interface SVGAnimatedBoolean
      2. 3.6.2. Interface SVGAnimatedEnumeration
      3. 3.6.3. Interface SVGAnimatedInteger
      4. 3.6.4. Interface SVGAnimatedNumber
      5. 3.6.5. Interface SVGAnimatedLength
      6. 3.6.6. Interface SVGAnimatedAngle
      7. 3.6.7. Interface SVGAnimatedString
      8. 3.6.8. Interface SVGAnimatedRect
      9. 3.6.9. Interface SVGAnimatedNumberList
      10. 3.6.10. Interface SVGAnimatedLengthList
      11. 3.6.11. Interface SVGStringList
   7. 3.7. Other DOM interfaces
      1. 3.7.1. Interface SVGUnitTypes
      2. 3.7.2. Interface SVGTests
      3. 3.7.3. Interface SVGFitToViewBox
      4. 3.7.4. Interface SVGZoomAndPan
      5. 3.7.5. Interface SVGURIReference
4. 4. Document Structure
   1. 4.1. Defining an SVG document fragment: the ‘svg’ element
      1. 4.1.1. Overview
      2. 4.1.2. Namespace
      3. 4.1.3. Definitions
      4. 4.1.4. The ‘svg’ element
   2. 4.2. Grouping: the ‘g’ element
      1. 4.2.1. Overview
      2. 4.2.2. The ‘g’ element
   3. 4.3. Unknown elements
   4. 4.4. Defining content for reuse, and the ‘defs’ element
      1. 4.4.1. Overview
      2. 4.4.2. The ‘defs’ element
   5. 4.5. The ‘desc’ and ‘title’ elements
      1. 4.5.1. Definition
   6. 4.6. The ‘metadata’ element
   7. 4.7. The ‘symbol’ element
      1. 4.7.1. Attributes
      2. 4.7.2. Notes on symbols
   8. 4.8. The ‘use’ element
      1. 4.8.1. The use-element shadow tree
      2. 4.8.2. Layout of re-used graphics
      3. 4.8.3. Style Scoping and Inheritance
      4. 4.8.4. Multimedia in use-element shadow trees
      5. 4.8.5. Animations in use-element shadow trees
      6. 4.8.6. Event handling in use-element shadow trees
   9. 4.9. Conditional processing
      1. 4.9.1. Conditional processing overview
      2. 4.9.2. Definitions
      3. 4.9.3. The ‘switch’ element
      4. 4.9.4. The ‘requiredExtensions’ attribute
      5. 4.9.5. The ‘systemLanguage’ attribute
   10. 4.10. HTML metadata elements
   11. 4.11. Common attributes
       1. 4.11.1. Definitions
       2. 4.11.2. Attributes common to all elements: ‘id’
       3. 4.11.3. The ‘lang’ and ‘xml:lang’ attributes
       4. 4.11.4. The ‘xml:space’ attribute
       5. 4.11.5. The ‘tabindex’ attribute
       6. 4.11.6. The ‘data-*’ attributes
   12. 4.12. WAI-ARIA attributes
       1. 4.12.1. Definitions
       2. 4.12.2. Role attribute
       3. 4.12.3. State and property attributes (all aria- attributes)
       4. 4.12.4. Implicit and Allowed ARIA Semantics
   13. 4.13. DOM interfaces
       1. 4.13.1. Extensions to the Document interface
       2. 4.13.2. Interface SVGSVGElement
       3. 4.13.3. Interface SVGGElement
       4. 4.13.4. Interface SVGUnknownElement
       5. 4.13.5. Interface SVGDefsElement
       6. 4.13.6. Interface SVGDescElement
       7. 4.13.7. Interface SVGMetadataElement
       8. 4.13.8. Interface SVGTitleElement
       9. 4.13.9. Interface SVGSymbolElement
       10. 4.13.10. Interface SVGUseElement
       11. 4.13.11. Interface SVGUseElementShadowRoot
       12. 4.13.12. Interface SVGElementInstance
       13. 4.13.13. Interface ShadowAnimation
       14. 4.13.14. Interface SVGSwitchElement
       15. 4.13.15. Interface GetSVGDocument
5. 5. Styling
   1. 5.1. Styling SVG content using CSS
   2. 5.2. Inline style sheets: the ‘style’ element
   3. 5.3. External style sheets: the effect of the HTML ‘link’ element
   4. 5.4. Style sheets in HTML documents
   5. 5.5. Element-specific styling: the ‘class’ and ‘style’ attributes
   6. 5.6. Presentation attributes
   7. 5.7. Required properties
   8. 5.8. User agent style sheet
   9. 5.9. Required CSS features
   10. 5.10. DOM interfaces
       1. 5.10.1. Interface SVGStyleElement
6. 6. Geometry Properties
   1. 6.1. Horizontal center coordinate: The ‘cx’ property
   2. 6.2. Vertical center coordinate: The ‘cy’ property
   3. 6.3. Radius: The ‘r’ property
   4. 6.4. Horizontal radius: The ‘rx’ property
   5. 6.5. Vertical radius: The ‘ry’ property
   6. 6.6. Horizontal coordinate: The ‘x’ property
   7. 6.7. Vertical coordinate: The ‘y’ property
   8. 6.8. Sizing properties: the effect of the ‘width’ and ‘height’ properties
7. 7. Coordinate Systems, Transformations and Units
   1. 7.1. Introduction
   2. 7.2. Computing the equivalent transform of an SVG viewport
   3. 7.3. The initial viewport
   4. 7.4. The initial coordinate system
   5. 7.5. The ‘transform’ property
   6. 7.6. The ‘viewBox’ attribute
   7. 7.7. The ‘preserveAspectRatio’ attribute
   8. 7.8. Establishing a new SVG viewport
   9. 7.9. Units
   10. 7.10. Bounding boxes
   11. 7.11. Object bounding box units
   12. 7.12. Intrinsic sizing properties of SVG content
   13. 7.13. Vector effects
       1. 7.13.1. Computing the vector effects
       2. 7.13.2. Computing the vector effects for nested viewport coordinate systems
       3. 7.13.3. Examples of vector effects
   14. 7.14. DOM interfaces
       1. 7.14.1. Interface SVGTransform
       2. 7.14.2. Interface SVGTransformList
       3. 7.14.3. Interface SVGAnimatedTransformList
       4. 7.14.4. Interface SVGPreserveAspectRatio
       5. 7.14.5. Interface SVGAnimatedPreserveAspectRatio
8. 8. Paths
   1. 8.1. Introduction
   2. 8.2. The ‘path’ element
   3. 8.3. Path data
      1. 8.3.1. General information about path data
      2. 8.3.2. Specifying path data: the ‘d’ property
      3. 8.3.3. The "moveto" commands
      4. 8.3.4. The "closepath" command
      5. 8.3.5. The "lineto" commands
      6. 8.3.6. The cubic Bézier curve commands
      7. 8.3.7. The quadratic Bézier curve commands
      8. 8.3.8. The elliptical arc curve commands
      9. 8.3.9. The bearing commands
      10. 8.3.10. The grammar for path data
   4. 8.4. Path directionality
   5. 8.5. Implementation notes
      1. 8.5.1. Error handling in path data
   6. 8.6. Distance along a path
      1. 8.6.1. The ‘pathLength’ attribute
   7. 8.7. DOM interfaces
      1. 8.7.1. Interface SVGPathElement
9. 9. Basic Shapes
   1. 9.1. Introduction and definitions
   2. 9.2. The ‘rect’ element
   3. 9.3. The ‘circle’ element
   4. 9.4. The ‘ellipse’ element
   5. 9.5. The ‘line’ element
   6. 9.6. The ‘polyline’ element
   7. 9.7. The ‘polygon’ element
   8. 9.8. The ‘mesh’ element
   9. 9.9. DOM interfaces
      1. 9.9.1. Interface SVGRectElement
      2. 9.9.2. Interface SVGCircleElement
      3. 9.9.3. Interface SVGEllipseElement
      4. 9.9.4. Interface SVGLineElement
      5. 9.9.5. Interface SVGMeshElement
      6. 9.9.6. Interface SVGAnimatedPoints
      7. 9.9.7. Interface SVGPointList
      8. 9.9.8. Interface SVGPolylineElement
      9. 9.9.9. Interface SVGPolygonElement
10. 10. Text
    1. 10.1. Introduction
       1. 10.1.1. Definitions
       2. 10.1.2. Fonts and glyphs
       3. 10.1.3. Glyph metrics and layout
    2. 10.2. The ‘text’ and ‘tspan’ elements
       1. 10.2.1. Attributes
       2. 10.2.2. Notes on 'x', 'y', 'dx', 'dy' and 'rotate'
    3. 10.3. Text layout – Introduction
    4. 10.4. Text layout – Content Area
       1. 10.4.1. The ‘inline-size’ property
       2. 10.4.2. The ‘shape-inside’ property
       3. 10.4.3. The ‘shape-subtract’ property
       4. 10.4.4. The ‘shape-image-threshold’ property
       5. 10.4.5. The ‘shape-margin’ property
       6. 10.4.6. The ‘shape-padding’ property
    5. 10.5. Text layout – Algorithm
    6. 10.6. Pre-formatted text
       1. 10.6.1. Multi-line text via 'white-space'
       2. 10.6.2. Repositioning Glyphs
    7. 10.7. Auto-wrapped text
       1. 10.7.1. Notes on Text Wrapping
          1. 10.7.1.1. First Line Positioning
          2. 10.7.1.2. Broken Lines
    8. 10.8. Text on a path
       1. 10.8.1. The ‘textPath’ element
       2. 10.8.2. Attributes
       3. 10.8.3. Text on a path layout rules
    9. 10.9. Text rendering order
    10. 10.10. Properties and pseudo-elements
        1. 10.10.1. SVG properties
           1. 10.10.1.1. Text alignment, the ‘text-anchor’ property
           2. 10.10.1.2. The ‘glyph-orientation-horizontal’ property
           3. 10.10.1.3. The ‘glyph-orientation-vertical’ property
           4. 10.10.1.4. The ‘kerning’ property
        2. 10.10.2. SVG adaptions
           1. 10.10.2.1. The ‘font-variant’ property
           2. 10.10.2.2. The ‘line-height’ property
           3. 10.10.2.3. The ‘writing-mode’ property
           4. 10.10.2.4. The ‘direction’ property
           5. 10.10.2.5. The ‘dominant-baseline’ property
           6. 10.10.2.6. The ‘alignment-baseline’ property
           7. 10.10.2.7. The ‘baseline-shift’ property
           8. 10.10.2.8. The ‘letter-spacing’ property
           9. 10.10.2.9. The ‘word-spacing’ property
           10. 10.10.2.10. The ‘text-overflow’ property
        3. 10.10.3. White space
           1. 10.10.3.1. SVG 2 Preferred white space handling, the ‘white-space’ property
           2. 10.10.3.2. Legacy white-space handling, the ‘xml:space’ property
           3. 10.10.3.3. Duplicate white-space directives
    11. 10.11. Text decoration
        1. 10.11.1. The ‘text-decoration-fill’ and ‘text-decoration-stroke’ properties
    12. 10.12. Text selection and clipboard operations
    13. 10.13. DOM interfaces
        1. 10.13.1. Interface SVGTextContentElement
        2. 10.13.2. Interface SVGTextPositioningElement
        3. 10.13.3. Interface SVGTextElement
        4. 10.13.4. Interface SVGTSpanElement
        5. 10.13.5. Interface SVGTextPathElement
11. 11. Embedded Content
    1. 11.1. Overview
    2. 11.2. Placement of the referenced resource
    3. 11.3. The ‘image’ element
    4. 11.4. HTML5 elements in SVG subtrees
    5. 11.5. Foreign namespaces and private data
    6. 11.6. Embedding foreign object types
    7. 11.7. The ‘foreignObject’ element
    8. 11.8. DOM interfaces
       1. 11.8.1. Interface SVGImageElement
       2. 11.8.2. Interface SVGForeignObjectElement
12. 12. Painting: Filling, Stroking and Marker Symbols
    1. 12.1. Introduction
       1. 12.1.1. Definitions
    2. 12.2. Specifying paint
    3. 12.3. The effect of the ‘color’ property
    4. 12.4. Fill properties
       1. 12.4.1. Specifying fill paint: the ‘fill’ property
       2. 12.4.2. Winding rule: the ‘fill-rule’ property
       3. 12.4.3. Fill paint opacity: the ‘fill-opacity’ property
    5. 12.5. Stroke properties
       1. 12.5.1. Specifying stroke paint: the ‘stroke’ property
       2. 12.5.2. Stroke paint opacity: the ‘stroke-opacity’ property
       3. 12.5.3. Stroke width: the ‘stroke-width’ property
       4. 12.5.4. Drawing caps at the ends of strokes: the ‘stroke-linecap’ property
       5. 12.5.5. Controlling line joins: the ‘stroke-linejoin’ and ‘stroke-miterlimit’ properties
       6. 12.5.6. Dashing strokes: the ‘stroke-dasharray’ and ‘stroke-dashoffset’ properties
       7. 12.5.7. Computing the shape of the stroke
       8. 12.5.8. Computing the circles for the arcs 'stroke-linejoin'
       9. 12.5.9. Adjusting the circles for the arcs 'stroke-linejoin' when the initial circles do not intersect
    6. 12.6. Vector effects
    7. 12.7. Markers
       1. 12.7.1. The ‘marker’ element
       2. 12.7.2. Vertex markers: the ‘marker-start’, ‘marker-mid’ and ‘marker-end’ properties
       3. 12.7.3. Marker shorthand: the ‘marker’ property
       4. 12.7.4. Rendering markers
    8. 12.8. Controlling paint operation order: the ‘paint-order’ property
    9. 12.9. Color space for interpolation: the ‘color-interpolation’ property
    10. 12.10. Rendering hints
        1. 12.10.1. The ‘color-rendering’ property
        2. 12.10.2. The ‘shape-rendering’ property
        3. 12.10.3. The ‘text-rendering’ property
        4. 12.10.4. The ‘image-rendering’ property
    11. 12.11. The effect of the ‘will-change’ property
    12. 12.12. DOM interfaces
        1. 12.12.1. Interface SVGMarkerElement
13. 13. Paint Servers: Solid Colors, Gradients, Patterns and Hatches
    1. 13.1. Introduction
       1. 13.1.1. Using paint servers as templates
    2. 13.2. Solid colors
       1. 13.2.1. Properties
    3. 13.3. Gradients
       1. 13.3.1. Definitions
       2. 13.3.2. Linear gradients
          1. 13.3.2.1. Attributes
          2. 13.3.2.2. Notes on linear gradients
       3. 13.3.3. Radial gradients
          1. 13.3.3.1. Attributes
          2. 13.3.3.2. Notes on radial gradients
       4. 13.3.4. Mesh gradients
          1. 13.3.4.1. Mesh Structure
          2. 13.3.4.2. Painting a Mesh Patch
          3. 13.3.4.3. Attributes
       5. 13.3.5. Gradient stops
          1. 13.3.5.1. Attributes
          2. 13.3.5.2. Properties
          3. 13.3.5.3. Notes on gradient stops
    4. 13.4. Patterns
       1. 13.4.1. Attributes
       2. 13.4.2. Notes on patterns
    5. 13.5. Hatches
       1. 13.5.1. Attributes
       2. 13.5.2. Notes on hatches
       3. 13.5.3. Hatch paths
          1. 13.5.3.1. Attributes
          2. 13.5.3.2. Notes on hatch paths
    6. 13.6. DOM interfaces
       1. 13.6.1. Interface SVGSolidcolorElement
       2. 13.6.2. Interface SVGGradientElement
       3. 13.6.3. Interface SVGLinearGradientElement
       4. 13.6.4. Interface SVGRadialGradientElement
       5. 13.6.5. Interface SVGMeshGradientElement
       6. 13.6.6. Interface SVGMeshrowElement
       7. 13.6.7. Interface SVGMeshpatchElement
       8. 13.6.8. Interface SVGStopElement
       9. 13.6.9. Interface SVGPatternElement
       10. 13.6.10. Interface SVGHatchElement
       11. 13.6.11. Interface SVGHatchpathElement
14. 14. Scripting and Interactivity
    1. 14.1. Introduction
    2. 14.2. Supported events
    3. 14.3. User interface events
    4. 14.4. Pointer events
    5. 14.5. Hit-testing and processing order for user interface events
       1. 14.5.1. Hit-testing
       2. 14.5.2. Event processing
    6. 14.6. The ‘pointer-events’ property
    7. 14.7. Magnification and panning
    8. 14.8. Cursors
       1. 14.8.1. The effect of the ‘cursor’ property
       2. 14.8.2. The ‘cursor’ element
    9. 14.9. Focus
    10. 14.10. Event attributes
        1. 14.10.1. Animation event attributes
    11. 14.11. The ‘script’ element
    12. 14.12. DOM interfaces
        1. 14.12.1. Interface SVGCursorElement
        2. 14.12.2. Interface SVGScriptElement
15. 15. Linking
    1. 15.1. References
       1. 15.1.1. Overview
       2. 15.1.2. Definitions
       3. 15.1.3. URLs and URIs
       4. 15.1.4. Syntactic forms: URL and <url>
       5. 15.1.5. URL reference attributes
       6. 15.1.6. Deprecated XLink URL reference attributes
       7. 15.1.7. Processing of URL references
          1. 15.1.7.1. Generating the absolute URL
          2. 15.1.7.2. Fetching the document
          3. 15.1.7.3. Processing the subresource document
          4. 15.1.7.4. Identifying the target element
          5. 15.1.7.5. Valid URL targets
    2. 15.2. Links out of SVG content: the ‘a’ element
    3. 15.3. Linking into SVG content: URL fragments and SVG views
       1. 15.3.1. SVG fragment identifiers
       2. 15.3.2. SVG fragment identifiers definitions
       3. 15.3.3. Predefined views: the ‘view’ element
    4. 15.4. DOM interfaces
       1. 15.4.1. Interface SVGAElement
       2. 15.4.2. Interface SVGViewElement
16. Appendix A: SVG Document Object Model (DOM)
    1. A.1. SVG DOM overview
       1. A.1.1. SVG DOM object initialization
    2. A.2. Elements in the SVG DOM
    3. A.3. Naming conventions
    4. A.4. Relationship with DOM Level 3 Events
    5. A.5. Relationship with DOM Level 2 CSS
       1. A.5.1. User agents that support styling with CSS
    6. A.6. Invalid values
17. Appendix B: IDL Definitions
18. Appendix C: Implementation Requirements
    1. C.1. Introduction
    2. C.2. Error processing
    3. C.3. Clamping values which are restricted to a particular range
    4. C.4. Elliptical arc implementation notes
       1. C.4.1. Elliptical arc syntax
       2. C.4.2. Out-of-range parameters
       3. C.4.3. Parameterization alternatives
       4. C.4.4. Conversion from center to endpoint parameterization
       5. C.4.5. Conversion from endpoint to center parameterization
       6. C.4.6. Correction of out-of-range radii
    5. C.5. Text selection implementation notes
    6. C.6. Printing implementation notes
19. Appendix D: Conformance Criteria
    1. D.1. Introduction
    2. D.2. Conforming SVG Document Fragments
    3. D.3. Conforming SVG Stand-Alone Files
    4. D.4. Conforming SVG Generators
    5. D.5. Conforming SVG Servers
    6. D.6. Conforming SVG DOM Subtree
    7. D.7. Conforming SVG Interpreters
    8. D.8. Conforming SVG Viewers
       1. D.8.1. Conforming High-Quality SVG Viewer
20. Appendix E: Accessibility Support
    1. E.1. SVG Accessibility Features
    2. E.2. Supporting SVG Accessibility Specifications and Guidelines
21. Appendix F: References
    1. F.1. Normative references
    2. F.2. Informative references
22. Appendix G: Element Index
23. Appendix H: Attribute Index
    1. H.1. Regular attributes
    2. H.2. Presentation attributes
24. Appendix I: Property Index
25. Appendix J: IDL Index
26. Appendix K: Media Type Registration for image/svg+xml
    1. K.1. Introduction
    2. K.2. Registration of media type image/svg+xml
27. Appendix L: Changes from SVG 1.1
    1. L.1. Editorial changes
    2. L.2. Substantial changes
       1. L.2.1. Across the whole document
       2. L.2.2. Concepts
       3. L.2.3. Rendering Model chapter
       4. L.2.4. Basic Data Types and Interfaces chapter
       5. L.2.5. Document Structure chapter
       6. L.2.6. Styling chapter
       7. L.2.7. Geometry Properties chapter
       8. L.2.8. Coordinate Systems, Transformations and Units chapter
       9. L.2.9. Paths chapter
       10. L.2.10. Basic Shapes chapter
       11. L.2.11. Text chapter
       12. L.2.12. Embedded Content chapter
       13. L.2.13. Painting chapter
       14. L.2.14. Color chapter
       15. L.2.15. Paint Servers chapter
       16. L.2.16. Clipping, Masking and Compositing chapter
       17. L.2.17. Filter Effects chapter
       18. L.2.18. Interactivity chapter
       19. L.2.19. Linking chapter
       20. L.2.20. Scripting chapter
       21. L.2.21. Animation chapter
       22. L.2.22. Fonts chapter
       23. L.2.23. Extensibility chapter
       24. L.2.24. Document Type Definition appendix
       25. L.2.25. SVG Document Object Model (DOM) appendix
       26. L.2.26. Java Language Binding appendix
       27. L.2.27. ECMAScript Language Binding appendix
       28. L.2.28. References appendix
       29. L.2.29. IDL Index appendix
       30. L.2.30. Feature Strings