Inhaltstyp

SVG verwendet eine Reihe von Datentypen. Dieser Artikel listet diese Typen zusammen mit ihrer Syntax und Beschreibung ihrer Verwendung auf.

Winkel

<angle>

Winkel werden auf zwei Arten angegeben. Wenn sie im Wert einer Eigenschaft in einem Stylesheet verwendet werden, wird ein <angle> wie folgt definiert:

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

wobei deg Grad, grad Gradian und rad Radiant bedeutet.

Für in CSS2 definierte Eigenschaften muss eine Winkel-Einheit angegeben werden. Bei Winkelwerten in SVG-spezifischen Eigenschaften und den entsprechenden Präsentationsattributen ist die Angabe der Winkel-Einheit optional. Sofern nicht angegeben, wird der Winkelwert als Grad angenommen. In Präsentationsattributen für alle Eigenschaften, ob in SVG1.1 oder CSS2 definiert, muss der Winkelbezeichner, falls angegeben, in Kleinbuchstaben sein.

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

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

Die Einheitenbezeichner in solchen <angle>-Werten müssen in Kleinbuchstaben sein.

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

Anything

<anything>

Der Basistyp <anything> ist eine Sequenz von null oder mehr Zeichen. Genauer gesagt:

anything ::= Char*

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

Clock-value

<clock-value>

Clock-Werte haben die gleiche Syntax wie in der SMIL Animation Spezifikation. Die Grammatik für Clock-Werte 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]

Bei Timecount-Werten ist das Standardmetrische Suffix s (für Sekunden). Eingebettete Leerzeichen sind in Clock-Werten nicht erlaubt, obwohl führende und nachfolgende Leerzeichen ignoriert werden.

Die folgenden sind Beispiele für gültige Clock-Werte:

  • Volle Clock-Werte:
    • 02:30:03 = 2 Stunden, 30 Minuten und 3 Sekunden
    • 50:00:10.25 = 50 Stunden, 10 Sekunden und 250 Millisekunden
  • Partielle Clock-Werte:
    • 02:33 = 2 Minuten und 33 Sekunden
    • 00:10.5 = 10,5 Sekunden = 10 Sekunden und 500 Millisekunden
  • Timecount-Werte:
    • 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 nur (im Basis-10) Fließkomma-Definitionen von Sekunden. Beispielsweise:
    • 00.5s = 500 Millisekunden
    • 00:00.005 = 5 Millisekunden

Farbe

<color>

Der Basistyp <color> ist eine mit CSS2 kompatible Spezifikation einer Farbe im sRGB-Farbraum. <color> gilt für die Nutzung des color Attributs in SVG und ist ein 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 CSS-Definition <color>.

Koordinate

<coordinate>

Eine <coordinate> ist eine Länge im Benutzerkoordinatensystem, die die gegebene Entfernung vom Ursprung des Benutzerkoordinatensystems entlang der relevanten Achse (der x-Achse für X-Koordinaten, der y-Achse für Y-Koordinaten) darstellt. Ihre Syntax entspricht der des <length>.

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

Frequenz

<frequency>

Frequenzwerte werden mit akustischen Eigenschaften verwendet. Wie in CSS2 definiert, ist ein Frequenzwert eine <number>, gefolgt von einem Frequenzeinheit-Bezeichner. Die Frequenz-Einheitsbezeichner sind:

  • Hz: Hertz
  • kHz: Kilo Hertz

Frequenzwerte dürfen nicht negativ sein.

FuncIRI

<FuncIRI>

Funktionale Notation für einen Verweis. Die Syntax für diesen Verweis entspricht der CSS-URI.

Ganzzahl

<integer>

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

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

Sofern das Vorzeichenzeichen nicht vorhanden ist, ist die Zahl nicht-negativ.

Sofern nicht anders angegeben, umfasst der Bereich für eine <integer> mindestens -2147483648 bis 2147483647.

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

IRI

<IRI>

Ein Internationalized Resource Identifier.

Im Internet werden Ressourcen mit IRIs (Internationalisierte Ressourcenkennungen) identifiziert. Beispielsweise könnte eine SVG-Datei namens someDrawing.svg, die unter http://example.com gefunden wird, den folgenden IRI haben:

http://example.com/someDrawing.svg

Ein IRI kann auch ein bestimmtes Element innerhalb eines XML-Dokuments adressieren, indem ein IRI-Fragmentbezeichner als Teil des IRI aufgenommen wird. Ein IRI, das einen IRI-Fragmentbezeichner enthält, besteht aus einem optionalen Basis-IRI, gefolgt von einem #-Zeichen und dem IRI-Fragmentbezeichner. Zum Beispiel kann der folgende IRI verwendet werden, um das Element mit der ID Lamppost innerhalb der Datei someDrawing.svg anzugeben:

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

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

SVG macht extensiven Gebrauch von IRI-Verweisen, sowohl absolut als auch relativ, auf andere Objekte. Beispielsweise, um ein Rechteck mit einem linearen Farbverlauf zu füllen, definieren Sie zuerst ein <linearGradient> Element und geben ihm eine ID, wie in:

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

