Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

Inhaltstyp

SVG verwendet eine Reihe von Datentypen. Dieser Artikel listet diese Typen zusammen mit ihrer Syntax und Beschreibungen ihrer Verwendungszwecke 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 Gon und rad Radianten angibt.

Für in CSS2 definierte Eigenschaften muss ein Winkel-Einheitenbezeichner angegeben werden. Für Winkelwerte in SVG-spezifischen Eigenschaften und deren zugehörigen Präsentationsattributen ist der Winkel-Einheitenbezeichner optional. Wird er 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 mit SVGAngle oder SVGAnimatedAngle Objekten dargestellt.

Irgendetwas

<anything>

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

anything ::= Char*

wobei Char ein beliebiges gültiges nicht-steuerndes 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 das Standard-Metriksuffix s (für Sekunden). In Zeitwerten sind keine eingebetteten Leerzeichen erlaubt, obwohl vorangestellte und nachgestellte Leerzeichen ignoriert werden.

Folgende Beispiele zeigen gültige Zeitwerte:

  • Volle Zeitwerte:
    • 02:30:03 = 2 Stunden, 30 Minuten und 3 Sekunden
    • 50:00:10.25 = 50 Stunden, 10 Sekunden und 250 Millisekunden
  • Partielle Zeitwerte:
    • 02:33 = 2 Minuten und 33 Sekunden
    • 00:10.5 = 10,5 Sekunden = 10 Sekunden und 500 Millisekunden
  • Zeitwerte:
    • 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 (Basis 10) Gleitkommadefinitionen von Sekunden. Somit:
    • 00.5s = 500 Millisekunden
    • 00:00.005 = 5 Millisekunden

Farbe

<color>

Der Basistyp <color> ist eine mit CSS2 kompatible Spezifikation für eine Farbe im sRGB-Farbraum. <color> bezieht sich auf SVGs Verwendung des color Attributs 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 exakt der CSS <color> Definition.

Koordinate

<coordinate>

Eine <coordinate> ist eine Länge im Nutzerkoordinatensystem, die den gegebenen Abstand vom Ursprung des Nutzerkoordinatensystems entlang der relevanten Achse (die x-Achse für X-Koordinaten, die y-Achse für Y-Koordinaten) darstellt. Ihre Syntax ist dieselbe wie die von <length>.

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

Frequenz

<frequency>

Frequenzwerte werden mit auditiven Eigenschaften verwendet. Wie in CSS2 definiert, ist ein Frequenzwert ein <number> unmittelbar gefolgt von einem Frequenzeinheiten-Bezeichner. Die Frequenzeinheiten-Bezeichner sind:

  • Hz: Hertz
  • kHz: KiloHertz

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 optionales Vorzeichenzeichen (+ oder -) gefolgt von einer oder mehreren Ziffern 0 bis 9 angegeben:

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

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

Sofern nicht anders für ein bestimmtes Attribut oder eine Eigenschaft angegeben, 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 mit IRIs (Internationalisierte Ressourcenidentifikatoren) identifiziert. Ein SVG-Datei namens someDrawing.svg, die sich unter http://example.com befindet, könnte zum Beispiel den folgenden IRI haben:

http://example.com/someDrawing.svg

Ein IRI kann auch ein bestimmtes Element innerhalb eines XML-Dokuments adressieren, indem ein IRI Fragmentidentifikator als Teil des IRI eingeschlossen wird. Ein IRI, das ein IRI Fragmentidentifikator einschließt, besteht aus einem optionalen Basis-IRI, gefolgt von einem # Zeichen und dem IRI Fragmentidentifikator. Zum Beispiel kann der folgende 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, das mit einer funktionalen Notation abgegrenzt ist. Hinweis: Aus historischen Gründen sind die Begrenzungen url( und ), um die Kompatibilität mit den CSS-Spezifikationen zu gewährleisten. Die FuncIRI Form wird in Präsentationsattributen verwendet.

SVG macht umfangreichen Gebrauch von IRI-Verweisen, sowohl absoluten als auch relativen, 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>

