Full Table of Contents

• 1. Introduction
  • 1.1. About SVG
  • 1.2. Compatibility with other standards efforts
  • 1.3. Terminology
• 2. Rendering Model
  • 2.1. Introduction
  • 2.2. The painters model
  • 2.3. Rendering order
    • 2.3.1. Controlling element rendering order: the ‘z-index’ property
  • 2.4. How elements are rendered
  • 2.5. How groups are rendered
    • 2.5.1. Object and group opacity: the effect of the ‘opacity’ property
  • 2.6. Types of graphics elements
    • 2.6.1. Painting shapes and text
    • 2.6.2. Painting raster images
  • 2.7. Filtering painted regions
  • 2.8. Clipping and Masking
  • 2.9. Parent Compositing
  • 2.10. The effect of the ‘overflow’ property
• 3. Basic Data Types and Interfaces
  • 3.1. Definitions
  • 3.2. Attribute syntax
  • 3.3. Real number precision
  • 3.4. DOM interfaces for SVG elements
    • 3.4.1. Interface SVGElement
    • 3.4.2. Interface SVGGraphicsElement
    • 3.4.3. Interface SVGGeometryElement
  • 3.5. DOM interfaces for basic data types
    • 3.5.1. Interface SVGNumber
    • 3.5.2. Interface SVGLength
    • 3.5.3. Interface SVGAngle
    • 3.5.4. List interfaces
    • 3.5.5. Interface SVGNumberList
    • 3.5.6. Interface SVGLengthList
  • 3.6. DOM interfaces for reflecting SVG attributes
    • 3.6.1. Interface SVGAnimatedBoolean
    • 3.6.2. Interface SVGAnimatedEnumeration
    • 3.6.3. Interface SVGAnimatedInteger
    • 3.6.4. Interface SVGAnimatedNumber
    • 3.6.5. Interface SVGAnimatedLength
    • 3.6.6. Interface SVGAnimatedAngle
    • 3.6.7. Interface SVGAnimatedString
    • 3.6.8. Interface SVGAnimatedRect
    • 3.6.9. Interface SVGAnimatedNumberList
    • 3.6.10. Interface SVGAnimatedLengthList
    • 3.6.11. Interface SVGStringList
  • 3.7. Other DOM interfaces
    • 3.7.1. Interface SVGUnitTypes
    • 3.7.2. Interface SVGTests
    • 3.7.3. Interface SVGFitToViewBox
    • 3.7.4. Interface SVGZoomAndPan
    • 3.7.5. Interface SVGURIReference
• 4. Document Structure
  • 4.1. Defining an SVG document fragment: the ‘svg’ element
    • 4.1.1. Overview
    • 4.1.2. Namespace
    • 4.1.3. Definitions
    • 4.1.4. The ‘svg’ element
  • 4.2. Grouping: the ‘g’ element
    • 4.2.1. Overview
    • 4.2.2. The ‘g’ element
  • 4.3. Unknown elements
  • 4.4. Defining content for reuse, and the ‘defs’ element
    • 4.4.1. Overview
    • 4.4.2. The ‘defs’ element
  • 4.5. The ‘desc’ and ‘title’ elements
    • 4.5.1. Definition
  • 4.6. The ‘metadata’ element
  • 4.7. The ‘symbol’ element
    • 4.7.1. Attributes
    • 4.7.2. Notes on symbols
  • 4.8. The ‘use’ element
  • 4.9. Conditional processing
    • 4.9.1. Conditional processing overview
    • 4.9.2. Definitions
    • 4.9.3. The ‘switch’ element
    • 4.9.4. The ‘requiredExtensions’ attribute
    • 4.9.5. The ‘systemLanguage’ attribute
  • 4.10. HTML metadata elements
  • 4.11. Common attributes
    • 4.11.1. Definitions
    • 4.11.2. Attributes common to all elements: ‘id’
    • 4.11.3. The ‘lang’ and ‘xml:lang’ attributes
    • 4.11.4. The ‘xml:space’ attribute
    • 4.11.5. The ‘tabindex’ attribute
  • 4.12. WAI-ARIA attributes
    • 4.12.1. Definitions
    • 4.12.2. Role attribute
    • 4.12.3. State and property attributes (all aria- attributes)
    • 4.12.4. Implicit ARIA Semantics
  • 4.13. DOM interfaces
    • 4.13.1. Extensions to the Document interface
    • 4.13.2. Interface SVGSVGElement
    • 4.13.3. Interface SVGGElement
    • 4.13.4. Interface SVGUnknownElement
    • 4.13.5. Interface SVGDefsElement
    • 4.13.6. Interface SVGDescElement
    • 4.13.7. Interface SVGMetadataElement
    • 4.13.8. Interface SVGTitleElement
    • 4.13.9. Interface SVGSymbolElement
    • 4.13.10. Interface SVGUseElement
    • 4.13.11. Interface SVGSwitchElement
    • 4.13.12. Interface GetSVGDocument
