SVG/ SVG-Farben

SVG:

Einführung   Vorwort   Vektorgraphik   Programme   Kurze Einführung in XML | Start mit SVG | Dokumentstruktur | Barrierefreiheit | Transformationen | Grundformen | Pfade | Text als Graphik | Graphiken formatieren | Farben | Farbverlauf und Muster | Markierungen | Ausschnitt, Maskierung und Komposition | Animation | Verweise | Interaktivität | Multimedia | Erweiterbarkeit | SVG-Zeichensätze | Filter-Effekte | Skripte | SVG in (X)HTML einbetten | Referenz | Weiterführende Literatur |

Farbwerte in SVG

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.

Hexadezimaler Farbwert

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.

Dezimaler Farbwert

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

Prozentualer Farbwert

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.

Farbprofil

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.

Attribut href von XLink

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.

Attribut local

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.

Attribut name

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.

Attribut rendering-intent

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.

Eigenschaft color-profile

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.

Systemfarben oder Systemmaldienste

Beispiel Systemfarben

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

Maldienst feste Farbe, solidColor

SVG
1.2 tiny	1.7	9.5	-	-	-	?	?	?

Beispiel feste Farben

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.

Eigenschaft feste Farbe, solid-color

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

Eigenschaft feste Opazität, solid-opacity

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 feste Farbe

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.

Farbnamen in der Vollversion von SVG 1.1

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):

Farbname	Beispiel	Komponenten (Rot,Grün, Blau)
		Hexadezimal				Dezimal
