Scalable Vector Graphics (SVG) 1.0 Specification

Full Table of Contents

• 1 Introduction
  • 1.1 About SVG
  • 1.2 SVG MIME Type
  • 1.3 Compatibility with Other Standards Efforts
  • 1.4 Terminology
  • 1.5 Definitions
  • 1.6 Error processing
• 2 SVG Concepts
• 3 Basic Data Types and Interfaces
  • 3.1 Basic data types
  • 3.2 Basic DOM interfaces
    • 3.2.1 Overview
    • 3.2.2 Interface SVGAngle
    • 3.2.3 Interface SVGInteger
    • 3.2.4 Interface SVGLength
    • 3.2.5 Interface SVGLengthList
    • 3.2.6 Interface SVGNumber
    • 3.2.7 Interface SVGRect
• 4 SVG Rendering Model
  • 4.1 Introduction
  • 4.2 The painters model
  • 4.3 Rendering Order
  • 4.4 Grouping
  • 4.5 Types of graphics elements
    • 4.5.1 Painting shapes and text
    • 4.5.2 Painting raster images
  • 4.6 Filtering painted regions
  • 4.7 Clipping, masking and object opacity
  • 4.8 Parent Compositing
• 5 Styling
  • 5.1 SVG's Use of Cascading Style Sheets
  • 5.2 Referencing External Style Sheets
  • 5.3 The 'style' element
  • 5.4 The class attribute
  • 5.5 The style attribute
  • 5.6 Cascading and Inheritance of CSS Properties
  • 5.7 The Scope/Range of CSS Styles
  • 5.8 The 'display' property
  • 5.9 Default style sheet for SVG
  • 5.10 DOM interfaces
    • 5.10.1 Interface SVGStyleElement
• 6 SVG Document Structure
  • 6.1 Defining an SVG document fragment: the 'svg' element
    • 6.1.1 Overview
    • 6.1.2 The 'svg' element
  • 6.2 Grouping and Naming Collections of Drawing Elements: the 'g' element
    • 6.2.1 Overview
    • 6.2.2 The 'g' element
  • 6.3 References and the 'defs' element
    • 6.3.1 Overview
    • 6.3.2 URI reference attributes
    • 6.3.3 The 'defs' element
  • 6.4 The 'desc' and 'title' elements
  • 6.5 The 'symbol' element
  • 6.6 The 'use' element
  • 6.7 The 'image' element
  • 6.8 Conditional processing
    • 6.8.1 Conditional processing overview
    • 6.8.2 The 'switch' element
    • 6.8.3 The system-required attribute
    • 6.8.4 The system-language attribute
  • 6.9 DOM interfaces
    • 6.9.1 Overview
    • 6.9.2 Interface SVGDocument
    • 6.9.3 The getSVGDocument method
    • 6.9.4 Interface SVGElement
    • 6.9.5 Interface SVGStyledElement
    • 6.9.6 Interface SVGTransformedElement
    • 6.9.7 Interface SVGStyledAndTransformedElement
    • 6.9.8 Interface SVGSVGElement
    • 6.9.9 Interface SVGGElement
    • 6.9.10 Interface SVGDefsElement
    • 6.9.11 Interface SVGDescElement
    • 6.9.12 Interface SVGTitleElement
    • 6.9.13 Interface SVGUseElement
    • 6.9.14 Interface SVGImageElement
    • 6.9.15 Interface SVGSymbolElement
• 7 Coordinate Systems, Transformations and Units
  • 7.1 Introduction
  • 7.2 The initial viewport
  • 7.3 The initial coordinate system
  • 7.4 Coordinate system transformations
  • 7.5 Nested transformations
  • 7.6 The transform attribute
  • 7.7 The viewBox attribute
  • 7.8 The preserveAspectRatio attribute
  • 7.9 Establishing a new viewport
  • 7.10 Units
  • 7.11 Redefining the meaning of CSS unit specifiers
  • 7.12 Processing rules for CSS units and percentages
  • 7.13 DOM interfaces
    • 7.13.1 Overview
    • 7.13.2 Interface SVGPoint
    • 7.13.3 Interface SVGMatrix
    • 7.13.4 Interfaces SVGTransformList and SVGTransform
    • 7.13.5 Interface SVGPreserveAspectRatio
• 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 grammar for path data
  • 8.4 Distance along a path
  • 8.5 DOM interfaces
    • 8.5.1 Interface SVGPathElement
    • 8.5.2 Interface SVGPathSeg
• 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.8 The grammar for points specifications in 'polyline' and 'polygon' elements
  • 9.9 DOM interfaces
    • 9.9.1 Interface SVGRectElement
    • 9.9.2 Interface SVGCircleElement
    • 9.9.3 Interface SVGEllipseElement
    • 9.9.4 Interface SVGLineElement
    • 9.9.5 Interface SVGPointList
    • 9.9.6 Interface SVGPolylineElement
    • 9.9.7 Interface SVGPolygonElement
