Inhaltstyp

SVG verwendet eine Reihe von Datentypen. Dieser Artikel listet diese Typen zusammen mit ihrer Syntax und Beschreibungen, wofür sie verwendet werden, auf.

Winkel

<angle>

Winkel werden in zwei Formen angegeben. Wird ein <angle> im Wert einer Eigenschaft in einem Stylesheet verwendet, wird es wie folgt definiert:

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

wobei deg Grad, grad Gon und rad Radianten anzeigt.

Für Eigenschaften, die in CSS2 definiert sind, muss eine Winkel-Einheitsbezeichnung angegeben werden. Für Winkelangaben in SVG-spezifischen Eigenschaften und deren entsprechenden Präsentationsattributen ist die Einheitsbezeichnung optional. Wenn sie nicht angegeben wird, wird der Winkelwert in Grad angenommen. In Präsentationsattributen für alle Eigenschaften, ob sie in SVG1.1 oder CSS2 definiert sind, muss die Einheitsbezeichnung, falls angegeben, in Kleinbuchstaben geschrieben werden.

Wenn Winkel in einem SVG-Attribut verwendet werden, wird <angle> stattdessen wie folgt definiert:

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

Die Einheitsbezeichnungen in solchen <angle>-Werten müssen in Kleinbuchstaben geschrieben werden.

Im SVG-DOM werden <angle>-Werte mithilfe von SVGAngle oder SVGAnimatedAngle-Objekten dargestellt.

Beliebige Werte

<anything>

Der grundlegende Typ <anything> ist eine Sequenz aus null oder mehr Zeichen. Genauer gesagt:

anything ::= Char*

wobei Char jedes gültige nicht-kontrollierende Unicode-Zeichen ist.

Zeitwert

<clock-value>

Zeitwerte haben die gleiche Syntax wie in der SMIL Animation-Spezifikation. Die Grammatik für Zeitwerte wird hier wiederholt:

Clock-val         ::= Full-clock-val | Partial-clock-val
                      | Timecount-val
Full-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 number
Minutes           ::= 2DIGIT; range from 00 to 59
Seconds           ::= 2DIGIT; range from 00 to 59
Fraction          ::= DIGIT+
Timecount         ::= DIGIT+
2DIGIT            ::= DIGIT DIGIT
DIGIT             ::= [0-9]

Für Timecount-Werte ist die Standardmetrik-Suffixangabe s (für Sekunden). In Zeitwerten ist kein eingebettetes Leerzeichen erlaubt, obwohl führende und nachfolgende Leerzeichen ignoriert werden.

Beispiele für gültige Zeitwerte:

  • Vollständige Zeitwerte:
    • 02:30:03 = 2 Stunden, 30 Minuten und 3 Sekunden
    • 50:00:10.25 = 50 Stunden, 10 Sekunden und 250 Millisekunden
  • Teilweise Zeitwerte:
    • 02:33 = 2 Minuten und 33 Sekunden
    • 00:10.5 = 10.5 Sekunden = 10 Sekunden und 500 Millisekunden
  • Zeitzählwerte:
    • 3.2h = 3.2 Stunden = 3 Stunden und 12 Minuten
    • 45min = 45 Minuten
    • 30s = 30 Sekunden
    • 5ms = 5 Millisekunden
    • 12.467 = 12 Sekunden und 467 Millisekunden
  • Bruchwerte sind einfach (auf Basis 10) Gleitkommazahlen in Sekunden. Zum Beispiel:
    • 00.5s = 500 Millisekunden
    • 00:00.005 = 5 Millisekunden

Farbe

<color>

Der grundlegende Typ <color> ist eine CSS2-kompatible Spezifikation für eine Farbe im sRGB-Farbraum. <color> gilt für die Verwendung des color-Attributs in SVG und ist Bestandteil der Definitionen der Attribute fill, stroke, stop-color, flood-color, und lighting-color, die auch optionale ICC-basierte Farbspezifikationen bieten.

Die Definition von <color> in SVG entspricht genau der Definition im CSS <color>.

Koordinate

<coordinate>

Eine <coordinate> ist eine Länge im vom Benutzer definierten Koordinatensystem, die den angegebenen Abstand vom Ursprung des Koordinatensystems entlang der relevanten Achse darstellt (der x-Achse für X-Koordinaten, der y-Achse für Y-Koordinaten). Ihre Syntax ist identisch mit der von <length>.

Im SVG-DOM wird eine <coordinate> als SVGLength oder SVGAnimatedLength dargestellt.

Frequenz

<frequency>

Frequenzwerte werden mit Hörbaren-Eigenschaften verwendet. Wie in CSS2 definiert, ist ein Frequenzwert eine <number>, gefolgt von einer Frequenzeinheit. Die Frequenzeinheiten sind:

  • Hz: Hertz
  • kHz: Kilohertz

Frequenzwerte dürfen nicht negativ sein.

FuncIRI

<FuncIRI>

Funktionale Notation für eine Referenz. Die Syntax dieser Referenz entspricht der Syntax des CSS URI.

