SVG 2 – 28 August 2012 TopContentsPreviousNextElementsAttributesProperties

Chapter 1: Introduction

Contents

1.1. About SVG

This specification defines the features and syntax for Scalable Vector Graphics (SVG).

SVG is a language for describing two-dimensional graphics in XML [XML10]. SVG allows for three types of graphic objects: vector graphic shapes (e.g., paths consisting of straight lines and curves), images and text. Graphical objects can be grouped, styled, transformed and composited into previously rendered objects. The feature set includes nested transformations, clipping paths, alpha masks, filter effects and template objects.

SVG drawings can be interactive and dynamic. Animations can be defined and triggered either declaratively (i.e., by embedding SVG animation elements in SVG content) or via scripting.

Sophisticated applications of SVG are possible by use of a supplemental scripting language which accesses SVG Document Object Model (DOM), which provides complete access to all elements, attributes and properties. A rich set of event handlers such as onmouseover and onclick can be assigned to any SVG graphical object. Because of its compatibility and leveraging of other Web standards, features like scripting can be done on XHTML and SVG elements simultaneously within the same Web page.

SVG is a language for rich graphical content. For accessibility reasons, if there is an original source document containing higher-level structure and semantics, it is recommended that the higher-level information be made available somehow, either by making the original source document available, or making an alternative version available in an alternative format which conveys the higher-level information, or by using SVG's facilities to include the higher-level information within the SVG content. For suggested techniques in achieving greater accessibility, see Accessibility.

1.2. SVG MIME type, file name extension and Macintosh file type

The MIME type for SVG is "image/svg+xml" (see XML Media Types [RFC3023]). The registration of this MIME type is in progress at the W3C.

It is recommended that SVG files have the extension ".svg" (all lowercase) on all platforms. It is recommended that gzip-compressed [RFC1952] SVG files have the extension ".svgz" (all lowercase) on all platforms.

It is recommended that SVG files stored on Macintosh HFS file systems be given a file type of "svg " (all lowercase, with a space character as the fourth letter). It is recommended that gzip-compressed SVG files stored on Macintosh HFS file systems be given a file type of "svgz" (all lowercase).

1.3. SVG namespace and DTD

The SVG 2 namespace is http://www.w3.org/2000/svg, which is the same as for earlier versions of SVG.

A DTD is not provided in this specification, as the use of DTDs for validating XML documents is known to be problematic. In particular, DTDs do not handle namespaces gracefully. It is recommended that authors do not include a DOCTYPE declaration in SVG documents.

1.4. Compatibility with other standards efforts

SVG leverages and integrates with other W3C specifications and standards efforts. By leveraging and conforming to other standards, SVG becomes more powerful and makes it easier for users to learn how to incorporate SVG into their Web sites.

The following describes some of the ways in which SVG maintains compatibility with, leverages and integrates with other W3C efforts:

In environments which support DOM4 [DOM4] for other XML grammars (e.g., XHTML [XHTML]) and which also support SVG and the SVG DOM, a single scripting approach can be used simultaneously for both XML documents and SVG graphics, in which case interactive and dynamic effects will be possible on multiple XML namespaces using the same set of scripts.

1.5. Terminology

Within this specification, the key words "MUST", "MUST NOT", "REQUIRED", "SHALL", "SHALL NOT", "SHOULD", "SHOULD NOT", "RECOMMENDED", "MAY", and "OPTIONAL" are to be interpreted as described in Key words for use in RFCs to Indicate Requirement Levels [RFC2119]. However, for readability, these words do not appear in all uppercase letters in this specification.

At times, this specification recommends good practice for authors and user agents. These recommendations are not normative and conformance with this specification does not depend on their realization. These recommendations contain the expression "We recommend ...", "This specification recommends ...", or some similar wording.

1.6. Definitions

animation element
An animation element is an element that can be used to animate the attribute or property value of another element. The following elements are animation elements: animate, animateColor, animateMotion, animateTransform and set.
animation event attribute
An animation event attribute is an event attribute that specifies script to run for a particular animation-related event. See Animation event attributes. The animation event attributes are onbegin, onend, onrepeat and onload.
basic shape
shape
A graphics element that is defined by some combination of straight lines and curves. Specifically: circle, ellipse, line, path, polygon, polyline and rect.
bounding box

