Scalable Vector Graphics (SVG) 1.0 Specification

Full Table of Contents

• 1 Introduction
  • 1.1 About SVG
  • 1.2 SVG MIME type, file name extension and Macintosh filetype
  • 1.3 Compatibility with Other Standards Efforts
  • 1.4 Terminology
  • 1.5 Definitions
• 2 Concepts
• 3 Rendering Model
  • 3.1 Introduction
  • 3.2 The painters model
  • 3.3 Rendering Order
  • 3.4 Grouping
  • 3.5 Types of graphics elements
    • 3.5.1 Painting shapes and text
    • 3.5.2 Painting raster images
  • 3.6 Filtering painted regions
  • 3.7 Clipping, masking and object opacity
  • 3.8 Parent Compositing
• 4 Basic Data Types and Interfaces
  • 4.1 Basic data types
  • 4.2 Recognized color keyword names
  • 4.3 Basic DOM interfaces
• 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 and Naming Collections of Drawing Elements: the 'g' element
    • 5.2.1 Overview
    • 5.2.2 The 'g' element
  • 5.3 References and the 'defs' element
    • 5.3.1 Overview
    • 5.3.2 URI reference attributes
    • 5.3.3 The 'defs' element
  • 5.4 The 'desc' and 'title' elements
  • 5.5 The 'symbol' element
  • 5.6 The 'use' element
  • 5.7 The 'image' element
  • 5.8 Conditional processing
    • 5.8.1 Conditional processing overview
    • 5.8.2 The 'switch' element
    • 5.8.3 The requiredFeatures attribute
    • 5.8.4 The requiredExtensions attribute
    • 5.8.5 The systemLanguage attribute
  • 5.9 Common attributes
    • 5.9.1 The id attribute
    • 5.9.2 The xml:lang and xml:space attributes
    • 5.9.3 The externalResourcesRequired attribute
  • 5.10 DOM interfaces
• 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 Entity definitions for the presentation attributes
  • 6.6 Styling with XSL
  • 6.7 Styling with CSS
  • 6.8 Facilities from CSS and XSL used by SVG
  • 6.9 Referencing external style sheets
  • 6.10 The 'style' element
  • 6.11 The class attribute
  • 6.12 The style attribute
  • 6.13 Specifying the default style sheet language
  • 6.14 Property inheritance
  • 6.15 The scope/range of styles
  • 6.16 User agent style sheet
  • 6.17 Aural style sheets
  • 6.18 DOM interfaces
• 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 unit identifiers
  • 7.12 Object bounding box units
  • 7.13 Processing rules when using absolute unit identifiers and percentages
  • 7.14 DOM interfaces
• 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
• 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
• 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 The 'glyphRun' element
  • 10.8 Text layout
    • 10.8.1 Text layout introduction
    • 10.8.2 Setting the inline progression direction
    • 10.8.3 Glyph orientation within a text run
    • 10.8.4 Relationship with bidirectionality
  • 10.9 Alignment properties
    • 10.9.1 Text alignment properties
    • 10.9.2 Baseline alignment properties
  • 10.10 Font selection properties
  • 10.11 Spacing properties
  • 10.12 Text decoration
  • 10.13 Text on a path
    • 10.13.1 Introduction to text on a path
    • 10.13.2 The 'textPath' element
    • 10.13.3 Text on a path layout rules
  • 10.14 Alternate glyphs
  • 10.15 White space handling
  • 10.16 Text selection
  • 10.17 DOM interfaces
• 11 Painting: Filling, Stroking and Marker Symbols
  • 11.1 Introduction
  • 11.2 Specifying paint
  • 11.3 Fill Properties
  • 11.4 Stroke Properties
  • 11.5 Controlling visibility
  • 11.6 Markers
    • 11.6.1 Introduction
    • 11.6.2 The 'marker' element
    • 11.6.3 Marker properties
    • 11.6.4 Details on how markers are rendered
  • 11.7 Rendering properties
  • 11.8 Inheritance of painting properties
  • 11.9 DOM interfaces
• 12 Color
  • 12.1 Introduction
  • 12.2 The 'color' property
  • 12.3 Color profile descriptions
    • 12.3.1 Overview of color profile descriptions
    • 12.3.2 Alternative ways for defining a color profile description
    • 12.3.3 The 'color-profile' element
    • 12.3.4 The 'color-profile-src' element
    • 12.3.5 @color-profile' when using CSS styling
  • 12.4 DOM interfaces
• 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
• 14 Clipping, Masking and Compositing
  • 14.1 Introduction
  • 14.2 Simple alpha compositing
  • 14.3 Clipping paths
    • 14.3.1 Introduction
    • 14.3.2 The initial clipping path
    • 14.3.3 The 'overflow' and 'clip' properties
    • 14.3.4 Clip to viewport vs. clip to viewBox
    • 14.3.5 Establishing a new clipping path
  • 14.4 Masking
  • 14.5 Object and group opacity: the 'opacity' property
  • 14.6 DOM interfaces