Ganzzahl

<integer>

Eine <integer> wird definiert als ein optionales Vorzeichenzeichen (+ oder -), gefolgt von einer oder mehreren Ziffern 0 bis 9:

integer ::= [+-]? [0-9]+

Wenn das Vorzeichenzeichen nicht vorhanden ist, ist die Zahl nicht negativ.

Sofern für ein bestimmtes Attribut oder eine Eigenschaft nichts anderes angegeben ist, umfasst der Bereich für eine <integer> (mindestens) -2147483648 bis 2147483647.

Im SVG-DOM wird eine <integer> als number oder als SVGAnimatedInteger dargestellt.

IRI

<IRI>

Ein Internationalisierter Ressourcen-Identifikator.

Im Internet werden Ressourcen durch IRIs (Internationalisierte Ressourcen-Identifikatoren) identifiziert. Zum Beispiel könnte eine SVG-Datei namens someDrawing.svg, die sich unter http://example.com befindet, den folgenden IRI haben:

http://example.com/someDrawing.svg

Ein IRI kann auch ein bestimmtes Element in einem XML-Dokument ansprechen, indem ein IRI-Fragmentbezeichner als Teil des IRI inkludiert wird. Ein IRI, das einen IRI-Fragmentbezeichner enthält, besteht aus einem optionalen Basis-IRI, gefolgt von einem #-Zeichen, gefolgt vom IRI-Fragmentbezeichner. Zum Beispiel kann folgender IRI verwendet werden, um das Element mit der ID Lamppost innerhalb der Datei someDrawing.svg zu spezifizieren:

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

IRIs werden im href-Attribut verwendet. Einige Attribute erlauben sowohl IRIs als auch Textzeichenfolgen als Inhalt. Um eine Textzeichenfolge von einem relativen IRI zu unterscheiden, wird die funktionale Notation <FuncIRI> verwendet. Dies ist ein IRI, der mit einer funktionalen Notation abgegrenzt wird. Hinweis: Aus historischen Gründen sind die Begrenzungszeichen url( und ), um mit den CSS-Spezifikationen kompatibel zu sein. Die FuncIRI-Form wird in Präsentationsattributen verwendet.

SVG verwendet umfangreich IRI-Referenzen, sowohl absolute als auch relative, auf andere Objekte. Zum Beispiel, um ein Rechteck mit einem linearen Verlauf zu füllen, definiert man zunächst ein <linearGradient>-Element und gibt ihm eine ID, wie in:

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

Anschließend referenziert man den linearen Verlauf als Wert des fill-Attributs für das Rechteck, wie im folgenden Beispiel:

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