• 5. Styling
  • 5.1. Styling SVG content using CSS
  • 5.2. Inline style sheets: the ‘style’ element
  • 5.3. External style sheets: the effect of the HTML ‘link’ element
  • 5.4. Element-specific styling: the ‘class’ and ‘style’ attributes
  • 5.5. Presentation attributes
  • 5.6. Required properties
  • 5.7. User agent style sheet
  • 5.8. Required CSS features
  • 5.9. Style sheets in HTML documents
  • 5.10. DOM interfaces
    • 5.10.1. Interface SVGStyleElement
• 6. Geometry Properties
  • 6.1. Horizontal center coordinate: The ‘cx’ property
  • 6.2. Vertical center coordinate: The ‘cy’ property
  • 6.3. Radius: The ‘r’ property
  • 6.4. Horizontal radius: The ‘rx’ property
  • 6.5. Vertical radius: The ‘ry’ property
  • 6.6. Horizontal coordinate: The ‘x’ property
  • 6.7. Vertical coordinate: The ‘y’ property
  • 6.8. Sizing properties: the effect of the ‘width’ and ‘height’ properties
• 7. Coordinate Systems, Transformations and Units
  • 7.1. Introduction
  • 7.2. The initial viewport
  • 7.3. The initial coordinate system
  • 7.4. The ‘transform’ property
  • 7.5. The ‘viewBox’ attribute
  • 7.6. The ‘preserveAspectRatio’ attribute
  • 7.7. Establishing a new SVG viewport
  • 7.8. Units
  • 7.9. Bounding boxes
  • 7.10. Object bounding box units
  • 7.11. Intrinsic sizing properties of the viewport of SVG content
  • 7.12. DOM interfaces
    • 7.12.1. Interface SVGTransform
    • 7.12.2. Interface SVGTransformList
    • 7.12.3. Interface SVGAnimatedTransformList
    • 7.12.4. Interface SVGPreserveAspectRatio
    • 7.12.5. 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 cubic Bézier curve commands
    • 8.3.6. The quadratic Bézier curve commands
    • 8.3.7. The elliptical arc curve commands
    • 8.3.8. The grammar for path data
  • 8.4. Implementation notes
    • 8.4.1. Error handling in path data
  • 8.5. Distance along a path
  • 8.6. DOM interfaces
    • 8.6.1. Interface SVGPathElement
• 9. Basic Shapes
  • 9.1. Introduction and definitions
  • 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.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 SVGPointList
    • 9.8.7. Interface SVGPolylineElement
    • 9.8.8. Interface SVGPolygonElement
