SVG/ SVG-Farben

Wie bereits für die Eigenschaft fill erläutert, können Farbwerte in SVG in verschiedener Form angegeben werden. Immer verfügbar ist die numerische Angabe, entweder in hexadezimaler Form (#abc oder #abcdef) oder in dezimaler Form (rgb(1,2,3)) oder als Prozentwerte (rgb(1%,2%,3%)). Dazu gibt es die sechzehn Farbwörter von (X)HTML: black, green, silver, lime, gray, olive, white, yellow, maroon, navy, red, blue, purple, teal, fuchsia, aqua (siehe unten für die entsprechenden numerischen Angaben).

Das volle Profil von SVG 1.1 und auch SVG tiny 1.2 verfügen über die ursprünglich in CSS2 definierten Schlüsselwörter für Systemfarben.

In SVG tiny 1.2 wurden zudem feste Farben als Maldienst neu eingeführt. Damit kann der Autor selbst Schlüsselwörter beziehungsweise einen Maldienst für oft verwendete Farben definieren.

Im vollen Profil von SVG 1.1 sind ferner einige weitere Farben mit Namen benannt (wie ursprünglich in CSS definiert), diese Schlüsselwörter müssen dann allerdings nicht bei einem Darstellungsprogramm für das tiny-Profil funktionieren.

Zur Angabe eines hexadezimalen Farbwertes wird eine Notation mit drei Farbkanälen, rot, grün, blau im Standardfarbraum sRGB verwendet. Die Angabe beginnt mit einem # gefolgt von hexadezimalen Ziffern.

Dies ist entweder exakt eine Ziffer für jeden Farbkanal, also 3 Ziffern, jeweils eine Möglichkeit von folgenden: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, A, b, B, c, C, d, D, e, E, f, F. Große und kleine Buchstaben bedeuten jeweils das gleiche, im dezimalen System sind a bis f die Zahlen 10 bis 15.

Alternativ kann auch eine Notation mit zwei von den Ziffern pro Kanal gewählt werden, deckt dann dezimal den Bereich von 0 bis 255 ab. Die Konversion von der einziffrigen Notation in der mit zwei Ziffern pro Kanal erfolgt einfach durch Verdopplung der einzelnen Ziffer, #fff ist also gleich #ffffff oder auch weiß oder #abc ist gleich #aabbcc.

Dezimale Angaben aus dem gleichen Bereich von 0 bis 255 für jeden Kanal sind ebenfalls verfügbar. Es gibt wieder die drei Kanäle des Standardfarbraumes sRGB. Die Notation beginnt mit 'rgb(' und endet mit ')' dazwischen befinden sich die Angaben zu den drei Kanälen, jeweils mit Komma separiert, also zum Beispiel rgb(255,255,255) entspricht #fff in hexadezimaler Schreibweise oder auch weiß.

Statt einer dezimalen Angabe ist auch die Angabe von drei Prozentwerten möglich, jeweils im Bereich von 0% bis 100%, die Angabe des Symboles '%' ist wichtig, damit das Darstellungsprogramm zwischen Prozentangaben und dezimalen Angaben unterscheiden kann. Es darf nicht gemischt werden, also ein Kanal in dezimaler Notation und einer in prozentualer Notation ist nicht erlaubt. Ansonsten ist die Notation für prozentuale Angaben die gleiche wie für dezimale, Beispiel: rgb(17.1345%,0.57%,99.2%). Anders als bei den anderen Notationen sind bei Prozentangaben auch nichtganzzahlige Angaben erlaubt.

Mit dem Element color-profile kann ein ICC-Farbprofil (International Color Consortium) festgelegt werden. Die Funktionalität dieses Elementes entspricht der CSS-Regel @color-profile.

Mit dem Attribut wird eine Ressource für ein ICC-Farbprofil referenziert.

Für dieses Element ist dieses Attribut nicht animierbar. Neben diesem Attribut sind auch die anderen von XLink verfügbar.

Alternativ zur Referenzierung einer externen Ressource mit href von XLink kann auch der Fragmentidentifizierer einer lokalen Ressource angegeben werden. Dies kann mit dem Attribut local passieren. Sind beide Möglichkeiten angegeben, wird erst die lokale Ressource durchsucht, wenn dort das Farbprofil nicht gefunden wird, wird auch noch die externe Ressource durchsucht.

Der Wert des Attributes ist eine Zeichenkette, welche einen Fragmentidentifizier im Sinne von ICC darstellt.

Das Attribut ist nicht animierbar.

Das Attribut gibt den Namen an, der als erster Parameter bei der Verwendung eines ICC-Profiles bei der Angabe eines Farbwertes (zum Beispiel für fill und stroke etc) verwendet wird.

Der Wert ist eine Zeichenkette. Das Attribut ist nicht animierbar.

Der Name 'sRGB' ist reserviert und nicht erlaubt.

Das Attribut legt die beabsichtigte Darstellungsart fest. Möglich sind die Werte:

auto

Voreinstellung, das Darstellungsprogramm entscheidet automatisch

perceptual

Das Gamut wird verändert, um die Verhältnisse zwischen Farbwerten zu erhalten

relative-colorimetric

Angaben innerhalb des Gamuts bleiben erhalten, außerhalb wird an den Rand des erlaubten Bereiches verschoben

saturation

Die Farben werden so konvertiert, dass die Sättigung erhalten bleibt

absolute-colorimetric

Schaltet Punkt-für-Punkt-Anpassung ab, nicht empfohlen.

Das Attribut ist nicht animierbar.

Die Eigenschaft ist anwendbar für Elemente, die Pixelgraphik referenzieren, wie image und gibt das Farbprofil an, welches verwendet werden soll, um das Bild darzustellen.

Mögliche Werte sind:

inherit

geerbt

auto

Voreinstellung. Hat das Bild ein eigenes Farbprofil, wird dies verwendet, sonst sRGB.

sRGB

Farbprofil sRGB, wie auch anderweitig in SVG verwendet

Name

Angabe des Namens eines Farbprofils

IRI

IRI zu einem Farbprofil

Das Attribut ist animierbar. Die Eigenschaft wird vererbt.

SVG
1.1	1.7	9.0	3.0	-	-	?	?	-

In SVG 1.1 können Systemfarben mit Schlüsselwörtern angegeben werden. Ob die Systemfarben auch in SVG tiny 1.1 verfügbar sind, ist nicht eindeutig festgelegt. Die gleichen Schlüsselwörter werden allerdings in SVG tiny 1.2 als Maldienste bereitgestellt. Es gibt folgende Schlüsselwörter mit der Angabe, wo die entsprechenden Farben auftauchen:

ActiveBorder

Rand des aktiven Fensters.

ActiveCaption

Titel des aktiven Fensters.

AppWorkspace

Hintergrundfarbe der Schnittstelle bei mehrfachen Dokumenten.

Background

Arbeitsflächenhintergrund.

ButtonFace

Oberflächenfarbe von dreidimensionalen Anzeigelementen.

ButtonHighlight

Dunkler Schatten von dreidimensionalen Anzeigelementen (Kanten an der lichtabgewandten Seite).

ButtonShadow

Farbe des Schattens von dreidimensionalen Anzeigelementen.

ButtonText

Text auf Druckknöpfen.

CaptionText

Text der Überschrift, Größeneinstellungsbereich, Rollbalkenpfeilbereich.

GrayText

Deaktivierter, ausgegrauter Text.

Highlight

Ausgewählte Punkte einer Kontrolliste.

HighlightText

Text in ausgewählten Punkten einer Kontrolliste.

InactiveBorder

Inaktiver Fensterrand.

InactiveCaption

Inaktiver Fenstertitel.

InactiveCaptionText

Farbe des Textes eines inaktiven Fenstertitels.

InfoBackground

Hintergrundfarbe für Kontrollelemente von Nutzerhilfen.

InfoText

Textfarbe für Kontrollelemente von Nutzerhilfen.

Menu

Menü Hintergrund.

MenuText

Text in Menüs.

Scrollbar

Grauer Bereich eines Rollbalkens.

ThreeDDarkShadow

Dunkler Schatten von dreidimensionalen Anzeigelementen.

ThreeDFace

Overflächenfarbe von dreidimensionalen Anzeigelementen.

ThreeDHighlight

Herausstellungsfarbe von dreidimensionalen Anzeigelementen.

ThreeDLightShadow

Farbe des Lichtes von dreidimensionalen Anzeigelementen (die dem Licht zugewandten Kanten).

ThreeDShadow

Dunkler Schatten von dreidimensionalen Anzeigelementen.

Window

Fensterhintergrund.

WindowFrame

Fensterrahmen.

WindowText

Text im Fenster.

Anwendungsbeispiel:

fill="Window" stroke="WindowFrame"

Beispiel Systemfarben

SVG
1.2 tiny	1.7	9.5	-	-	-	?	?	?

Mit dem Element solidColor bietet SVG tiny 1.2 eine Möglichkeit, Schlüsselwörter für Farben (einschließlich Opazität) festzulegen, um sie dann zu verwenden. Bei Bedarf können also auch die in der Vollversion von SVG 1.1 verfügbaren Farbnamen so definiert und verfügbar gemacht werden.

Die Farbe wird mit der Eigenschaft solid-color festgelegt, die Opazität mit der Eigenschaft solid-opacity. Mit dem Attribut id beziehungsweise xml:id wird das Element solidColor mit einem Fragmentidentifizierer versehen und kann so als Maldienst referenziert werden.

solid-color legt eine feste Farbe fest. Mögliche Werte sind:

inherit

geerbt

currentColor

aktuelle Farbe, mit color festgelegt

Farbangabe

Eine Farbangabe in numerischer Form oder mit einem Farbnamen

Der Wert wird nicht vererbt, ist aber animierbar. Der vorgegebene Wert ist black (schwarz).

solid-opacity legt eine feste Opazität fest. Mögliche Werte sind:

inherit

geerbt

Opazitätsangabe

eine Zahl zwischen 0 und 1 einschließlich, beziehungsweise ein Wert außerhalb dieses Intervalls wird vor der Darstellung auf den nächstgelegenen zulässigen Wert konvertiert. 0 ist komplett durchsichtig, 1 komplett undurchsichtig.

Der Wert wird nicht vererbt, ist aber animierbar. Der vorgegebene Wert ist 1 (undurchsichtig oder komplett opak).

Beispiel zur Anwendung:

<defs>
    <solidColor xml:id="UiUiUi" solid-color="#fc8" solid-opacity="0.8367">
    <animate attributeName="solid-color" dur="13s" repeatDur="indefinite"
             values="#fc8;#c40;#4c0;#fc8"/>
    </solidColor>
    <solidColor xml:id="OiOiOi" solid-color="#c8f" solid-opacity="0.7367"/>
    <solidColor xml:id="EiEiEi" solid-color="#cf8" solid-opacity="0.6367"/>
</defs>

<g color="#f08" fill="#80f">
<circle r="280" fill="url(#EiEiEi)" />
<circle r="260" fill="url(#OiOiOi)" />
<circle r="240" fill="url(#UiUiUi)" />
<circle r="220" fill="currentColor" />
<circle r="200" />
<circle r="180" fill="url(#EiEiEi)" />
<circle r="160" fill="url(#OiOiOi)" />
<circle r="140" fill="url(#UiUiUi)" />
<circle r="120" fill="currentColor" />
<circle r="100" />
<circle r="80" fill="url(#EiEiEi)" />
<circle r="60" fill="url(#OiOiOi)" />
<circle r="60" fill="url(#UiUiUi)" />
<circle r="40" fill="currentColor" />
<circle r="20" />
</g>

Beispiel feste Farben
Konzentrische Kreise werden verschieden eingefärbt, wofür geerbte Werte für fill verwendet werden, currentColor und feste Farben, die mit solidColor definiert sind. Eine feste Farbe wird animiert.

SVG
1.1	1.7	9.0	3.0	3.2	3	?	?	1

In der Vollversion von SVG 1.1 können statt der numerischen Angaben auch folgende Farbnamen verwendet werden (Groß- oder Kleinschreibung ist nicht signifikant, kann beliebig gemischt werden):