AliceBlue		F0	F8	FF		240	248	255
AntiqueWhite		FA	EB	D7		250	235	215
Aqua		00	FF	FF		0	255	255
Aquamarine		7F	FF	D4		127	255	212
Azure		F0	FF	FF		240	255	255
Beige		F5	F5	DC		245	245	220
Bisque		FF	E4	C4		255	228	196
Black		00	00	00		0	0	0
BlanchedAlmond		FF	EB	CD		255	235	205
Blue		00	00	FF		0	0	255
BlueViolet		8A	2B	E2		138	43	226
Brown		A5	2A	2A		165	42	42
BurlyWood		DE	B8	87		222	184	135
CadetBlue		5F	9E	A0		95	158	160
Chartreuse		7F	FF	00		127	255	0
Chocolate		D2	69	1E		210	105	30
Coral		FF	7F	50		255	127	80
Cornflower		64	95	ED		100	149	237
Cornsilk		FF	F8	DC		255	248	220
Crimson		DC	14	3C		220	20	60
Cyan		00	FF	FF		0	255	255
DarkBlue		00	00	8B		0	0	139
Dark Cyan		00	8B	8B		0	139	139
DarkGoldenrod		B8	86	0B		184	134	11
DarkGray		A9	A9	A9		169	169	169
DarkGreen		00	64	00		0	100	0
DarkKhaki		BD	B7	6B		189	183	107
DarkMagenta		8B	00	8B		139	0	139
DarkOliveGreen		55	6B	2F		85	107	47
DarkOrange		FF	8C	00		255	140	0
DarkOrchid		99	32	CC		153	50	204
DarkRed		8B	00	00		139	0	0
DarkSalmon		E9	96	7A		233	150	122
DarkSeaGreen		8F	BC	8F		143	188	143
DarkSlateBlue		48	3D	8B		72	61	139
DarkSlateGray		2F	4F	4F		47	79	79
DarkTurquoise		00	CE	D1		0	206	209
DarkViolet		94	00	D3		148	0	211
DeepPink		FF	14	93		255	20	147
DeepSkyBlue		00	BF	FF		0	191	255
DimGray		69	69	69		105	105	105
DodgerBlue		1E	90	FF		30	144	255
Firebrick		B2	22	22		178	34	34
FloralWhite		FF	FA	F0		255	250	240
ForestGreen		22	8B	22		34	139	34
Fuchsia		FF	00	FF		255	0	255
Gainsboro		DC	DC	DC		220	220	220
GhostWhite		F8	F8	FF		248	248	255
Gold		FF	D7	00		255	215	0
Goldenrod		DA	A5	20		218	165	32
Gray, Grey		80	80	80		128	128	128
Green		0	80	0		0	128	0
GreenYellow		AD	FF	2F		173	255	47
Honeydew		F0	FF	F0		240	255	240
HotPink		FF	69	B4		255	105	180
IndianRed		CD	5C	5C		205	92	92
Indigo		4B	00	82		75	0	130
Ivory		FF	FF	F0		255	255	240
Khaki		F0	E6	8C		240	230	140
Lavender		E6	E6	FA		230	230	250
LavenderBlush		FF	F0	F5		255	240	245
LawnGreen		7C	FC	00		124	252	0
LemonChiffon		FF	FA	CD		255	250	205
LightBlue		AD	D8	E6	173	216	230
LightCoral		F0	80	80	240	128	128
LightCyan		E0	FF	FF	224	255	255
LightGoldenrod		FA	FA	D2	250	250	210
LightGreen		90	EE	90	144	238	144
LightGrey		D3	D3	D3	211	211	211
LightPink		FF	B6	C1	255	182	193
LightSalmon		FF	A0	7A	255	160	122
LightSeaGreen		20	B2	AA	32	178	170
LightSkyBlue		87	CE	FA	135	206	250
LightSlateGray		77	88	99	119	136	153
LightSteelBlue		B0	C4	DE	176	196	222
LightYellow		FF	FF	E0	255	255	224
Lime		00	FF	00	0	255	0
LimeGreen		32	CD	32	50	205	50
Linen		FA	F0	E6	250	240	230
Magenta		FF	00	FF	255	0	255
Maroon		80	00	00	128	0	0
MediumAquamarine		66	CD	AA	102	205	170
MediumBlue		00	00	CD	0	0	205
MediumOrchid		BA	55	D3	186	85	211
MediumPurple		93	70	DB	147	112	219
MediumSeaGreen		3C	B3	71	60	179	113
MediumSlateBlue		7B	68	EE	123	104	238
MediumSpringGreen		00	FA	9A	0	250	154
MediumTurquoise		48	D1	CC	72	209	204
MediumVioletRed		C7	15	85	199	21	133
MidnightBlue		19	19	70	25	25	112
MintCream		F5	FF	FA	245	255	250
MistyRose		FF	E4	E1	255	228	225
Moccasin		FF	E4	B5	255	228	181
NavajoWhite		FF	DE	AD	255	222	173
Navy		00	00	80	0	0	128
OldLace		FD	F5	E6	253	245	230
Olive		80	80	00	128	128	0
OliveDrab		6B	8E	23	107	142	35
Orange		FF	A5	00	255	165	0
OrangeRed		FF	45	00	255	69	0
Orchid		DA	70	D6	218	112	214
PaleGoldenrod		EE	E8	AA	238	232	170
PaleGreen		98	FB	98	152	251	152
PaleTurquoise		AF	EE	EE	175	238	238
PaleVioletRed		DB	70	93	219	112	147
PapayaWhip		FF	EF	D5	255	239	213
PeachPuff		FF	DA	B9	255	218	185
Peru		CD	85	3F	205	133	63
Pink		FF	C0	CB	255	192	203
Plum		DD	A0	DD	221	160	221
PowderBlue		B0	E0	E6	176	224	230
Purple		80	00	80	128	0	128
Red		FF	00	00	255	0	0
RosyBrown		BC	8F	8F	188	143	143
RoyalBlue		41	69	E1	65	105	225
SaddleBrown		8B	45	13	139	69	19
Salmon		FA	80	72	250	128	114
SandyBrown		F4	A4	60	244	164	96
SeaGreen		2E	8B	57	46	139	87
Seashell		FF	F5	EE	255	245	238
Sienna		A0	52	2D	160	82	45
Silver		C0	C0	C0	192	192	192
SkyBlue		87	CE	EB	135	206	235
SlateBlue		6A	5A	CD	106	90	205
SlateGray		70	80	90	112	128	144
Snow		FF	FA	FA	255	250	250
SpringGreen		00	FF	7F	0	255	127
SteelBlue		46	82	B4	70	130	180
Tan		D2	B4	8C	210	180	140
Teal		00	80	80	0	128	128
Thistle		D8	BF	D8	216	191	216
Tomato		FF	63	47	255	99	71
Turquoise		40	E0	D0	64	224	208
Violet		EE	82	EE	238	130	238
Wheat		F5	DE	B3	245	222	179
White		FF	FF	FF	255	255	255
WhiteSmoke		F5	F5	F5	245	245	245
Yellow		FF	FF	00	255	255	0
YellowGreen		9A	CD	32	154	205	50

SVG:

Einführung   Vorwort   Vektorgraphik   Programme   Kurze Einführung in XML | Start mit SVG | Dokumentstruktur | Barrierefreiheit | Transformationen | Grundformen | Pfade | Text als Graphik | Graphiken formatieren | Farben | Farbverlauf und Muster | Markierungen | Ausschnitt, Maskierung und Komposition | Animation | Verweise | Interaktivität | Multimedia | Erweiterbarkeit | SVG-Zeichensätze | Filter-Effekte | Skripte | SVG in (X)HTML einbetten | Referenz | Weiterführende Literatur |