SVG 2 – 15 September 2015
Top
⋅
Contents
⋅
Previous
⋅
Next
⋅
Elements
⋅
Attributes
⋅
Properties
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
SVG 2 – 15 September 2015
Top
⋅
Contents
⋅
Previous
⋅
Next
⋅
Elements
⋅
Attributes
⋅
Properties