SVG 1.1 (Second Edition) – 16 August 2011
Top
⋅
Contents
⋅
Next
⋅
Elements
⋅
Attributes
⋅
Properties
Expanded Table of Contents
Expanded 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, Public Identifier and System Identifier
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 SVGStylable
4.5.23 Interface SVGLocatable
4.5.24 Interface SVGTransformable
4.5.25 Interface SVGTests
4.5.26 Interface SVGLangSpace
4.5.27 Interface SVGExternalResourcesRequired
4.5.28 Interface SVGFitToViewBox
4.5.29 Interface SVGZoomAndPan
4.5.30 Interface SVGViewSpec
4.5.31 Interface SVGURIReference
4.5.32 Interface SVGCSSRule
4.5.33 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
‘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.8.6 Applicability of test attributes
5.9 Specifying whether external resources are required for proper rendering
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 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
6.18.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’
attribute
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 Text layout introduction
10.7.2 Setting the inline-progression-direction
10.7.3 Glyph orientation within a text run
10.7.4 Relationship with bidirectionality
10.8 Text rendering order
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.14.1 The
‘altGlyph’
element
10.14.2 The
‘altGlyphDef’
,
‘altGlyphItem’
and
‘glyphRef’
elements
10.15 White space handling
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.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.7.1 Color interpolation properties:
‘color-interpolation’
and
‘color-interpolation-filters’
11.7.2 The
‘color-rendering’
property
11.7.3 The
‘shape-rendering’
property
11.7.4 The
‘text-rendering’
property
11.7.5 The
‘image-rendering’
property
11.8 Inheritance of painting properties
11.9 DOM interfaces
11.9.1 Interface SVGPaint
11.9.2 Interface SVGMarkerElement
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 of defining a color profile description
12.3.3 The
‘color-profile’
element
12.3.4 The CSS
@color-profile
rule
12.3.5 The
‘color-profile’
property
12.4 DOM interfaces
12.4.1 Interface SVGColorProfileElement
12.4.2 Interface SVGColorProfileRule
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 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: the
‘clipPath’
element
14.3.6 Clipping paths, geometry, and pointer events
14.4 Masking
14.5 Object and group opacity: the
‘opacity’
property
14.6 DOM interfaces
14.6.1 Interface SVGClipPathElement
14.6.2 Interface SVGMaskElement
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 subregion
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
15.25.1 Interface SVGFilterElement
15.25.2 Interface SVGFilterPrimitiveStandardAttributes
15.25.3 Interface SVGFEBlendElement
15.25.4 Interface SVGFEColorMatrixElement
15.25.5 Interface SVGFEComponentTransferElement
15.25.6 Interface SVGComponentTransferFunctionElement
15.25.7 Interface SVGFEFuncRElement
15.25.8 Interface SVGFEFuncGElement
15.25.9 Interface SVGFEFuncBElement
15.25.10 Interface SVGFEFuncAElement
15.25.11 Interface SVGFECompositeElement
15.25.12 Interface SVGFEConvolveMatrixElement
15.25.13 Interface SVGFEDiffuseLightingElement
15.25.14 Interface SVGFEDistantLightElement
15.25.15 Interface SVGFEPointLightElement
15.25.16 Interface SVGFESpotLightElement
15.25.17 Interface SVGFEDisplacementMapElement
15.25.18 Interface SVGFEFloodElement
15.25.19 Interface SVGFEGaussianBlurElement
15.25.20 Interface SVGFEImageElement
15.25.21 Interface SVGFEMergeElement
15.25.22 Interface SVGFEMergeNodeElement
15.25.23 Interface SVGFEMorphologyElement
15.25.24 Interface SVGFEOffsetElement
15.25.25 Interface SVGFESpecularLightingElement
15.25.26 Interface SVGFETileElement
15.25.27 Interface SVGFETurbulenceElement
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 Introduction to cursors
16.8.2 The
‘cursor’
property
16.8.3 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 Introduction: IRI fragments and SVG views
17.3.2 SVG fragment identifiers
17.3.3 Predefined views: the
‘view’
element
17.3.4 Highlighting views
17.4 DOM interfaces
17.4.1 Interface SVGAElement
17.4.2 Interface SVGViewElement
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.4.1 Event attribute for the SVGLoad event
18.4.2 Event attributes on graphics and container elements
18.4.3 Document-level event attributes
18.4.4 Animation 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 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 ElementTimeControl
19.4.2 Interface TimeEvent
19.4.3 Interface SVGAnimationElement
19.4.4 Interface SVGAnimateElement
19.4.5 Interface SVGSetElement
19.4.6 Interface SVGAnimateMotionElement
19.4.7 Interface SVGMPathElement
19.4.8 Interface SVGAnimateColorElement
19.4.9 Interface SVGAnimateTransformElement
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 Glyph selection rules
20.7 The
‘hkern’
and
‘vkern’
elements
20.8 Describing a font
20.8.1 Overview of font descriptions
20.8.2 Alternative ways for providing a font description
20.8.3 The
‘font-face’
element
20.8.4 The
‘font-face-src’
element
20.8.5 The
‘font-face-uri’
and
‘font-face-format’
elements
20.8.6 The
‘font-face-name’
element
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 Adding private elements and attributes to the DTD
23.6 DOM interfaces
23.6.1 Interface SVGForeignObjectElement
Appendix A: Document Type Definition
A.1 Introduction
A.2 Modularization
A.2.1 Element and attribute collections
A.2.2 Profiling the SVG specification
A.2.3 Practical considerations
A.3 SVG 1.1 module definitions and DTD implementations
A.3.1 Modular Framework Module
A.3.2 Datatypes Module
A.3.3 Qualified Name Module
A.3.4 Core Attribute Module
A.3.5 Container Attribute Module
A.3.6 Viewport Attribute Module
A.3.7 Paint Attribute Module
A.3.8 Basic Paint Attribute Module
A.3.9 Paint Opacity Attribute Module
A.3.10 Graphics Attribute Module
A.3.11 Basic Graphics Attribute Module
A.3.12 Document Events Attribute Module
A.3.13 Graphical Element Events Attribute Module
A.3.14 Animation Events Attribute Module
A.3.15 XLink Attribute Module
A.3.16 External Resources Attribute Module
A.3.17 Structure Module
A.3.18 Basic Structure Module
A.3.19 Conditional Processing Module
A.3.20 Image Module
A.3.21 Style Module
A.3.22 Shape Module
A.3.23 Text Module
A.3.24 Basic Text Module
A.3.25 Marker Module
A.3.26 Color Profile Module
A.3.27 Gradient Module
A.3.28 Pattern Module
A.3.29 Clip Module
A.3.30 Basic Clip Module
A.3.31 Mask Module
A.3.32 Filter Module
A.3.33 Basic Filter Module
A.3.34 Cursor Module
A.3.35 Hyperlinking Module
A.3.36 View Module
A.3.37 Scripting Module
A.3.38 Animation Module
A.3.39 Font Module
A.3.40 Basic Font Module
A.3.41 Extensibility Module
A.4 SVG 1.1 Document Type Definition
A.4.1 SVG 1.1 DTD Driver
A.4.2 SVG 1.1 Document Model
A.4.3 SVG 1.1 Attribute Collection
Appendix B: SVG Document Object Model (DOM)
B.1 SVG DOM overview
B.1.1 SVG DOM object initialization
B.2 Elements in the SVG DOM
B.3 Naming conventions
B.4 Exception SVGException
B.5 Feature strings for the
hasFeature
method call
B.6 Relationship with DOM Level 2 Events
B.7 Relationship with DOM Level 2 CSS
B.7.1 Introduction
B.7.2 User agents that do not support styling with CSS
B.7.3 User agents that support styling with CSS
B.7.4 Extended interfaces
B.8 Read only nodes in the DOM
B.9 Invalid values
Appendix C: IDL Definitions
Appendix D: Java Language Binding
D.1 The Java language binding
D.2 Using SVG with the Java language
Appendix E: ECMAScript Language Binding
E.1 Exceptions
E.2 Constants
E.3 Types
E.4 Objects
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 Generators
G.5 Conforming SVG Servers
G.6 Conforming SVG DOM Subtree
G.7 Conforming SVG Interpreters
G.8 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: Element Index
Appendix M: Attribute Index
M.1 Regular attributes
M.2 Presentation attributes
Appendix N: Property Index
Appendix O: Feature Strings
O.1 Introduction
O.2 SVG 1.1 feature strings
O.3 SVG 1.0 feature strings
Appendix P: Media Type Registration for image/svg+xml
P.1 Introduction
P.2 Registration of media type image/svg+xml
Appendix Q: Changes
SVG 1.1 (Second Edition) – 16 August 2011
Top
⋅
Contents
⋅
Next
⋅
Elements
⋅
Attributes
⋅
Properties