• 15 Filter Effects
  • 15.1 Introduction
  • 15.2 An example
  • 15.3 The 'filter' element
  • 15.4 The 'filter' property
  • 15.5 Filter effects region
  • 15.6 Accessing the background image
  • 15.7 Filter primitives overview
    • 15.7.1 Overview
    • 15.7.2 Common attributes
    • 15.7.3 Filter primitive sub-region
  • 15.8 Light source elements and properties
    • 15.8.1 Introduction
    • 15.8.2 Light source 'feDistantLight'
    • 15.8.3 Light source 'fePointLight'
    • 15.8.4 Light source 'feSpotLight'
    • 15.8.5 The 'lighting-color' property
  • 15.9 Filter primitive 'feBlend'
  • 15.10 Filter primitive 'feColorMatrix'
  • 15.11 Filter primitive 'feComponentTransfer'
  • 15.12 Filter primitive 'feComposite'
  • 15.13 Filter primitive 'feConvolveMatrix'
  • 15.14 Filter primitive 'feDiffuseLighting'
  • 15.15 Filter primitive 'feDisplacementMap'
  • 15.16 Filter primitive 'feFlood'
  • 15.17 Filter primitive 'feGaussianBlur'
  • 15.18 Filter primitive 'feImage'
  • 15.19 Filter primitive 'feMerge'
  • 15.20 Filter primitive 'feMorphology'
  • 15.21 Filter primitive 'feOffset'
  • 15.22 Filter primitive 'feSpecularLighting'
  • 15.23 Filter primitive 'feTile'
  • 15.24 Filter primitive 'feTurbulence'
  • 15.25 DOM interfaces
• 16 Interactivity
  • 16.1 Introduction
  • 16.2 Complete list of supported events
  • 16.3 User interface events
  • 16.4 Pointer events
  • 16.5 Processing order for user interface events
  • 16.6 The 'pointer-events' property
  • 16.7 Magnification, zooming and panning
  • 16.8 Cursors
    • 16.8.1 Introduction to cursors
    • 16.8.2 The 'cursor' property
    • 16.8.3 The 'cursor' element
  • 16.9 DOM interfaces
• 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
• 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
• 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 Attributes to control the timing of the animation
    • 19.2.7 Attributes that define animation values over time
    • 19.2.8 Attributes that control whether animations are additive
    • 19.2.9 Inheritance
    • 19.2.10 The 'animate' element
    • 19.2.11 The 'set' element
    • 19.2.12 The 'animateMotion' element
    • 19.2.13 The 'animateColor' element
    • 19.2.14 The 'animateTransform' element
    • 19.2.15 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 Overview of SVG fonts
  • 20.3 The 'font' element
  • 20.4 The 'glyph' element
  • 20.5 The 'missing-glyph' element
  • 20.6 The 'hkern' and 'vkern' elements
  • 20.7 Describing a font
    • 20.7.1 Overview of font descriptions
    • 20.7.2 Alternative ways for providing a font description
    • 20.7.3 The 'font-face' element
  • 20.8 DOM interfaces
• 21 Metadata
  • 21.1 Introduction
  • 21.2 The 'metadata' element
  • 21.3 An example
  • 21.4 DOM interfaces
• 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 Adding private elements and attributes to the DTD
  • 23.6 DOM interfaces
• Appendix A: DTD
• Appendix B: SVG's Document Object Model (DOM)
  • B.1 SVG DOM Overview
  • B.2 Naming Conventions
  • B.3 Interface SVGException
  • B.4 Feature strings for the hasFeature method call
  • B.5 Relationship with DOM2 events
  • B.6 Relationship with DOM2 CSS object model (CSS OM)
    • B.6.1 Introduction
    • B.6.2 User agents that do not support styling with CSS
    • B.6.3 User agents that support styling with CSS
    • B.6.4 Extended interfaces
  • B.7 Invalid values
• Appendix C: IDL Definitions
• Appendix D: Java Language Binding
• Appendix E: ECMAScript Language Binding
• Appendix F: Implementation Requirements
  • F.1 Introduction
  • F.2 Error processing
  • F.3 Version control
  • F.4 Clamping values which are restricted to a particular range
  • F.5 'path' element implementation notes
  • F.6 Elliptical arc implementation notes
    • F.6.1 Elliptical arc syntax
    • F.6.2 Out-of-range parameters
    • F.6.3 Parameterization alternatives
    • F.6.4 Conversion from center to endpoint parameterization
    • F.6.5 Conversion from endpoint to center parameterization
    • F.6.6 Correction of out-of-range radii
  • F.7 Text selection implementation notes
  • F.8 Printing implementation notes
• Appendix G: Conformance Criteria
  • G.1 Introduction
  • G.2 Conforming SVG Document Fragments
  • G.3 Conforming SVG Stand-Alone Files
  • G.4 Conforming SVG Included Document Fragments
  • G.5 Conforming SVG Generators
  • G.6 Conforming SVG Interpreters
  • G.7 Conforming SVG Viewers
• Appendix H: Accessibility Support
  • H.1 WAI Accessibility Guidelines
  • H.2 SVG Content Accessibility Guidelines
• Appendix I: Internationalization Support
  • I.1 Introduction
  • I.2 Internationalization and SVG
  • I.3 SVG Internationalization Guidelines
• Appendix J: Minimizing SVG File Sizes
• Appendix K: References
  • K.1 Normative references
  • K.2 Informative references
• Appendix L: Property index
• Appendix M: Change History

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

• Appendix N: Element and attribute index
• Appendix O: Index