• 10 Text
  • 10.1 Introduction
  • 10.2 Characters and their corresponding glyphs
  • 10.3 The 'text' element
  • 10.4 The 'tspan' element
  • 10.5 The 'tref' element
  • 10.6 Text layout
    • 10.6.1 Text layout introduction
    • 10.6.2 Setting the primary text advance direction
    • 10.6.3 Glyph orientation with a text run
    • 10.6.4 Relationship with bi-directionality
  • 10.7 Text alignment properties
  • 10.8 Font selection properties
  • 10.9 Spacing properties
  • 10.10 Text decoration
  • 10.11 Text on a path
    • 10.11.1 Introduction to text on a path
    • 10.11.2 The 'textPath' element
    • 10.11.3 Text on a path layout rules
  • 10.12 Alternate glyphs
  • 10.13 White space handling
  • 10.14 Text selection
  • 10.15 DOM interfaces
    • 10.15.1 Interface SVGTextContentElement
    • 10.15.2 Interface SVGTextElement
    • 10.15.3 Interface SVGTextPositioningElement
    • 10.15.4 Interface SVGTSpanElement
    • 10.15.5 Interface SVGTRefElement
    • 10.15.6 Interface SVGTextpathElement
    • 10.15.7 Interface SVGAltGlyphElement
    • 10.15.8 Interface SVGAltGlyphDefElement
    • 10.15.9 Interface SVGSVGGlyphSubElement
• 11 Painting: Filling, Stroking and Marker Symbols
  • 11.1 Introduction
  • 11.2 Specifying paint
  • 11.3 Fill Properties
  • 11.4 Stroke Properties
  • 11.5 Markers
    • 11.5.1 Introduction
    • 11.5.2 The 'marker' element
    • 11.5.3 Marker properties
    • 11.5.4 Details on how markers are rendered
  • 11.6 Rendering properties
  • 11.7 Inheritance of painting properties
  • 11.8 DOM interfaces
    • 11.8.1 Interface SVGICCColor
    • 11.8.2 Interface SVGColor
    • 11.8.3 Interface SVGPaint
    • 11.8.4 Interface SVGMarkerElement
• 12 Color
  • 12.1 Introduction
  • 12.2 Color profile descriptions and @color-profile
• 13 Gradients and Patterns
  • 13.1 Introduction
  • 13.2 Gradients
    • 13.2.1 Introduction
    • 13.2.2 Linear gradients
    • 13.2.3 Radial gradients
    • 13.2.4 Gradient stops
  • 13.3 Patterns
  • 13.4 DOM interfaces
    • 13.4.1 Interface SVGGradientElement
    • 13.4.2 Interface SVGLinearGradientElement
    • 13.4.3 Interface SVGRadialGradientElement
    • 13.4.4 Interface SVGStopElement
    • 13.4.5 Interface SVGPatternElement
• 14 Clipping, Masking and Compositing
  • 14.1 Introduction
  • 14.2 Simple alpha blending/compositing
  • 14.3 Clipping paths
    • 14.3.1 Introduction
    • 14.3.2 The initial clipping path
    • 14.3.3 The 'overflow' and 'clip' properties
    • 14.3.4 Clip to viewport vs. clip to viewBox
    • 14.3.5 Establishing a new clipping path
  • 14.4 Masking
  • 14.5 Object and group opacity: the 'opacity' property
  • 14.6 DOM interfaces
    • 14.6.1 Interface SVGClipPath
    • 14.6.2 Interface SVGMask
• 15 Filter Effects
  • 15.1 Introduction
  • 15.2 Background
  • 15.3 Basic Model
  • 15.4 Defining and invoking a filter effect
  • 15.5 Filter effects region
  • 15.6 Common attributes
  • 15.7 Accessing the background image
  • 15.8 Filter processing nodes
  • 15.9 DOM interfaces
    • 15.9.1 Interface SVGFilterElement
    • 15.9.2 Interface SVGStandardFilterNodeElement
• 16 Interactivity
  • 16.1 Introduction
  • 16.2 User interface events
  • 16.3 Pointer events
  • 16.4 Processing order for user interface events
  • 16.5 The 'pointer-events' property
  • 16.6 Zooming panning and magnification
  • 16.7 Cursors
    • 16.7.1 Introduction to cursors
    • 16.7.2 The 'cursor' property
    • 16.7.3 The 'cursor' element
  • 16.8 DOM interfaces
    • 16.8.1 Interface SVGCursorElement
    • 16.8.2 Interface SVGViewElement