Sie verweisen dann auf den linearen Farbverlauf 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-Verweisen:

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

IRI ist jetzt ein veraltetes Konzept in SVG 2, ersetzt durch den universellen URL Typ.

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 Attribusyntax und Werte überein. Ein Längeneinheiten-Bezeichner muss angegeben werden und die Werte der Längeneinheiten-Bezeichner 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 Einheitenbezeichner in Werten optional. Wenn nicht angegeben, repräsentiert der Längenwert eine Distanz im aktuellen Benutzerkoordinatensystem. Längenbezeichner müssen in Kleinbuchstaben sein, wenn sie in Präsentationsattributen für alle Eigenschaften verwendet werden, ob sie in SVG oder CSS definiert sind. Diese Fall-Sensitivität wurde in SVG2 gelockert, um mit CSS übereinzustimmen.

Beachten Sie, dass die Nicht-Eigenschaftsdefinition von <length> auch einen Prozentsatz (%) Einheitenbezeichner erlaubt. Die Bedeutung eines prozentualen Längenwerts hängt vom Attribut ab, für das der prozentuale Längenwert angegeben wurde. Zwei übliche 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 bestimmten Objekts darstellt.

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

Liste von Ts

<list-of-Ts>

(Wobei T ein bestimmter Typ ist.) Eine Liste besteht aus einer getrennten Sequenz von Werten. Sofern nicht anders beschrieben, können Listen innerhalb von SVGs XML-Attributen entweder durch Kommas getrennt (mit optionalem Leerzeichen vor oder nach dem Komma) oder durch Leerzeichen getrennt sein.

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

Folgendes 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 ein auf den jeweiligen Typ T spezifisches Interface dargestellt. Zum Beispiel wird eine <list-of-lengths> im SVG DOM durch ein SVGLengthList oder SVGAnimatedLengthList Objekt dargestellt.

Name

<name>

Ein Name, also eine Zeichenfolge, bei der einige Zeichen mit besonderer syntaktischer Bedeutung nicht erlaubt sind.

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

Zahl

<number>

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

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

Diese Syntax ist dieselbe wie die Definition in CSS (CSS2, Abschnitt 4.3.1).

Wenn sie in einem SVG-Attribut verwendet werden, wird ein <number> anders definiert, um es zu ermöglichen, Zahlen mit großen Größenordnungen prägnanter anzugeben:

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

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

Zahl-optional-Zahl

<number-optional-number>

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

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

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

Deckkraftwert

<opacity-value>

Die Deckkraft der Farbe oder des Inhalts, mit dem das aktuelle Objekt gefüllt wird, als <number>. 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 Umranden eines grafischen Elements zu verwenden ist. Die verfügbaren Optionen und die Syntax für <paint> sind:

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

Die context-fill und context-stroke Werte ermöglichen das Erben von Werten in marker und use Elementen.

Prozentsatz

<percentage>

Prozentsätze werden als eine 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 Attribute, das nicht auch ein Präsentationsattribut ist, angegeben wird.

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

Im SVG DOM wird ein <percentage> mit einem SVGNumber oder SVGAnimatedNumber Objekt dargestellt.

Zeit

<time>

Ein Zeitwert ist ein <number>, unmittelbar gefolgt von einem Zeit-Einheiten-Bezeichner. Die Zeit-Einheiten-Bezeichner sind:

  • ms: Millisekunden
  • s: Sekunden

Umwandlungsliste

<transform-list>

Eine <transform-list> wird verwendet, um eine Liste von Koordinatensystemtransformationen anzugeben. Eine detaillierte Beschreibung der möglichen Werte für eine <transform-list> wird in der transform Attributdefinition gegeben.

Im SVG DOM wird ein <transform-list> Wert mit einem SVGTransformList oder SVGAnimatedTransformList Objekt dargestellt.

URL

URL

Ein Uniform Resource Locator.

Eine URL ist eine Sequenz von Unicode Zeichen und bildet die Adresse zu einer internen oder externen Ressource.

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