SVG makes use of a number of data types. This article lists these types along with their syntax and descriptions of what they're used for.

Angle

<angle>

Angles are specified in one of two ways. When used in the value of a property in a stylesheet, an <angle> is defined as follows:

angle ::= number (~"deg" | ~"grad" | ~"rad")?

wheredeg indicates degrees,grad indicates grads andrad indicates radians.

For properties defined in CSS2, an angle unit identifier must be provided. For angle values in SVG-specific properties and their corresponding presentation attributes, the angle unit identifier is optional. If not provided, the angle value is assumed to be in degrees. In presentation attributes for all properties, whether defined in SVG1.1 or in CSS2, the angle identifier, if specified, must be in lower case.

When angles are used in an SVG attribute, <angle> is instead defined as follows:

angle ::= number ("deg" | "grad" | "rad")?

The unit identifiers in such <angle> values must be in lower case.

In the SVG DOM, <angle> values are represented usingSVGAngle orSVGAnimatedAngle objects.

Anything

<anything>

The basic type <anything> is a sequence of zero or more characters. Specifically:

anything ::= Char*

where Char is any valid non-control Unicode character.

Clock-value

<clock-value>

Clock values have the same syntax as inSMIL Animation specification. The grammar for clock values is repeated here:

Clock-val         ::= Full-clock-val | Partial-clock-val                      | Timecount-valFull-clock-val    ::= Hours ":" Minutes ":" Seconds ("." Fraction)?Partial-clock-val ::= Minutes ":" Seconds ("." Fraction)?Timecount-val     ::= Timecount ("." Fraction)? (Metric)?Metric            ::= "h" | "min" | "s" | "ms"Hours             ::= DIGIT+; any positive numberMinutes           ::= 2DIGIT; range from 00 to 59Seconds           ::= 2DIGIT; range from 00 to 59Fraction          ::= DIGIT+Timecount         ::= DIGIT+2DIGIT            ::= DIGIT DIGITDIGIT             ::= [0-9]

ForTimecount values, the default metric suffix iss (for seconds). No embedded white space is allowed in clock values, although leading and trailing white space characters will be ignored.

The following are examples of legal clock values:

• Full clock values:
  • 02:30:03 = 2 hours, 30 minutes and 3 seconds
  • 50:00:10.25 = 50 hours, 10 seconds and 250 milliseconds
• Partial clock value:
  • 02:33 = 2 minutes and 33 seconds
  • 00:10.5 = 10.5 seconds = 10 seconds and 500 milliseconds
• Timecount values:
  • 3.2h = 3.2 hours = 3 hours and 12 minutes
  • 45min = 45 minutes
  • 30s = 30 seconds
  • 5ms = 5 milliseconds
  • 12.467 = 12 seconds and 467 milliseconds
• Fractional values are just (base 10) floating point definitions of seconds. Thus:
  • 00.5s = 500 milliseconds
  • 00:00.005 = 5 milliseconds

Color

<color>

The basic type <color> is a CSS2 compatible specification for a color in the sRGB color space. <color> applies to SVG's use of thecolor attribute and is a component of the definitions of attributesfill,stroke,stop-color,flood-color, andlighting-color, which also offer optional ICC-based color specifications.

The definition of <color> in SVG is exactly the same as the CSS<color> definition.

Coordinate

<coordinate>

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>.

Within the SVG DOM, a <coordinate> is represented as anSVGLength or anSVGAnimatedLength.

Frequency

<frequency>

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:

• Hz: Hertz
• kHz: kilo Hertz

Frequency values may not be negative.

FuncIRI

<FuncIRI>

Functional notation for a reference. The syntax for this reference is the same as theCSS URI.

Integer

<integer>

An <integer> is specified as an optional sign character (+ or-) followed by one or more digits0 to9:

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 to2147483647.

Within the SVG DOM, an <integer> is represented as anumber or anSVGAnimatedInteger.

IRI

<IRI>

AnInternationalizedResourceIdentifier.

On the Internet, resources are identified usingIRIs (Internationalized Resource Identifiers). For example, an SVG file calledsomeDrawing.svg located athttp://example.com might have the followingIRI:

http://example.com/someDrawing.svg