Need a definition, which can probably be ported over from SVG Tiny 1.2.

canvas
A surface onto which graphics elements are drawn, which can be real physical media such as a display or paper or an abstract surface such as a allocated region of computer memory. See the discussion of the SVG canvas in the chapter on Coordinate Systems, Transformations and Units.
clipping path
A combination of path, text and basic shapes which serve as the outline of a (in the absence of anti-aliasing) 1-bit mask, where everything on the "inside" of the outline is allowed to show through but everything on the outside is masked out. See Clipping paths.
container element
An element which can have graphics elements and other container elements as child elements. Specifically: a, defs, g, glyph, marker, mask, missing-glyph, pattern, svg, switch and symbol.
conditional processing attribute
A conditional processing attribute is one that controls whether or not the element on which it appears is processed. Most elements, but not all, may have conditional processing attributes specified on them. See Conditional processing for details. The conditional processing attributes defined in SVG 1.1 are requiredFeatures, requiredExtensions and systemLanguage.
core attributes
The core attributes are those attributes that can be specified on any SVG element. See Common attributes. The core attributes are id, xml:base, xml:lang and xml:space.
current innermost SVG document fragment
The XML document sub-tree which starts with the most immediate ancestor ‘svg’ element of a given SVG element.
current SVG document fragment
The XML document sub-tree which starts with the outermost ancestor svg element of a given SVG element, with the requirement that all container elements between the outermost svg and this element are all elements in the SVG language.
current transformation matrix (CTM)
Transformation matrices define the mathematical mapping from one coordinate system into another using a 3x3 matrix using the equation [x' y' 1] = [x y 1] * matrix. The current transformation matrix (CTM) defines the mapping from the user coordinate system into the viewport coordinate system. See Coordinate system transformations.
decorated bounding box

Need a definition, which can probably be ported over from SVG Tiny 1.2.

descriptive element
An element which provides supplementary descriptive information about its parent. Specifically, the following elements are descriptive elements: desc, metadata and title.
document event attribute
A document event attribute is an event attribute that specifies script to run for a particular document-wide event. See Document-level event attributes. The document event attributes are onunload, onabort, onerror, onresize, onscroll and onzoom.
event attribute
An event attribute is one that specifies some script to run when an event of a certain type is dispatched to the element on which the attribute is specified. See Event attributes.
fill
The operation of painting the interior of a shape or the interior of the character glyphs in a text string.
filter primitive attributes
The filter primitive attributes is the set of attributes that are common to all filter primitive elements. They are x, y, width, height and result.
filter primitive element
A filter primitive element is one that can be used as a child of a filter element to specify a node in the filter graph. The following elements are the filter primitive elements defined in SVG 1.1: feBlend, feColorMatrix, feComponentTransfer, feComposite, feConvolveMatrix, feCustom, feDiffuseLighting, feDisplacementMap, feDropShadow, feFlood, feGaussianBlur, feImage, feMerge, feMorphology, feOffset, feSpecularLighting, feTile, feTurbulence and feUnsharpMask.
font
A font represents an organized collection of glyphs in which the various glyph representations will share a common look or styling such that, when a string of characters is rendered together, the result is highly legible, conveys a particular artistic style and provides consistent inter-character alignment and spacing.
glyph
A glyph represents a unit of rendered content within a font. Often, there is a one-to-one correspondence between characters to be drawn and corresponding glyphs (e.g., often, the character "A" is rendered using a single glyph), but other times multiple glyphs are used to render a single character (e.g., use of accents) or a single glyph can be used to render multiple characters (e.g., ligatures). Typically, a glyph is defined by one or more shapes such as a path, possibly with additional information such as rendering hints that help a font engine to produce legible text in small sizes.
gradient element
A gradient element is one that defines a gradient paint server. SVG 1.1 defines the following gradient elements: linearGradient, meshGradient and radialGradient.
graphical event attribute
A graphical event attribute is an event attribute that specifies script to run for a particular user interaction event. See Event attributes on graphics and container elements. The graphical event attributes are onfocusin, onfocusout, onactivate, onclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout and onload.
graphics element
One of the element types that can cause graphics to be drawn onto the target canvas. Specifically: circle, ellipse, image, line, path, polygon, polyline, rect, text and use.
graphics referencing element
A graphics element which uses a reference to a different document or element as the source of its graphical content. Specifically: image and use.
hit-testing
The process of determining whether a pointer intersects a given graphics element. Hit-testing is used in determining which element to dispatch a mouse event to, which might be done in response to the user moving the pointing device, or by changes in the position, shape and other attributes of elements in the document. Hit-testing is also known as hit detection or picking. See hit-testing and processing order for user interface events and the definition of the ‘pointer-events’ property.
IRI reference
An IRI reference is an Internationalized Resource Identifier with an optional fragment identifier, as defined in Internationalized Resource Identifiers [RFC3987]. An IRI reference serves as a reference to a resource or (with a fragment identifier) to a secondary resource. See References and References and the ‘defs’ element.
invalid value
An invalid value specified for a property, either in a style sheet or a presentation attribute, is one that is either not allowed according to the grammar defining the property's values, or is allowed by the grammar but subsequently disallowed in prose. A CSS declaration with an invalid value is ignored; see Declarations and properties ([CSS21], section 4.1.8).
lacuna value