Anschließend verweisen Sie auf den linearen Farbverlauf als den Wert des fill Attributs für das Rechteck, wie im folgenden Beispiel:

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

SVG unterstützt zwei Arten von IRI-Verweisen:

  • lokale IRI-Verweise, bei denen der IRI-Verweis kein <absoluteIRI> oder <relativeIRI> enthält und somit nur einen Fragmentbezeichner enthält (d.h. #<elementID> oder #xpointer(id<elementID>)).

  • nicht-lokale IRI-Verweise, bei denen der IRI-Verweis ein <absoluteIRI> oder <relativeIRI> enthält.

    Für die vollständige Spezifikation von IRI-Verweisen in SVG siehe SVG 1.1 (2. Auflage): IRI-Verweise.

Länge

<length>

Eine Länge ist eine Distanzmessung, angegeben als Zahl zusammen mit einer Einheit. Die SVG2-Spezifikation stimmt mit den CSS <length> Datentypen und Einheiten für die Attributsyntax und Werte überein. Eine Längeneinheit muss angegeben werden, und die Werte der Längeneinheiten sind nicht groß- und kleinschreibungssensitiv. Die Syntax folgt der CSS <length>-Syntax:

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

Für die in SVG1.1 definierten SVG-spezifischen Eigenschaften und ihre entsprechenden Präsentationsattribute sind die Einheitenbezeichner in Werten optional. Wenn nicht angegeben, stellt der Längenwert eine Distanz im aktuellen Benutzerkoordinatensystem dar. Längenbezeichner müssen in Kleinbuchstaben geschrieben werden, wenn sie in Präsentationsattributen für alle Eigenschaften verwendet werden, egal ob sie in SVG oder in CSS definiert sind. Diese Groß- und Kleinschreibungsempfindlichkeit wird in SVG2 gelockert, um mit CSS übereinzustimmen.

Beachten Sie, dass die Nicht-Eigenschaftsdefinition von <length> auch ein Prozentzeichen (%) als Einheit erlaubt. Die Bedeutung eines prozentualen Längenwertes hängt von dem 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 Ansichtsbreite oder -höhe darstellt
  • wenn ein prozentualer Längenwert einen Prozentsatz der Begrenzungsboxbreite oder -höhe eines gegebenen Objekts darstellt.

Im SVG-DOM werden <length>-Werte mit SVGLength oder SVGAnimatedLength Objekten dargestellt.

Liste von Ts

<list-of-Ts>

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

Leerzeichen in Listen wird definiert als eines oder mehrere der folgenden aufeinander folgenden Zeichen: "space" (U+0020), "tab" (U+0009), "line feed" (U+000A), "carriage return" (U+000D), und "form-feed" (U+000C).

Das Folgende ist eine Vorlage 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 eine schnittstellenspezifische Darstellung für den speziellen Typ T repräsentiert. Zum Beispiel wird eine <list-of-lengths> im SVG-DOM unter Verwendung eines SVGLengthList oder SVGAnimatedLengthList Objekts dargestellt.

Name

<name>

Ein Name, der eine Zeichenkette ist, bei der wenige Zeichen von syntaktischer Bedeutung ausgeschlossen sind.

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

Nummer

<number>

Reelle Zahlen werden auf zwei Arten 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 sie in einem SVG-Attribut verwendet werden, wird ein <number> anders definiert, um Zahlen mit großen Größenordnungen prägnanter spezifizieren zu können:

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

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

Nummer-optional-Nummer

<number-optional-number>

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

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

Im SVG-DOM wird ein <number-optional-number> unter Verwendung eines Paares von SVGAnimatedInteger oder SVGAnimatedNumber Objekten dargestellt.

Opazitätswert

<opacity-value>

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

Farbe

<paint>

Die Werte für die Eigenschaften fill und stroke definieren die Art der Farbe, die beim Füllen oder Umrahmen eines bestimmten Grafikelements verwendet wird. 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 ermöglichen die Vererbung von Werten in marker und use Elementen.

Prozent

<percentage>

Prozentsätze werden als Zahl gefolgt von einem Prozentzeichen % angegeben:

percentage ::= number "%"

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

Prozentwerte sind immer relativ zu einem anderen Wert (zum Beispiel eine Länge). Jedes Attribut oder jede Eigenschaft, die Prozentwerte zulässt, definiert auch die Referenz-Distanzmessung, auf die sich der Prozentsatz bezieht.

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

Zeit

<time>

Ein Zeitwert ist ein <number>, dem unmittelbar ein Zeitbezeichner folgt. Die Zeitbezeichner sind:

  • ms: Millisekunden
  • s: Sekunden

Transformationsliste

<transform-list>

Eine <transform-list> wird verwendet, um eine Liste von Koordinatensystemtransformationen zu spezifizieren. Eine detaillierte Beschreibung der möglichen Werte für eine <transform-list> wird in der {SVGAttr("transform")}} Attributdefinition gegeben.

Im SVG-DOM wird ein <transform-list> Wert unter Verwendung 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 bildet.

Vor SVG 2 wurde der eingeschränktere IRI-Inhaltstyp stattdessen verwendet, da die URL-Spezifikation zuvor nicht standardisiert war.