• 10. Text
  • 10.1. Introduction
    • 10.1.1. Definitions
  • 10.2. Fonts, font tables and baselines
  • 10.3. The ‘text’ and ‘tspan’ elements
    • 10.3.1. Attributes
    • 10.3.2. Notes on 'x', 'y', 'dx', 'dy' and 'rotate'
  • 10.4. Text layout – Introduction
  • 10.5. Text layout – Content Area
    • 10.5.1. The ‘inline-size’ property
    • 10.5.2. The ‘shape-inside’ property
    • 10.5.3. The ‘shape-outside’ property
    • 10.5.4. The shape-image-threshold property
    • 10.5.5. The ‘shape-margin’ property
    • 10.5.6. The ‘shape-padding’ property
  • 10.6. Text layout – Algorithm
  • 10.7. Pre-formatted text
    • 10.7.1. Multi-line text via 'white-space'
    • 10.7.2. Adjusting Text Chunks
      • 10.7.2.1. Repositioning Glyphs
      • 10.7.2.2. Text alignment, the ‘text-anchor’ property
  • 10.8. Auto-wrapped text
  • 10.9. Text on a path
    • 10.9.1. The ‘textPath’ element
    • 10.9.2. Attributes
    • 10.9.3. Text on a path layout rules
  • 10.10. Text rendering order
    • 10.10.1. Text overflow processing: the ‘text-overflow’ property
  • 10.11. Properties and pseudo-elements
    • 10.11.1. SVG Adaptions
  • 10.12. Text layout – Directions
    • 10.12.1. Layout Orientations
      • 10.12.1.1. The inline-progression-direction: the ‘writing-mode’ property
    • 10.12.2. Relationship with bidirectionality
      • 10.12.2.1. The ‘direction’ property
      • 10.12.2.2. The ‘unicode-bidi’ property
    • 10.12.3. Glyph orientation within a text run
      • 10.12.3.1. The ‘glyph-orientation-vertical’ property
      • 10.12.3.2. The ‘glyph-orientation-horizontal’ property
  • 10.13. Text layout – Positioning
    • 10.13.1. Current text position
    • 10.13.2. White Space
      • 10.13.2.1. SVG 2 Preferred white space handling, the ‘white-space’ property
      • 10.13.2.2. Legacy whitespace handling, the ‘xml:space’ property
      • 10.13.2.3. Duplicate whitespace directives
    • 10.13.3. Spacing within lines
      • 10.13.3.1. The ‘letter-spacing’ property
      • 10.13.3.2. The ‘word-spacing’ property
    • 10.13.4. Baseline alignment properties
      • 10.13.4.1. The ‘dominant-baseline’ property
      • 10.13.4.2. The ‘alignment-baseline’ property
      • 10.13.4.3. The ‘baseline-shift’ property
  • 10.14. Font selection properties
    • 10.14.1. The ‘font-family’ property
    • 10.14.2. The ‘font-style’property
    • 10.14.3. The ‘font-variant’ property
    • 10.14.4. The ‘font-weight’ property
    • 10.14.5. The ‘font-stretch’ property
    • 10.14.6. The ‘font-size’ property
    • 10.14.7. The ‘font-size-adjust’ property
    • 10.14.8. The ‘font’ property
  • 10.15. Text decoration
    • 10.15.1. The ‘text-decoration-fill’ and ‘text-decoration-stroke’ properties
  • 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 SVGTextPathElement
• 11. Embedded Content
  • 11.1. Overview
  • 11.2. Placement of the referenced resource
  • 11.3. The ‘image’ element
  • 11.4. HTML5 elements in SVG subtrees
  • 11.5. Foreign namespaces and private data
  • 11.6. Embedding foreign object types
  • 11.7. The ‘foreignObject’ element
  • 11.8. DOM interfaces
    • 11.8.1. Interface SVGImageElement
    • 11.8.2. Interface SVGForeignObjectElement
