previous   next   contents   properties   index  

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. 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 supplemental scripting language with access to SVG's 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 that 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 Stylable SVG vs. Exchange SVG

The SVG language has two distinct forms, each with its own DTD and its own MIME type. Each form of SVG serves a particular purpose.

Stylable SVG is the recommended storage format for SVG content targeted at web environments. Stylable SVG is what its name suggests: it provides syntax for referencing and embedding style sheet information. Style sheet information can be expressed in the style sheet language of choice, such as Cascading Style Sheets [CSS2] or XSL Transformations [XSLT]). The ability to apply different style sheets to SVG content is a key feature in promoting accessibility.

Exchange SVG is a language primarily targeted at tool interoperability. Because Stylable SVG requires the use of a styling language before rendering properties can be attached to graphics elements, and because Stylable SVG allows arbitrary styling languages to be used, Stylable SVG is not suitable as a self-defined, fully-contained language format for guaranteed interoperability. With Exchange SVG, all rendering properties are expressed as XML attributes rather than using the syntax of a particular styling language.

Because Stylable SVG is the recommended storage format for web environments, the majority of the examples in this specification illustrate the use of Stylable SVG.

See the chapter on Exchange SVG for more information on Exchange SVG. The chapter details the differences between Stylable SVG and Exchange SVG and includes various examples of Exchange SVG content.


1.3 SVG MIME type, file name extension and Macintosh filetype

The MIME type for SVG is "image/svg-xml". The W3C will register this MIME type around the time when SVG is approved as a W3C Recommendation.

It is recommended that SVG files have the extension ".svg" (all lower case) on all platforms.

It is recommended that SVG files stored on Macintosh HFS file systems be given a filetype of "svg " (all lower case, with a space character as the fourth letter).


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 [DOM2] 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 RFC 2119 (see [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

basic shape
Standard shapes which are predefined in SVG as a convenience for common graphical operations. Specifically: 'rect', 'circle', 'ellipse', 'line', 'polyline', 'polygon'.
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 absense of antialiasing) 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: 'svg', 'g', 'defs' 'symbol', 'clipPath', 'mask', 'pattern', 'marker', 'a' and 'switch'.
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
fill
The operation of painting the interior of a shape or the interior of the character glyphs in a text string.
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.
graphics element
One of the element types that can cause graphics to be drawn onto the target canvas. Specifically: 'path', 'text', 'rect', 'circle', 'ellipse', 'line', 'polyline', 'polygon', 'image' 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: 'use' and 'image'.
local URI reference
A Uniform Resource Identifier [URI] that does not include an <absoluteURI> or <relativeURI> and thus represents a reference to an element/fragment within the current document. See References and the 'defs' element.
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 URI reference
A Uniform Resource Identifier [URI] that includes an <absoluteURI> or <relativeURI> and thus (usually) represents a reference to a different document or an element/fragment within a different document. See References and the 'defs' element.
paint
A paint represents a way of putting color values onto the canvas. A paint might consists 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.
shape
A graphics element that is defined by some combination of straight lines and curves. Specifically: 'path', 'rect', 'circle', 'ellipse', 'line', 'polyline', 'polygon',
stroke
The operation of painting the outline of a shape or the outline of character glyphs in a text string.
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 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 an 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 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.
transformation
A modification of the current transformation matrix (CTM) 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 (CTM) and Coordinate system transformations
URI Reference
A Uniform Resource Identifier [URI] which serves as a reference to a file or to an element/fragment within a file. See References and the 'defs' element.
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.

previous   next   contents   properties   index