AnIRI can also address a particular element within an XML document by including anIRI fragment identifier as part of theIRI. AnIRI which includes anIRI fragment identifier consists of an optional baseIRI, followed by a# character, followed by theIRI fragment identifier. For example, the followingIRI can be used to specify the element whose ID isLamppost within filesomeDrawing.svg:

http://example.com/someDrawing.svg#Lamppost

IRIs are used in thehref attribute.Some attributes allow bothIRIs and text strings as content. To disambiguate a text string from a relative IRI, the functional notation <FuncIRI> is used. This is anIRI delimited with a functional notation. Note: For historical reasons, the delimiters areurl( and), for compatibility with the CSS specifications. TheFuncIRI form is used in presentation attributes.

SVG makes extensive use ofIRI references, both absolute and relative, to other objects. For example, to fill a rectangle with a linear gradient, you first define a<linearGradient> element and give it an ID, as in:

html

<linearGradient xml:id="MyGradient">...</linearGradient>

You then reference the linear gradient as the value of thefill attribute for the rectangle, as in the following example:

html

<rect fill="url(#MyGradient)" />

SVG supports two types ofIRI references:

• localIRI references, where the IRI reference does not contain an <absoluteIRI> or <relativeIRI> and thus only contains a fragment identifier (i.e.,#<elementID> or#xpointer(id<elementID>)).
• non-localIRI references, where theIRI reference does contain an <absoluteIRI> or <relativeIRI>.

IRI is now a retired concept in SVG 2, replaced by the universalURL type.

Length

<length>

A length is a distance measurement, given as a number along with a unit.The SVG2 specification aligns with CSS<length> data types and units for the attribute syntax and values.A length unit identifier must be provided and the values of the length unit identifiers are case-insensitive.The syntax follows the CSS<length> syntax:

length ::= <number> (<absolute-length> | <relative-length>)?

For SVG-specific properties defined in SVG1.1 and their corresponding presentation attributes, the unit identifiers in values are optional. If not provided, the length value represents a distance in the current user coordinate system. Length identifiers must be in lower case when used in presentation attributes for all properties whether they are defined in SVG or in CSS. This case sensitivity is relaxed in SVG2 to align with CSS.

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:

• when a percentage length value represents a percentage of the viewport width or height
• when a percentage length value represents a percentage of the bounding box width or height on a given object.

In the SVG DOM, <length> values are represented usingSVGLength orSVGAnimatedLength objects.

List-of-Ts

<list-of-Ts>

(WhereT is some type.) 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, list-of-Ts

Within the SVG DOM, values of a <list-of-Ts> type are represented by an interface specific for the particular typeT. For example, a <list-of-lengths> is represented in the SVG DOM using anSVGLengthList orSVGAnimatedLengthList object.

Name

<name>

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 */

Number

<number>

Real numbers are specified in one of two ways. When used in a stylesheet, 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 aSVGAnimatedNumber.

Number-optional-number

<number-optional-number>

A pair of <number>s, where the second <number> is optional.

number-optional-number ::= number                            | number, number

In the SVG DOM, a <number-optional-number> is represented using a pair ofSVGAnimatedInteger orSVGAnimatedNumber objects.

Opacity value

<opacity-value>

The opacity of the color or the content the current object is filled with, as a<number>. Any values outside the range0.0 (fully transparent) to1.0 (fully opaque) will be clamped to this range.

Paint

<paint>

The values for propertiesfill andstroke define the type of paint to use when filling or stroking a given graphics element.The available options and syntax for <paint> are:

paint ::= none | <color> | <url> [none | <color>]? | context-fill | context-stroke

Thecontext-fill andcontext-stroke values allow for inheriting values inmarker anduse elements.

Percentage

<percentage>

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 stylesheet 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 anSVGNumber orSVGAnimatedNumber object.

Time

<time>

A time value is a <number> immediately followed by a time unit identifier. The time unit identifiers are:

• ms: milliseconds
• s: seconds

Transform-list

<transform-list>

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 thetransform attribute definition.

Within the SVG DOM, a <transform-list> value is represented using anSVGTransformList orSVGAnimatedTransformList object.

URL

URL

AUniformResourceLocator.

A URL is a sequence ofUnicode characters, building an address to an internal or external resource.

Before SVG 2, the more limitedIRI content type was used instead, because the URL specification was not standardized before.