• 12. Painting: Filling, Stroking and Marker Symbols
  • 12.1. Introduction
    • 12.1.1. Definitions
  • 12.2. Specifying paint
  • 12.3. The effect of the ‘color’ property
  • 12.4. Fill properties
    • 12.4.1. Specifying fill paint: the ‘fill’ property
    • 12.4.2. Winding rule: the ‘fill-rule’ property
    • 12.4.3. Fill paint opacity: the ‘fill-opacity’ property
  • 12.5. Stroke properties
    • 12.5.1. Specifying stroke paint: the ‘stroke’ property
    • 12.5.2. Stroke paint opacity: the ‘stroke-opacity’ property
    • 12.5.3. Stroke width: the ‘stroke-width’ property
    • 12.5.4. Drawing caps at the ends of strokes: the ‘stroke-linecap’ property
    • 12.5.5. Controlling line joins: the ‘stroke-linejoin’ and ‘stroke-miterlimit’ properties
    • 12.5.6. Dashing strokes: the ‘stroke-dasharray’ and ‘stroke-dashoffset’ properties
    • 12.5.7. Computing the shape of the stroke
    • 12.5.8. Computing the circles for the arcs 'stroke-linejoin'
  • 12.6. Controlling visibility: the effect of the ‘display’ and ‘visibility’ properties
  • 12.7. Vector effects
    • 12.7.1. Computing the vector effects
    • 12.7.2. Computing the vector effects for nested viewport coordinate systems
    • 12.7.3. Examples of vector effects
  • 12.8. Markers
    • 12.8.1. The ‘marker’ element
    • 12.8.2. Referencing ‘marker’ elements
    • 12.8.3. Vertex markers: the ‘marker-start’, ‘marker-mid’ and ‘marker-end’ properties
    • 12.8.4. Marker shorthand: the ‘marker’ property
    • 12.8.5. Details on how markers are rendered
  • 12.9. Controlling paint operation order: the ‘paint-order’ property
  • 12.10. Color space for interpolation: the ‘color-interpolation’ property
  • 12.11. Rendering hints
    • 12.11.1. The ‘color-rendering’ property
    • 12.11.2. The ‘shape-rendering’ property
    • 12.11.3. The ‘text-rendering’ property
    • 12.11.4. The ‘image-rendering’ property
    • 12.11.5. The ‘buffered-rendering’ property
  • 12.12. Inheritance of painting properties
  • 12.13. DOM interfaces
    • 12.13.1. Interface SVGMarkerElement
• 13. Paint Servers: Solid Colors, Gradients, Patterns and Hatches
  • 13.1. Introduction
  • 13.2. Solid colors
    • 13.2.1. Properties
  • 13.3. Gradients
    • 13.3.1. Definitions
    • 13.3.2. Linear gradients
      • 13.3.2.1. Attributes
      • 13.3.2.2. Notes on linear gradients
    • 13.3.3. Radial gradients
      • 13.3.3.1. Attributes
      • 13.3.3.2. Notes on radial gradients
    • 13.3.4. Mesh gradients
      • 13.3.4.1. Mesh Structure
      • 13.3.4.2. Painting a Mesh Patch
      • 13.3.4.3. Attributes
    • 13.3.5. Gradient stops
      • 13.3.5.1. Attributes
      • 13.3.5.2. Properties
      • 13.3.5.3. Notes on gradient stops
  • 13.4. Patterns
    • 13.4.1. Attributes
    • 13.4.2. Notes on patterns
  • 13.5. Hatches
    • 13.5.1. Attributes
    • 13.5.2. Notes on hatches
    • 13.5.3. Hatch paths
      • 13.5.3.1. Attributes
      • 13.5.3.2. Notes on hatch paths
  • 13.6. DOM interfaces
    • 13.6.1. Interface SVGSolidcolorElement
    • 13.6.2. Interface SVGGradientElement
    • 13.6.3. Interface SVGLinearGradientElement
    • 13.6.4. Interface SVGRadialGradientElement
    • 13.6.5. Interface SVGMeshElement
    • 13.6.6. Interface SVGMeshrowElement
    • 13.6.7. Interface SVGMeshpatchElement
    • 13.6.8. Interface SVGStopElement
    • 13.6.9. Interface SVGPatternElement
    • 13.6.10. Interface SVGHatchElement
    • 13.6.11. Interface SVGHatchpathElement