Provide an appropriate definition. This legalese sounding term comes from SVG 1.2 Tiny. A search for "lacuna value" results in the SVG 1.2 Tiny and the proto-SVG 2 specs (of February 2010).

light source element
A light source element is one that can specify light source information for an feDiffuseLighting or feSpecularLighting element. The following light source elements are defined in SVG 1.1: feDistantLight, fePointLight and feSpotLight.
local IRI reference
An Internationalized Resource Identifier [RFC3987] that does not include an <absoluteIRI> or <relativeIRI> and thus represents a reference to an element within the current document. See References and the ‘defs’ element.
markable element
A markable element is one that can have markers painted on it either through the use of the marker properties or by having a marker element as a child. The following elements are markable elements: line, path, polygon and polyline
mask
A container element which can contain graphics elements or other container elements which define a set of graphics that is to be used as a semi-transparent mask for compositing foreground objects into the current background. See Masks.
non-local IRI reference
An Internationalized Resource Identifier [RFC3987] that includes an <absoluteIRI> or <relativeIRI> and thus (usually) represents a reference to a different document or an element within a different document. See References and the ‘defs’ element.
outermost svg element
The furthest svg ancestor element that remains in the current SVG document fragment.
paint
A paint represents a way of putting color values onto the canvas. A paint might consist of both color values and associated alpha values which control the blending of colors against already existing color values on the canvas. SVG supports three types of built-in paint: color, gradients and patterns.
presentation attribute
An XML attribute on an SVG element which specifies a value for a given property for that element. See Styling. Note that although any property may be specified on any element, not all properties will apply to (affect the rendering of) a given element. The definition of each property states to what set of elements it applies.
property
A parameter that helps specify how a document should be rendered. A complete list of SVG's properties can be found in Property Index. Properties are assigned to elements in the SVG language either by presentation attributes on elements in the SVG language or by using a styling language such as CSS [CSS21]. See Styling.
rootmost ‘svg’ element
The rootmost svg element is the furthest svg ancestor element that does not exit an SVG context. See also SVG document fragment.
stroke
The operation of painting the outline of a shape or the outline of character glyphs in a text string.
structural element
The structural elements are those which define the primary structure of an SVG document. Specifically, the following elements are structural elements: defs, g, svg, symbol and use.
SVG canvas
The canvas onto which the SVG content is rendered. See the discussion of the SVG canvas in the chapter on Coordinate Systems, Transformations and Units.
SVG context

An SVG context is a document fragment where all elements within the fragment must be subject to processing by an SVG user agent according to the rules in this specification.

