SVG 2 – 09 April 2015
Top
⋅
Contents
⋅
Previous
⋅
Next
⋅
Elements
⋅
Attributes
⋅
Properties
Full Table of Contents
1.
Introduction
1.1.
About SVG
1.2.
SVG MIME type and file name extensions
1.3.
SVG namespace and DTD
1.4.
Compatibility with other standards efforts
1.5.
Terminology
1.6.
Definitions
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 groups are rendered
2.5.
How elements are rendered
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, masking and object opacity
2.9.
Parent Compositing
3.
Basic Data Types and Interfaces
3.1.
Attribute syntax
3.2.
Real number precision
3.3.
Basic DOM interfaces
3.3.1.
Interface SVGElement
3.3.2.
Interface SVGAnimatedBoolean
3.3.3.
Interface SVGAnimatedString
3.3.4.
Interface SVGStringList
3.3.5.
Interface SVGAnimatedEnumeration
3.3.6.
Interface SVGAnimatedInteger
3.3.7.
Interface SVGNumber
3.3.8.
Interface SVGAnimatedNumber
3.3.9.
Interface SVGNumberList
3.3.10.
Interface SVGAnimatedNumberList
3.3.11.
Interface SVGLength
3.3.12.
Interface SVGAnimatedLength
3.3.13.
Interface SVGLengthList
3.3.14.
Interface SVGAnimatedLengthList
3.3.15.
Interface SVGAngle
3.3.16.
Interface SVGAnimatedAngle
3.3.17.
Interface SVGAnimatedRect
3.3.18.
Interface SVGUnitTypes
3.3.19.
Interface SVGGraphicsElement
3.3.20.
Interface SVGGeometryElement
3.3.21.
Interface SVGTests
3.3.22.
Interface SVGFitToViewBox
3.3.23.
Interface SVGZoomAndPan
3.3.24.
Interface SVGViewSpec
3.3.25.
Interface SVGURIReference
4.
Document Structure
4.1.
Defining an SVG document fragment: the
‘svg’
element
4.1.1.
Overview
4.1.2.
Definitions
4.1.3.
The
‘svg’
element
4.2.
Grouping: the
‘g’
element
4.2.1.
Overview
4.2.2.
The
‘g’
element
4.3.
Defining content for reuse, and the
‘defs’
element
4.3.1.
Overview
4.3.2.
The
‘defs’
element
4.4.
The
‘discard’
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
‘requiredFeatures’
attribute
4.9.5.
The
‘requiredExtensions’
attribute
4.9.6.
The
‘systemLanguage’
attribute
4.9.7.
Applicability of test attributes
4.10.
Common attributes
4.10.1.
Definitions
4.10.2.
Attributes common to all elements:
‘id’
and
‘xml:base’
4.10.3.
The
‘xml:lang’
attribute
4.10.4.
The
‘tabindex’
attribute
4.11.
WAI-ARIA attributes
4.11.1.
Definitions
4.11.2.
Role attribute
4.11.3.
State and property attributes (all aria- attributes)
4.11.4.
Implicit ARIA Semantics
4.12.
DOM interfaces
4.12.1.
Interface Document
4.12.2.
Interface SVGSVGElement
4.12.3.
Interface SVGGElement
4.12.4.
Interface SVGDefsElement
4.12.5.
Interface SVGDescElement
4.12.6.
Interface SVGMetadataElement
4.12.7.
Interface SVGTitleElement
4.12.8.
Interface SVGSymbolElement
4.12.9.
Interface SVGUseElement
4.12.10.
Interface SVGSwitchElement
4.12.11.
Interface GetSVGDocument
5.
Styling
5.1.
SVG's styling properties
5.2.
Alternative ways to specify styling properties
5.3.
Specifying properties using the presentation attributes
5.4.
Styling with CSS
5.5.
Case sensitivity of property names and values
5.6.
Facilities from CSS and XSL used by SVG
5.7.
Referencing external style sheets
5.8.
The
‘style’
element
5.9.
The
‘class’
attribute
5.10.
The
‘style’
attribute
5.11.
Property inheritance
5.12.
The scope/range of styles
5.13.
Content size properties
5.14.
User agent style sheet
5.15.
DOM interfaces
5.15.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
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
’ property
7.7.
The
‘viewBox’
attribute
7.8.
The
‘preserveAspectRatio’
attribute
7.9.
Establishing a new viewport
7.10.
Units
7.11.
Bounding boxes
7.12.
Object bounding box units
7.13.
Intrinsic sizing properties of the viewport of SVG content
7.14.
DOM interfaces
7.14.1.
Interface SVGPointList
7.14.2.
Interface SVGTransform
7.14.3.
Interface SVGTransformList
7.14.4.
Interface SVGAnimatedTransformList
7.14.5.
Interface SVGPreserveAspectRatio
7.14.6.
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 Catmull-Rom curve commands
8.3.9.
The bearing commands
8.3.10.
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 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 SVGPolylineElement
9.8.7.
Interface SVGPolygonElement
10.
Text
10.1.
Introduction
10.1.1.
Definitions
10.2.
Characters and their corresponding glyphs
10.3.
Fonts, font tables and baselines
10.4.
The
‘text’
element
10.4.1.
Attributes
10.5.
The
‘tspan’
element
10.5.1.
Attributes
10.5.2.
Notes on 'x', 'y', 'dx', 'dy' and 'rotate'
10.6.
Text layout – Introduction
10.7.
Text layout – Content Area
10.7.1.
The 'extent' attribute
10.7.2.
The ‘
shape-inside
’ property
10.7.3.
The ‘
shape-outside
’ property
10.7.4.
The ‘
shape-margin
’ property
10.7.5.
The ‘
shape-padding
’ property
10.8.
Text layout – Directions
10.8.1.
Layout Orientations
10.8.1.1.
The inline-progression-direction: the ‘
writing-mode
’ property
10.8.2.
Relationship with bidirectionality
10.8.2.1.
The ‘
direction
’ property
10.8.2.2.
The ‘
unicode-bidi
’ property
10.8.3.
Glyph orientation within a text run
10.8.3.1.
The ‘
glyph-orientation-vertical
’ property
10.8.3.2.
The ‘
glyph-orientation-horizontal
’ property
10.9.
Text layout – Positioning
10.9.1.
Current text position
10.9.2.
White Space
10.9.2.1.
SVG 2 Preferred white space handling, the ‘
white-space
’ property
10.9.2.2.
Legacy whitespace handling, the ‘
xml:space
’ property
10.9.2.3.
Duplicate whitespace directives
10.9.2.4.
Tab character size: the
‘tab-size’
property
10.9.3.
Line spacing, the ‘
line-height
’ property
10.9.4.
Spacing within lines
10.9.4.1.
The ‘
letter-spacing
’ property
10.9.4.2.
The ‘
word-spacing
’ property
10.9.5.
Baseline alignment properties
10.9.5.1.
The ‘
dominant-baseline
’ property
10.9.5.2.
The ‘
alignment-baseline
’ property
10.9.5.3.
The ‘
baseline-shift
’ property
10.10.
Pre-formatted text
10.10.1.
Multi-line text via 'white-space'
10.10.2.
Adjusting Text Chunks
10.10.2.1.
Repositioning Glyphs
10.10.2.2.
Text alignment, the ‘
text-anchor
’ property
10.11.
Auto-wrapped text
10.11.1.
Alignment
10.11.1.1.
Text alignment: the ‘
text-align
’ property
10.11.1.2.
Last line alignment: the ‘
text-align-last
’ property
10.11.2.
Line Breaking
10.11.2.1.
Breaking Rules for Punctuation: the
‘line-break’
property
10.11.2.2.
Breaking Rules for Letters: the
‘word-break’
property
10.11.2.3.
Hyphenation Control: the
‘hyphens’
property
10.11.2.4.
Overflow Wrapping: the
‘word-wrap’
and
‘overflow-wrap’
properties
10.11.3.
Edge Effects
10.11.3.1.
First Line Indentation: the
‘text-indent’
property
10.11.3.2.
Hanging Punctuation: the
‘hanging-punctuation’
property
10.12.
Text on a path
10.12.1.
The
‘textPath’
element
10.12.2.
Attributes
10.12.3.
Text on a path layout rules
10.13.
Text rendering order
10.13.1.
Text overflow processing: the ‘
text-overflow
’ 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 and scaling of the referenced resource
11.3.
The
‘image’
element
11.4.
The
‘video’
element
11.5.
The
‘audio’
element
11.6.
The
‘iframe’
element
11.7.
The
‘canvas’
element
11.8.
The
‘foreignObject’
element
11.9.
The
‘source’
element
11.10.
The
‘track’
element
11.11.
DOM interfaces
11.11.1.
Interface SVGImageElement
11.11.2.
Interface SVGVideoElement
11.11.3.
Interface SVGAudioElement
11.11.4.
Interface SVGIframeElement
11.11.5.
Interface SVGCanvasElement
11.11.6.
Interface SVGSourceElement
11.11.7.
Interface SVGTrackElement
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
’
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.
Linear gradients
13.3.1.1.
Attributes
13.3.1.2.
Notes on linear gradients
13.3.2.
Radial gradients
13.3.2.1.
Attributes
13.3.2.2.
Notes on radial gradients
13.3.3.
Mesh gradients
13.3.4.
Gradient stops
13.3.4.1.
Attributes
13.3.4.2.
Properties
13.3.4.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 SVGMeshGradientElement
13.6.6.
Interface SVGMeshRowElement
13.6.7.
Interface SVGMeshPatchElement
13.6.8.
Interface SVGStopElement
13.6.9.
Interface SVGPatternElement
13.6.10.
Interface SVGSolidHatchElement
13.6.11.
Interface SVGSolidHatchPathElement
14.
Clipping, Masking and Compositing
14.1.
Simple alpha compositing
14.2.
The ‘
overflow
’ property
14.2.1.
Clip to viewport vs. clip to
‘viewBox’
14.2.2.
The initial clipping path
14.3.
Clipping and Masking
14.4.
Object and group opacity: the effect of the ‘
opacity
’ property
15.
Interactivity
15.1.
Introduction
15.2.
Complete list of supported events
15.3.
User interface events
15.4.
Pointer events
15.5.
Hit-testing and processing order for user interface events
15.5.1.
Hit-testing
15.5.2.
Event processing
15.6.
The ‘
pointer-events
’ property
15.7.
Magnification and panning
15.8.
Cursors
15.8.1.
The effect of the ‘
cursor
’ property
15.8.2.
The
‘cursor’
element
15.9.
Focus
15.9.1.
Sequential focus navigation and the
‘tabindex’
attribute
15.9.1.1.
Focus management
15.10.
DOM interfaces
15.10.1.
Interface SVGCursorElement
16.
Linking
16.1.
References
16.1.1.
Overview
16.1.2.
URLs and URIs
16.1.3.
Syntactic forms: URL and FuncURL
16.1.4.
Processing of URL references
16.1.5.
URL reference attributes
16.2.
Links out of SVG content: the
‘a’
element
16.3.
Linking into SVG content: URL fragments and SVG views
16.3.1.
SVG fragment identifiers
16.3.2.
Predefined views: the
‘view’
element
16.3.3.
Highlighting views
16.4.
DOM interfaces
16.4.1.
Interface SVGAElement
16.4.2.
Interface SVGViewElement
17.
Scripting
17.1.
The
‘script’
element
17.2.
Event handling
17.3.
Event attributes
17.3.1.
Event attribute for the load event
17.3.2.
Event attributes on graphics and container elements
17.3.3.
Document-level event attributes
17.3.4.
Animation event attributes
17.4.
DOM interfaces
17.4.1.
Interface SVGScriptElement
17.4.2.
Interface SVGZoomEvent
18.
Animation
18.1.
Introduction
18.2.
Animation elements
18.2.1.
Overview
18.2.2.
Definitions
18.2.3.
Relationship to SMIL Animation
18.2.4.
Animation elements example
18.2.5.
Attributes to identify the target element for an animation
18.2.6.
Attributes to identify the target attribute or property for an animation
18.2.7.
Animation with namespaces
18.2.8.
Paced animation and complex types
18.2.9.
Attributes to control the timing of the animation
18.2.9.1.
Clock values
18.2.10.
Attributes that define animation values over time
18.2.11.
Attributes that control whether animations are additive
18.2.12.
Inheritance
18.2.13.
The
‘animate’
element
18.2.14.
The
‘set’
element
18.2.15.
The
‘animateMotion’
element
18.2.16.
The
‘animateTransform’
element
18.2.17.
Elements, attributes and properties that can be animated
18.3.
Animation using the SVG DOM
18.4.
DOM interfaces
18.4.1.
Interface TimeEvent
18.4.2.
Interface SVGAnimationElement
18.4.3.
Interface SVGAnimateElement
18.4.4.
Interface SVGSetElement
18.4.5.
Interface SVGAnimateMotionElement
18.4.6.
Interface SVGMPathElement
18.4.7.
Interface SVGAnimateTransformElement
19.
Extensibility
19.1.
Foreign namespaces and private data
19.2.
Embedding foreign object types
19.3.
The
‘foreignObject’
element
19.4.
An example
19.5.
DOM interfaces
19.5.1.
Interface SVGForeignObjectElement
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.
Feature strings for the
hasFeature
method call
A.5.
Relationship with DOM Level 3 Events
A.6.
Relationship with DOM Level 2 CSS
A.6.1.
User agents that support styling with CSS
A.7.
Invalid values
Appendix B: IDL Definitions
Appendix C: Implementation Requirements
C.1.
Introduction
C.2.
Error processing
C.3.
Version control
C.4.
Clamping values which are restricted to a particular range
C.5.
‘path’
element implementation notes
C.6.
Elliptical arc implementation notes
C.6.1.
Elliptical arc syntax
C.6.2.
Out-of-range parameters
C.6.3.
Parameterization alternatives
C.6.4.
Conversion from center to endpoint parameterization
C.6.5.
Conversion from endpoint to center parameterization
C.6.6.
Correction of out-of-range radii
C.7.
Text selection implementation notes
C.8.
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: Feature Strings
K.1.
Introduction
K.2.
SVG 2 feature strings
K.3.
SVG 1.1 feature strings
K.4.
SVG 1.0 feature strings
Appendix L: Media Type Registration for image/svg+xml
L.1.
Introduction
L.2.
Registration of media type image/svg+xml
Appendix M: Changes from SVG 1.1
M.1.
Editorial changes
M.2.
Substantial changes
M.2.1.
Across the whole document
M.2.2.
Concepts
M.2.3.
Rendering Model chapter
M.2.4.
Basic Data Types and Interfaces chapter
M.2.5.
Document Structure chapter
M.2.6.
Styling chapter
M.2.7.
Geometry Properties chapter
M.2.8.
Coordinate Systems, Transformations and Units chapter
M.2.9.
Paths chapter
M.2.10.
Text chapter
M.2.11.
Embedded Content chapter
M.2.12.
Painting chapter
M.2.13.
Color chapter
M.2.14.
Paint Servers chapter
M.2.15.
Clipping, Masking and Compositing chapter
M.2.16.
Filter Effects chapter
M.2.17.
Interactivity chapter
M.2.18.
Linking chapter
M.2.19.
Scripting chapter
M.2.20.
Animation chapter
M.2.21.
Fonts chapter
M.2.22.
Extensibility chapter
M.2.23.
Document Type Definition appendix
M.2.24.
SVG Document Object Model (DOM) appendix
M.2.25.
Java Language Binding appendix
M.2.26.
ECMAScript Language Binding appendix
M.2.27.
References appendix
M.2.28.
IDL Index appendix
SVG 2 – 09 April 2015
Top
⋅
Contents
⋅
Previous
⋅
Next
⋅
Elements
⋅
Attributes
⋅
Properties