• 14. Scripting and Interactivity
  • 14.1. Introduction
  • 14.2. Complete list of supported events
  • 14.3. User interface events
  • 14.4. Pointer events
  • 14.5. Hit-testing and processing order for user interface events
    • 14.5.1. Hit-testing
    • 14.5.2. Event processing
  • 14.6. The ‘pointer-events’ property
  • 14.7. Magnification and panning
  • 14.8. Cursors
    • 14.8.1. The effect of the ‘cursor’ property
    • 14.8.2. The ‘cursor’ element
  • 14.9. Focus
    • 14.9.1. Sequential focus navigation and the ‘tabindex’ attribute
      • 14.9.1.1. Focus management
  • 14.10. Event attributes
    • 14.10.1. Event attribute for the load event
    • 14.10.2. Event attributes on graphics and container elements
    • 14.10.3. Document-level event attributes
    • 14.10.4. Animation event attributes
  • 14.11. The ‘script’ element
  • 14.12. DOM interfaces
    • 14.12.1. Interface SVGCursorElement
    • 14.12.2. Interface SVGScriptElement
    • 14.12.3. Interface SVGZoomEvent
• 15. Linking
  • 15.1. References
    • 15.1.1. Overview
    • 15.1.2. Definitions
    • 15.1.3. URLs and URIs
    • 15.1.4. Syntactic forms: URL and <url>
    • 15.1.5. Processing of URL references
    • 15.1.6. URL reference attributes
    • 15.1.7. Deprecated XLink URL reference attributes
  • 15.2. Links out of SVG content: the ‘a’ element
  • 15.3. Linking into SVG content: URL fragments and SVG views
    • 15.3.1. SVG fragment identifiers
    • 15.3.2. SVG fragment identifiers definitions
    • 15.3.3. Predefined views: the ‘view’ element
  • 15.4. DOM interfaces
    • 15.4.1. Interface SVGAElement
    • 15.4.2. Interface SVGViewElement
• 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. Relationship with DOM Level 3 Events
  • A.5. Relationship with DOM Level 2 CSS
    • A.5.1. User agents that support styling with CSS
  • A.6. Invalid values
• Appendix B: IDL Definitions
• Appendix C: Implementation Requirements
  • C.1. Introduction
  • C.2. Error processing
  • C.3. Clamping values which are restricted to a particular range
  • C.4. Elliptical arc implementation notes
    • C.4.1. Elliptical arc syntax
    • C.4.2. Out-of-range parameters
    • C.4.3. Parameterization alternatives
    • C.4.4. Conversion from center to endpoint parameterization
    • C.4.5. Conversion from endpoint to center parameterization
    • C.4.6. Correction of out-of-range radii
  • C.5. Text selection implementation notes
  • C.6. 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. SVG Accessibility Features
  • E.2. Supporting SVG Accessibility Specifications and Guidelines
• Appendix F: References
  • F.1. Normative references
  • F.2. Informative references
• Appendix G: Element Index
• Appendix H: Attribute Index
  • H.1. Regular attributes
  • H.2. Presentation attributes
• Appendix I: Property Index
• Appendix J: IDL Index
• Appendix K: Media Type Registration for image/svg+xml
  • K.1. Introduction
  • K.2. Registration of media type image/svg+xml
• Appendix L: Changes from SVG 1.1
  • L.1. Editorial changes
  • L.2. Substantial changes
    • L.2.1. Across the whole document
    • L.2.2. Concepts
    • L.2.3. Rendering Model chapter
    • L.2.4. Basic Data Types and Interfaces chapter
    • L.2.5. Document Structure chapter
    • L.2.6. Styling chapter
    • L.2.7. Geometry Properties chapter
    • L.2.8. Coordinate Systems, Transformations and Units chapter
    • L.2.9. Paths chapter
    • L.2.10. Text chapter
    • L.2.11. Embedded Content chapter
    • L.2.12. Painting chapter
    • L.2.13. Color chapter
    • L.2.14. Paint Servers chapter
    • L.2.15. Clipping, Masking and Compositing chapter
    • L.2.16. Filter Effects chapter
    • L.2.17. Interactivity chapter
    • L.2.18. Linking chapter
    • L.2.19. Scripting chapter
    • L.2.20. Animation chapter
    • L.2.21. Fonts chapter
    • L.2.22. Extensibility chapter
    • L.2.23. Document Type Definition appendix
    • L.2.24. SVG Document Object Model (DOM) appendix
    • L.2.25. Java Language Binding appendix
    • L.2.26. ECMAScript Language Binding appendix
    • L.2.27. References appendix
    • L.2.28. IDL Index appendix
    • L.2.29. Feature Strings