The EBNF grammar is as used in the XML specification, with the addition of ~, a case-insensitive literal: characters in the ASCII range (only) are declared to be case-insensitive. For example, ~"Hello" will match (H|h)(e|e)(l|L)(l|L)(o|O). This makes the productions much easier to read.
| ? | optional, zero or one |
| + | one or more |
| * | zero or more |
| | | alternation |
| "string" | literal |
| ~"string" | case-insensitive literal |
| [] | a character range |
| [^] | excluded character range |
| () | grouping |
This section defines a number of common data types used in the definitions of SVG properties and attributes. Some data types that are not referenced by multiple properties and attributes are defined inline in subsequent chapters.
Note that, as noted below, the specification of some types is different for CSS property values in style sheets (in the ‘style’ attribute, ‘style’ element or an external style sheet) than it is for for XML attribute values (including presentation attributes). This is due to restrictions in the CSS grammar. For example, scientific notation is allowed in attributes, including presentation attributes, but not in style sheets.
Angles are specified in one of two ways depending upon whether they are used in CSS property syntax or SVG presentation attribute syntax:
When an <angle> is used in a style sheet or with a property in a ‘style’ attribute, the syntax must match the following pattern:
angle ::= number (~"deg" | ~"grad" | ~"rad")?
where deg indicates degrees, grad indicates grads and rad indicates radians. The unit identifier may be in lower (recommended) or upper case.
For properties defined in CSS2 [CSS2], an angle unit identifier must be provided (for non-zero values). For SVG-specific properties the angle unit identifier is optional. If a unit is not provided, the angle value is assumed to be in degrees.
When an <angle> is used in an SVG presentation attribute, the syntax must match the following pattern:
angle ::= number ("deg" | "grad" | "rad")?
The unit identifier, if present, must be in lower case; if not present, the angle value is assumed to be in degrees.
In the SVG DOM, <angle> values are represented using SVGAngle or SVGAnimatedAngle objects.
The basic type <anything> is a sequence of zero or more characters. Specifically:
anything ::= Char*
where Char is the production for a character, as defined in XML 1.0 ([XML10], section 2.2).
The basic type <color> is a CSS2 compatible specification for a color in the sRGB color space [SRGB]. <color> applies to SVG's use of the ‘color’ property and is a component of the definitions of properties ‘fill’, ‘stroke’, ‘stop-color’, ‘flood-color’ and ‘lighting-color’, which also offer optional ICC-based color specifications.
SVG supports all of the syntax alternatives for <color> defined in CSS2 syntax and basic data types ([CSS2], section 4.3.6), with the exception that SVG allows an expanded list of recognized color keywords names.
A <color> is either a keyword (see Recognized color keyword names) or a numerical RGB specification.
In addition to these color keywords, users may specify keywords that correspond to the colors used by objects in the user's environment. The normative definition of these keywords is found in User preferences for colors ([CSS2], section 18.2).
The format of an RGB value in hexadecimal notation is a "#" immediately followed by either three or six hexadecimal characters. The three-digit RGB notation (#rgb) is converted into six-digit form (#rrggbb) by replicating digits, not by adding zeros. For example, #fb0 expands to #ffbb00. This ensures that white (#ffffff) can be specified with the short notation (#fff) and removes any dependencies on the color depth of the display. The format of an RGB value in the functional notation is an RGB start-function followed by a comma-separated list of three numerical values (either three integer values or three percentage values) followed by ")". An RGB start-function is the case-insensitive string "rgb(", for example "RGB(" or "rGb(". For compatibility, the all-lowercase form "rgb(" is preferred. The integer value 255 corresponds to 100%, and to F or FF in the hexadecimal notation: rgb(255,255,255) = rgb(100%,100%,100%) = #FFF. White space characters are allowed around the numerical values. All RGB colors are specified in the sRGB color space [SRGB]. Using sRGB provides an unambiguous and objectively measurable definition of the color, which can be related to international standards (see [COLORIMETRY]).
color ::= "#" hexdigit hexdigit hexdigit (hexdigit hexdigit hexdigit)? | "rgb(" wsp* integer comma integer comma integer wsp* ")" | "rgb(" wsp* integer "%" comma integer "%" comma integer "%" wsp* ")" | color-keyword hexdigit ::= [0-9A-Fa-f] comma ::= wsp* "," wsp*
where color-keyword matches (case insensitively) one of the color keywords listed in Recognized color keyword names below, or one of the system color keywords listed in User preferences for colors ([CSS2], section 18.2).
The corresponding SVG DOM interface definitions for <color> are defined in Document Object Model CSS; in particular, see RGBColor ([DOM2STYLE], section 2.2). SVG's extension to color, including the ability to specify ICC-based colors, are represented using DOM interface SVGColor.
A <coordinate> is a length in the user coordinate system that is the given distance from the origin of the user coordinate system along the relevant axis (the x-axis for X coordinates, the y-axis for Y coordinates). Its syntax is the same as that for <length>.
coordinate ::= length
Within the SVG DOM, a <coordinate> is represented as an SVGLength or an SVGAnimatedLength.
Frequency values are used with aural properties. As defined in CSS2, a frequency value is a <number> immediately followed by a frequency unit identifier. The frequency unit identifiers are:
Frequency values may not be negative.
In the SVG DOM, <frequency> values are represented using the CSSPrimitiveValue interface defined in Document Object Model CSS ([DOM2STYLE], section 2.2).
An <icccolor> is an ICC color specification. In SVG 1.1, an ICC color specification is given by a name, which references a ‘color-profile’ element, and one or more color component values. The grammar is as follows:
icccolor ::= "icc-color(" name (comma-wsp number)+ ")"
name ::= [^,()#x20#x9#xD#xA] /* any char except ",", "(", ")" or wsp */
The corresponding SVG DOM interface for <icccolor> is SVGICCColor.
An <integer> is specified as an optional sign character ("+" or "-") followed by one or more digits "0" to "9":
integer ::= [+-]? [0-9]+
If the sign character is not present, the number is non-negative.
Unless stated otherwise for a particular attribute or property, the range for an <integer> encompasses (at a minimum) -2147483648 to 2147483647.
Within the SVG DOM, an <integer> is represented as a long or an SVGAnimatedInteger.
An Internationalized Resource Identifier (see IRI). For the specification of IRI references in SVG, see IRI references.
A length is a distance measurement, given as a number along with a unit which may be optional. Lengths are specified in one of two ways depending upon whether they are used in CSS property syntax or SVG presentation attribute syntax:
When a <length> is used in a style sheet or with a property in a ‘style’ attribute, the syntax must match the following pattern:
length ::= number (~"em" | ~"ex" | ~"px" | ~"in" | ~"cm" | ~"mm" | ~"pt" | ~"pc")?
See the CSS2 specification for the meanings of the unit identifiers. The unit identifier may be in lower (recommended) or upper case.
For properties defined in CSS2 [CSS2], a length unit identifier must be provided (for non-zero values). For SVG-specific properties, the length unit identifier is optional. If a unit is not provided, the length value represents a distance in the current user coordinate system.
When a <length> is used in an SVG presentation attribute, the syntax must match the following pattern:
length ::= number ("em" | "ex" | "px" | "in" | "cm" | "mm" | "pt" | "pc" | "%")?
The unit identifier, if present, must be in lower case; if not present, the length value represents a distance in the current user coordinate system.
Note that the non-property <length> definition also allows a percentage unit identifier. The meaning of a percentage length value depends on the attribute for which the percentage length value has been specified. Two common cases are: (a) when a percentage length value represents a percentage of the viewport width or height (refer to the section that discusses units in general), and (b) when a percentage length value represents a percentage of the bounding box width or height on a given object (refer to the section that describes object bounding box units).
In the SVG DOM, <length> values are represented using SVGLength or SVGAnimatedLength objects.
A <list-of-family-names> is a list of font family names using the same syntax as the ‘font-family’ property, excluding the <generic-family> and 'inherit' values.
A <list-of-strings> consists of a separated sequence of <string>s. String lists are white space-separated, where white space is defined as one or more of the following consecutive characters: "space" (U+0020), "tab" (U+0009), "line feed" (U+000A) and "carriage return" (U+000D).
The following is an EBNF grammar describing the <list-of-strings> syntax:
list-of-strings ::= string
| string wsp list-of-strings
string ::= [^#x9#xA#xD#x20]*
wsp ::= [#x9#xA#xD#x20]+
(Where T is a type other than <string> and <family-name>.) A list consists of a separated sequence of values. Unless explicitly described differently, lists within SVG's XML attributes can be either comma-separated, with optional white space before or after the comma, or white space-separated.
White space in lists is defined as one or more of the following consecutive characters: "space" (U+0020), "tab" (U+0009), "line feed" (U+000A), "carriage return" (U+000D) and "form-feed" (U+000C).
The following is a template for an EBNF grammar describing the <list-of-Ts> syntax:
list-of-Ts ::= T | T comma-wsp list-of-Ts comma-wsp ::= (wsp+ ","? wsp*) | ("," wsp*) wsp ::= (#x20 | #x9 | #xD | #xA)
Within the SVG DOM, values of a <list-of-Ts> type are represented by an interface specific for the particular type T. For example, a <list-of-lengths> is represented in the SVG DOM using an SVGLengthList or SVGAnimatedLengthList object.
A name, which is a string where a few characters of syntactic significance are disallowed.
name ::= [^,()#x20#x9#xD#xA] /* any char except ",", "(", ")" or wsp */Real numbers are specified in one of two ways. When used in a style sheet, a <number> is defined as follows:
number ::= integer
| [+-]? [0-9]* "." [0-9]+
This syntax is the same as the definition in CSS ([CSS2], section 4.3.1).
When used in an SVG attribute, a <number> is defined differently, to allow numbers with large magnitudes to be specified more concisely:
number ::= integer ([Ee] integer)?
| [+-]? [0-9]* "." [0-9]+ ([Ee] integer)?
Within the SVG DOM, a <number> is represented as a float, SVGNumber or a SVGAnimatedNumber.
A pair of <number>s, where the second <number> is optional.
number-optional-number ::= number
| number comma-wsp number
In the SVG DOM, a <number-optional-number> is represented using a pair of SVGAnimatedInteger or SVGAnimatedNumber objects.
The values for properties ‘fill’ and ‘stroke’ are specifications of the type of paint to use when filling or stroking a given graphics element. The available options and syntax for <paint> are described in Specifying paint.
Within the SVG DOM, <paint> values are represented using SVGPaint objects.
Percentages are specified as a number followed by a "%" character:
percentage ::= number "%"
Note that the definition of <number> depends on whether the percentage is specified in a style sheet or in an attribute that is not also a presentation attribute.
Percentage values are always relative to another value, for example a length. Each attribute or property that allows percentages also defines the reference distance measurement to which the percentage refers.
Within the SVG DOM, a <percentage> is represented using an SVGNumber or SVGAnimatedNumber object.
A time value is a <number> immediately followed by a time unit identifier. The time unit identifiers are:
In the SVG DOM, <time> values are represented using the CSSPrimitiveValue interface defined in Document Object Model CSS ([DOM2STYLE], section 2.2).
A <transform-list> is used to specify a list of coordinate system transformations. A detailed description of the possible values for a <transform-list> is given in Modifying the User Coordinate System: the transform attribute.
Within the SVG DOM, a <transform-list> value is represented using an SVGTransformList or SVGAnimatedTransformList object.
An XML name, as defined by the Name production in Extensible Markup Language (XML) 1.0 ([XML10], section 2.3).
Unless stated otherwise for a particular attribute or property, a <number> has the capacity for at least a single-precision floating point number and has a range (at a minimum) of -3.4e+38F to +3.4e+38F.
It is recommended that higher precision floating point storage and computation be performed on operations such as coordinate system transformations to provide the best possible precision and to prevent round-off errors.
Conforming High-Quality SVG Viewers are required to use at least double-precision floating point for intermediate calculations on certain numerical operations.
The following is the list of recognized color keywords that can be used as a keyword value for data type <color>:
|
|
interface SVGElement : Element {
attribute DOMString id setraises(DOMException);
attribute DOMString xmlbase setraises(DOMException);
readonly attribute SVGSVGElement ownerSVGElement;
readonly attribute SVGElement viewportElement;
};interface SVGAnimatedBoolean {
attribute boolean baseVal setraises(DOMException);
readonly attribute boolean animVal;
};interface SVGAnimatedString {
attribute DOMString baseVal setraises(DOMException);
readonly attribute DOMString animVal;
};This interface defines a list of DOMString values.
SVGStringList has the same attributes and methods as other SVGxxxList interfaces. Implementers may consider using a single base class to implement the various SVGxxxList interfaces.
interface SVGStringList {
readonly attribute unsigned long numberOfItems;
void clear() raises(DOMException);
DOMString initialize(in DOMString newItem) raises(DOMException);
DOMString getItem(in unsigned long index) raises(DOMException);
DOMString insertItemBefore(in DOMString newItem, in unsigned long index) raises(DOMException);
DOMString replaceItem(in DOMString newItem, in unsigned long index) raises(DOMException);
DOMString removeItem(in unsigned long index) raises(DOMException);
DOMString appendItem(in DOMString newItem) raises(DOMException);
};interface SVGAnimatedEnumeration {
attribute unsigned short baseVal setraises(DOMException);
readonly attribute unsigned short animVal;
};interface SVGAnimatedInteger {
attribute long baseVal setraises(DOMException);
readonly attribute long animVal;
};interface SVGNumber {
attribute float value setraises(DOMException);
};interface SVGAnimatedNumber {
attribute float baseVal setraises(DOMException);
readonly attribute float animVal;
};This interface defines a list of SVGNumber objects.
SVGNumberList has the same attributes and methods as other SVGxxxList interfaces. Implementers may consider using a single base class to implement the various SVGxxxList interfaces.
An SVGNumberList object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown, as described below.
interface SVGNumberList {
readonly attribute unsigned long numberOfItems;
void clear() raises(DOMException);
SVGNumber initialize(in SVGNumber newItem) raises(DOMException);
SVGNumber getItem(in unsigned long index) raises(DOMException);
SVGNumber insertItemBefore(in SVGNumber newItem, in unsigned long index) raises(DOMException);
SVGNumber replaceItem(in SVGNumber newItem, in unsigned long index) raises(DOMException);
SVGNumber removeItem(in unsigned long index) raises(DOMException);
SVGNumber appendItem(in SVGNumber newItem) raises(DOMException);
};interface SVGAnimatedNumberList {
readonly attribute SVGNumberList baseVal;
readonly attribute SVGNumberList animVal;
};The SVGLength interface corresponds to the <length> basic data type.
An SVGLength object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown, as described below.
interface SVGLength {
// Length Unit Types
const unsigned short SVG_LENGTHTYPE_UNKNOWN = 0;
const unsigned short SVG_LENGTHTYPE_NUMBER = 1;
const unsigned short SVG_LENGTHTYPE_PERCENTAGE = 2;
const unsigned short SVG_LENGTHTYPE_EMS = 3;
const unsigned short SVG_LENGTHTYPE_EXS = 4;
const unsigned short SVG_LENGTHTYPE_PX = 5;
const unsigned short SVG_LENGTHTYPE_CM = 6;
const unsigned short SVG_LENGTHTYPE_MM = 7;
const unsigned short SVG_LENGTHTYPE_IN = 8;
const unsigned short SVG_LENGTHTYPE_PT = 9;
const unsigned short SVG_LENGTHTYPE_PC = 10;
readonly attribute unsigned short unitType;
attribute float value setraises(DOMException);
attribute float valueInSpecifiedUnits setraises(DOMException);
attribute DOMString valueAsString setraises(DOMException);
void newValueSpecifiedUnits(in unsigned short unitType, in float valueInSpecifiedUnits) raises(DOMException);
void convertToSpecifiedUnits(in unsigned short unitType) raises(DOMException);
};interface SVGAnimatedLength {
readonly attribute SVGLength baseVal;
readonly attribute SVGLength animVal;
};This interface defines a list of SVGLength objects.
SVGLengthList has the same attributes and methods as other SVGxxxList interfaces. Implementers may consider using a single base class to implement the various SVGxxxList interfaces.
An SVGLengthList object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown, as described below.
interface SVGLengthList {
readonly attribute unsigned long numberOfItems;
void clear() raises(DOMException);
SVGLength initialize(in SVGLength newItem) raises(DOMException);
SVGLength getItem(in unsigned long index) raises(DOMException);
SVGLength insertItemBefore(in SVGLength newItem, in unsigned long index) raises(DOMException);
SVGLength replaceItem(in SVGLength newItem, in unsigned long index) raises(DOMException);
SVGLength removeItem(in unsigned long index) raises(DOMException);
SVGLength appendItem(in SVGLength newItem) raises(DOMException);
};interface SVGAnimatedLengthList {
readonly attribute SVGLengthList baseVal;
readonly attribute SVGLengthList animVal;
};The SVGAngle interface corresponds to the <angle> basic data type.
An SVGAngle object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown, as described below.
interface SVGAngle {
// Angle Unit Types
const unsigned short SVG_ANGLETYPE_UNKNOWN = 0;
const unsigned short SVG_ANGLETYPE_UNSPECIFIED = 1;
const unsigned short SVG_ANGLETYPE_DEG = 2;
const unsigned short SVG_ANGLETYPE_RAD = 3;
const unsigned short SVG_ANGLETYPE_GRAD = 4;
readonly attribute unsigned short unitType;
attribute float value setraises(DOMException);
attribute float valueInSpecifiedUnits setraises(DOMException);
attribute DOMString valueAsString setraises(DOMException);
void newValueSpecifiedUnits(in unsigned short unitType, in float valueInSpecifiedUnits) raises(DOMException);
void convertToSpecifiedUnits(in unsigned short unitType) raises(DOMException);
};interface SVGAnimatedAngle {
readonly attribute SVGAngle baseVal;
readonly attribute SVGAngle animVal;
};The SVGColor interface corresponds to color value definition for properties ‘stop-color’, ‘flood-color’ and ‘lighting-color’ and is a base class for interface SVGPaint. It incorporates SVG's extended notion of color, which incorporates ICC-based color specifications.
Interface SVGColor does not correspond to the <color> basic data type. For the <color> basic data type, the applicable DOM interfaces are defined in DOM Level 2 Style; in particular, see the RGBColor interface ([DOM2STYLE], section 2.2).
Note: The SVGColor interface is deprecated, and may be dropped from future versions of the SVG specification.
interface SVGColor : CSSValue {
// Color Types
const unsigned short SVG_COLORTYPE_UNKNOWN = 0;
const unsigned short SVG_COLORTYPE_RGBCOLOR = 1;
const unsigned short SVG_COLORTYPE_RGBCOLOR_ICCCOLOR = 2;
const unsigned short SVG_COLORTYPE_CURRENTCOLOR = 3;
readonly attribute unsigned short colorType;
readonly attribute RGBColor rgbColor;
readonly attribute SVGICCColor iccColor;
void setRGBColor(in DOMString rgbColor) raises(SVGException);
void setRGBColorICCColor(in DOMString rgbColor, in DOMString iccColor) raises(SVGException);
void setColor(in unsigned short colorType, in DOMString rgbColor, in DOMString iccColor) raises(SVGException);
};The SVGICCColor interface expresses an ICC-based color specification.
Note: The SVGICCColor interface is deprecated, and may be dropped from future versions of the SVG specification.
interface SVGICCColor {
attribute DOMString colorProfile setraises(DOMException);
readonly attribute SVGNumberList colors;
};Represents rectangular geometry. Rectangles are defined as consisting of a (x,y) coordinate pair identifying a minimum X value, a minimum Y value, and a width and height, which are usually constrained to be non-negative.
An SVGRect object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown, as described below.
interface SVGRect {
attribute float x setraises(DOMException);
attribute float y setraises(DOMException);
attribute float width setraises(DOMException);
attribute float height setraises(DOMException);
};interface SVGAnimatedRect {
readonly attribute SVGRect baseVal;
readonly attribute SVGRect animVal;
};interface SVGUnitTypes {
// Unit Types
const unsigned short SVG_UNIT_TYPE_UNKNOWN = 0;
const unsigned short SVG_UNIT_TYPE_USERSPACEONUSE = 1;
const unsigned short SVG_UNIT_TYPE_OBJECTBOUNDINGBOX = 2;
};interface SVGStylable {
readonly attribute SVGAnimatedString className;
readonly attribute CSSStyleDeclaration style;
CSSValue getPresentationAttribute(in DOMString name);
};Note: The getPresentationAttribute method is deprecated,
and may be dropped from future versions of the SVG specification.
interface SVGLocatable {
readonly attribute SVGElement nearestViewportElement;
readonly attribute SVGElement farthestViewportElement;
SVGRect getBBox();
SVGMatrix getCTM();
SVGMatrix getScreenCTM();
SVGMatrix getTransformToElement(in SVGElement element) raises(SVGException);
};getClientCTM,
but the name getScreenCTM is kept for historical reasons.
interface SVGTransformable : SVGLocatable {
readonly attribute SVGAnimatedTransformList transform;
};interface SVGTests {
readonly attribute SVGStringList requiredFeatures;
readonly attribute SVGStringList requiredExtensions;
readonly attribute SVGStringList systemLanguage;
boolean hasExtension(in DOMString extension);
};interface SVGLangSpace {
attribute DOMString xmllang setraises(DOMException);
attribute DOMString xmlspace setraises(DOMException);
};interface SVGExternalResourcesRequired {
readonly attribute SVGAnimatedBoolean externalResourcesRequired;
};interface SVGFitToViewBox {
readonly attribute SVGAnimatedRect viewBox;
readonly attribute SVGAnimatedPreserveAspectRatio preserveAspectRatio;
};interface SVGZoomAndPan {
// Zoom and Pan Types
const unsigned short SVG_ZOOMANDPAN_UNKNOWN = 0;
const unsigned short SVG_ZOOMANDPAN_DISABLE = 1;
const unsigned short SVG_ZOOMANDPAN_MAGNIFY = 2;
attribute unsigned short zoomAndPan setraises(DOMException);
};interface SVGViewSpec : SVGZoomAndPan,
SVGFitToViewBox {
readonly attribute SVGTransformList transform;
readonly attribute SVGElement viewTarget;
readonly attribute DOMString viewBoxString;
readonly attribute DOMString preserveAspectRatioString;
readonly attribute DOMString transformString;
readonly attribute DOMString viewTargetString;
};interface SVGURIReference {
readonly attribute SVGAnimatedString href;
};SVG extends interface CSSRule with interface SVGCSSRule by adding an SVGColorProfileRule rule to allow for specification of ICC-based color.
It is likely that this extension will become part of a future version of CSS and DOM.
interface SVGCSSRule : CSSRule {
const unsigned short COLOR_PROFILE_RULE = 7;
};interface SVGRenderingIntent {
// Rendering Intent Types
const unsigned short RENDERING_INTENT_UNKNOWN = 0;
const unsigned short RENDERING_INTENT_AUTO = 1;
const unsigned short RENDERING_INTENT_PERCEPTUAL = 2;
const unsigned short RENDERING_INTENT_RELATIVE_COLORIMETRIC = 3;
const unsigned short RENDERING_INTENT_SATURATION = 4;
const unsigned short RENDERING_INTENT_ABSOLUTE_COLORIMETRIC = 5;
};