SVG unterstützt zwei Arten von IRI-Referenzen:

  • Lokale IRI-Referenzen, bei denen die IRI-Referenz keinen <absoluteIRI> oder <relativeIRI> enthält und daher nur einen Fragmentbezeichner (z. B. #<elementID> oder #xpointer(id<elementID>)) enthält.

  • Nicht-lokale IRI-Referenzen, bei denen die IRI-Referenz einen <absoluteIRI> oder <relativeIRI> enthält.

    Für die vollständige Spezifikation der IRI-Referenzen in SVG siehe SVG 1.1 (2nd Edition): IRI references.

Länge

<length>

Eine Länge ist eine Maßangabe der Entfernung, angegeben als Zahl zusammen mit einer Einheit. Die SVG2-Spezifikation richtet sich nach den CSS <length> Datentypen und Einheiten für die Syntax und Werte der Attribute. Eine Einheitsangabe muss bereitgestellt werden, und die Werte der Einheitensymbole sind nicht case-sensitiv. Die Syntax folgt der CSS <length>-Syntax:

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

Für SVG-spezifische Eigenschaften, die in SVG1.1 definiert sind, und deren entsprechenden Präsentationsattribute, sind die Einheitenangaben in Werten optional. Wenn nicht angegeben, stellt der Längenwert eine Entfernung im aktuellen Benutzerkoordinatensystem dar. Einheitsangaben müssen in Kleinbuchstaben geschrieben werden, wenn sie in Präsentationsattributen für alle Eigenschaften verwendet werden, ob sie in SVG oder CSS definiert sind. Diese Case-Sensitivity wurde in SVG2 gelockert, um mit CSS übereinzustimmen.

Beachten Sie, dass die nicht-Eigenschaftsdefinition von <length> auch eine Prozentangabe (%) als Einheit erlaubt. Die Bedeutung eines prozentualen Längenwerts hängt vom Attribut ab, für das der prozentuale Längenwert angegeben wurde. Zwei häufige Fälle sind:

  • wenn ein prozentualer Längenwert einen Prozentsatz der Ansichtsfensterbreite oder -höhe darstellt
  • wenn ein prozentualer Längenwert einen Prozentsatz der Begrenzungsrahmenbreite oder -höhe eines gegebenen Objekts darstellt.

Im SVG-DOM werden <length>-Werte als SVGLength oder SVGAnimatedLength Objekte dargestellt.

Liste von Ts

<list-of-Ts>

(Dabei ist T ein Typ.) Eine Liste besteht aus einer getrennten Sequenz von Werten. Sofern nicht ausdrücklich anders beschrieben, können Listen innerhalb von SVGs XML-Attributen entweder durch Kommas (mit optionalem Leerzeichen davor oder danach) oder Leerzeichen getrennt sein.

Leerzeichen in Listen werden als ein oder mehrere der folgenden aufeinanderfolgenden Zeichen definiert: "Leerzeichen" (U+0020), "Tabulator" (U+0009), "Zeilenumbruch" (U+000A), "Wagenrücklauf" (U+000D), und "Seitenvorschub" (U+000C).

Folgendes ist ein Template für eine EBNF-Grammatik, die die <list-of-Ts>-Syntax beschreibt:

list-of-Ts ::= T
                | T, list-of-Ts

Im SVG-DOM werden Werte eines <list-of-Ts>-Typs durch ein spezifisches Interface für den jeweiligen Typ T repräsentiert. Zum Beispiel wird eine <list-of-lengths> im SVG-DOM mithilfe eines SVGLengthList oder SVGAnimatedLengthList-Objekts dargestellt.

Name

<name>

Ein Name ist eine Zeichenkette, bei der einige Zeichen mit syntaktischer Bedeutung ausgeschlossen sind.

name  ::= [^,()#x20#x9#xD#xA] /* any char except ",", "(", ")" or wsp */

Zahl

<number>

Reelle Zahlen werden in zwei Formen angegeben. Wenn sie in einem Stylesheet verwendet werden, wird ein <number> wie folgt definiert:

number ::= integer
            | [+-]? [0-9]* "." [0-9]+

Diese Syntax entspricht der Definition in CSS (CSS2, Abschnitt 4.3.1).

Wenn eine Zahl in einem SVG-Attribut verwendet wird, wird ein <number> anders definiert, um Zahlen mit großen Größenordnungen effizienter anzugeben:

number ::= integer ([Ee] integer)?
            | [+-]? [0-9]* "." [0-9]+ ([Ee] integer)?

Im SVG-DOM wird ein <number> als Float, SVGNumber oder SVGAnimatedNumber dargestellt.

Optionale Zahl-Paare

<number-optional-number>

Ein Paar von <number>, wobei die zweite <number> optional ist.

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

Im SVG-DOM wird ein <number-optional-number> durch ein Paar von SVGAnimatedInteger oder SVGAnimatedNumber Objekten dargestellt.

Opazitätswert

<opacity-value>

Die Deckkraft der Farbe oder des Inhalts, mit dem das aktuelle Objekt gefüllt ist, als <number>. Werte außerhalb des Bereichs von 0.0 (vollständig transparent) bis 1.0 (vollständig deckend) werden auf diesen Bereich begrenzt.

Farbe/Anstrich

<paint>

Die Werte der Eigenschaften fill und stroke definieren die Art der Farbe/Anstrich, die für das Füllen oder Umranden eines grafischen Elements verwendet werden soll. Die verfügbaren Optionen und die Syntax für <paint> sind:

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

Die Werte context-fill und context-stroke erlauben das Vererben von Werten in marker- und use-Elementen.

Prozentsatz

<percentage>

Prozentangaben werden als Zahl gefolgt von einem %-Zeichen angegeben:

percentage ::= number "%"

Beachten Sie, dass die Definition von <number> davon abhängt, ob der Prozentsatz in einem Stylesheet oder in einem Attribut, das nicht auch ein Präsentationsattribut ist, angegeben wird.

Prozentwerte beziehen sich immer auf einen anderen Wert (z. B. eine Länge). Jedes Attribut oder jede Eigenschaft, die Prozentsätze erlaubt, definiert auch die Referenzmaßeinheit, auf die sich der Prozentsatz bezieht.

Im SVG-DOM wird ein <percentage> mithilfe eines SVGNumber oder SVGAnimatedNumber-Objekts dargestellt.

Zeit

<time>

Ein Zeitwert ist eine <number>, gefolgt von einer Zeiteinheit. Die Zeiteinheiten sind:

  • ms: Millisekunden
  • s: Sekunden

Transformationsliste

<transform-list>

Eine <transform-list> wird verwendet, um eine Liste von Koordinatentransformationen zu spezifizieren. Eine detaillierte Beschreibung der möglichen Werte für eine <transform-list> finden Sie in der Definition des Attributs transform.

Im SVG-DOM wird ein <transform-list>-Wert mithilfe eines SVGTransformList oder SVGAnimatedTransformList-Objekts dargestellt.

URL

URL

Ein Uniform Resource Locator.

Eine URL ist eine Sequenz von Unicode-Zeichen, die eine Adresse zu einer internen oder externen Ressource bilden.

Vor SVG 2 wurde der stärker eingeschränkte IRI-Inhaltstyp verwendet, da die URL-Spezifikation noch nicht standardisiert war.