If SVG content is embedded inline within parent XML (such as XHTML), the SVG context does not include the ancestors above the rootmost ‘svg’ element. If the SVG content contains any foreignObject elements which in turn contain non-SVG content, the SVG context does not include the contents of the foreignObject elements.

SVG document fragment
The XML document sub-tree which starts with an svg element. An SVG document fragment can consist of a stand-alone SVG document, or a fragment of a parent XML document enclosed by an svg element. When an svg element is a descendant of another svg element, there are two SVG document fragments, one for each svg element. (One SVG document fragment is contained within another SVG document fragment.)
SVG user agent
An SVG user agent is a user agent that is able to retrieve and render SVG content.
SVG viewport
The viewport within the SVG canvas which defines the rectangular region into which SVG content is rendered. See the discussion of the SVG viewport in the chapter on Coordinate Systems, Transformations and Units.
text content element
A text content element is an SVG element that causes a text string to be rendered onto the canvas. The SVG 1.1 text content elements are the following: altGlyph, text, textPath, tref and tspan
text content child element
A text content child element is a text content element that is allowed as a descendant of another text content element. In SVG 1.1, the text content child elements are the following: altGlyph, textPath, tref and tspan
text content block element
A text content block element is a text content element that serves as a standalone element for a unit of text, and which may optionally contain certain child text content elements (e.g. ‘tspan’). SVG 2 defines a single text content block element: text.
transformation
A modification of the current transformation matrix by providing a supplemental transformation in the form of a set of simple transformations specifications (such as scaling, rotation or translation) and/or one or more transformation matrices. See Coordinate system transformations.
transformation matrix
Transformation matrices define the mathematical mapping from one coordinate system into another using a 3x3 matrix using the equation [x' y' 1] = [x y 1] * matrix. See current transformation matrix and Coordinate system transformations.
user agent

The general definition of a user agent is an application that retrieves and renders Web content, including text, graphics, sounds, video, images, and other content types. A user agent may require additional user agents that handle some types of content. For instance, a browser may run a separate program or plug-in to render sound or video. User agents include graphical desktop browsers, multimedia players, text browsers, voice browsers, and assistive technologies such as screen readers, screen magnifiers, speech synthesizers, onscreen keyboards, and voice input software.

A "user agent" may or may not have the ability to retrieve and render SVG content; however, an "SVG user agent" retrieves and renders SVG content.

user coordinate system
In general, a coordinate system defines locations and distances on the current canvas. The current user coordinate system is the coordinate system that is currently active and which is used to define how coordinates and lengths are located and computed, respectively, on the current canvas. See initial user coordinate system and Coordinate system transformations.
user space
A synonym for user coordinate system.
user units
A coordinate value or length expressed in user units represents a coordinate value or length in the current user coordinate system. Thus, 10 user units represents a length of 10 units in the current user coordinate system.
viewport
A rectangular region within the current canvas onto which graphics elements are to be rendered. See the discussion of the SVG viewport in the chapter on Coordinate Systems, Transformations and Units.
viewport coordinate system
In general, a coordinate system defines locations and distances on the current canvas. The viewport coordinate system is the coordinate system that is active at the start of processing of an svg element, before processing the optional viewBox attribute. In the case of an SVG document fragment that is embedded within a parent document which uses CSS to manage its layout, then the viewport coordinate system will have the same orientation and lengths as in CSS, with the origin at the top-left on the viewport. See The initial viewport and Establishing a new viewport.
viewport space
A synonym for viewport coordinate system.
viewport units
A coordinate value or length expressed in viewport units represents a coordinate value or length in the viewport coordinate system. Thus, 10 viewport units represents a length of 10 units in the viewport coordinate system.
XLink attributes
The XLink attributes are the seven attributes defined in the XML Linking Language specification [XLINK], which are used on various SVG elements that can reference resources. The most import XLink attribute is ‘xlink:href’, whose definition can be found on each element that allows it. The remaining XLink attributes are xlink:type, xlink:role, xlink:arcrole, xlink:title, xlink:show and xlink:actuate.
SVG 2 – 28 August 2012 TopContentsPreviousNextElementsAttributesProperties