• 17 Linking
  • 17.1 Links out of SVG contents: the 'a' element
  • 17.2 Linking into SVG content: URI fragments and SVG views
    • 17.2.1 Introduction: URI fragments and SVG views
    • 17.2.2 SVG fragment identifiers
    • 17.2.3 Predefined views: the 'view' element
  • 17.3 DOM interfaces
    • 17.3.1 Interface SVGAElement
    • 17.3.2 Interface SVGViewSpec
• 18 Scripting
  • 18.1 Specifying the scripting language
    • 18.1.1 Specifying the default scripting language
    • 18.1.2 Local declaration of a scripting language
  • 18.2 The 'script' element
  • 18.3 Event handling
  • 18.4 Event attributes
  • 18.5 DOM interfaces
    • 18.5.1 Interface SVGScriptElement
    • 18.5.2 Interface SVGZoomEvent
• 19 Animation
  • 19.1 Introduction
  • 19.2 Animation elements
    • 19.2.1 Relationship to SMIL Animation
    • 19.2.2 Animation elements example
    • 19.2.3 Attributes to identify the target of an animation
    • 19.2.4 Attributes to control the timing of the animation
    • 19.2.5 Attributes that define animation values over time
    • 19.2.6 Combining animations
    • 19.2.7 Attributes that control whether animations are additive
    • 19.2.8 Inheritance
    • 19.2.9 The 'animate' element
    • 19.2.10 The 'set' element
    • 19.2.11 The 'animateMotion' element
    • 19.2.12 The 'animateColor' element
    • 19.2.13 The 'animateTransform' element
    • 19.2.14 Elements, attributes and properties that can be animated
  • 19.3 Animation using the SVG DOM
  • 19.4 DOM interfaces
• 20 Fonts
  • 20.1 Introduction
  • 20.2 SVG fonts
    • 20.2.1 Overview of SVG fonts
    • 20.2.2 The 'font' element
    • 20.2.3 The 'glyph' element
    • 20.2.4 The 'missing-glyph' element
    • 20.2.5 The 'hkern' and 'vkern' elements
  • 20.3 DOM interfaces
    • 20.3.1 Interface SVGFontElement
    • 20.3.2 Interface SVGGlyphBaseElement
    • 20.3.3 Interface SVGGlyphElement
    • 20.3.4 Interface SVGMissingGlyphElement
    • 20.3.5 Interface SVGKernBaseElement
    • 20.3.6 Interface SVGHKernElement
    • 20.3.7 Interface SVGVKernElement
• 21 Metadata
  • 21.1 Introduction
  • 21.2 The SVG Metadata Schema
  • 21.3 An example
• 22 Backwards Compatibility
• 23 Extensibility
  • 23.1 Foreign namespaces and private data
  • 23.2 Embedding foreign object types
• Appendix A: Document Type Definition
• Appendix B: SVG's Document Object Model (DOM)
  • B.1 SVG DOM Overview
  • B.2 Naming Conventions
  • B.3 Interface SVGException
  • B.4 Interface SVGDOMImplementation
  • B.5 Feature strings for the hasFeature method call
  • B.6 Relationship with DOM2 CSS object model
    • B.6.1 Introduction
    • B.6.2 Aural media
    • B.6.3 Visual media
  • B.7 Relationship with DOM2 events
• Appendix C: Implementation Requirements
  • C.1 Introduction
  • C.2 Version control
  • C.3 Forward and undefined references
  • C.4 Referenced objects are "pinned" to their own coordinate systems
  • C.5 Clamping values which are restricted to a particular range
  • C.6 'path' element implementation notes
  • C.7 Elliptical arc implementation notes
    • C.7.1 Elliptical arc syntax
    • C.7.2 Out-of-range parameters
    • C.7.3 Parameterization alternatives
    • C.7.4 Conversion from center to endpoint parameterization
    • C.7.5 Conversion from endpoint to center parameterization
    • C.7.6 Correction of out-of-range radii
  • C.8 Text selection 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 Included Document Fragments
  • D.5 Conforming SVG Generators
  • D.6 Conforming SVG Interpreters
  • D.7 Conforming SVG Viewers
• Appendix E: Accessibility Support
  • E.1 Accessibility and SVG
  • E.2 Aural style sheets
  • E.3 SVG Accessibility guidelines
• Appendix F: Internationalization Support
  • F.1 Internationalization and SVG
  • F.2 SVG Internationalization Guidelines
• Appendix G: Minimizing SVG File Sizes
• Appendix I: References
  • H.1 Normative references
  • H.2 Informative references
• Appendix I: Change History

The following sections have not been written yet, but are expected to be be present in later versions of this specification:

• Appendix J: Element, attribute and property index
• Appendix K: Index