Zum Inhalt springen

SVG/ SVG-Farben

Aus Wikibooks
< SVG



Farbwerte in SVG

[Bearbeiten]

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

[Bearbeiten]

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

[Bearbeiten]

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

[Bearbeiten]

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

[Bearbeiten]

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.

[Bearbeiten]

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

[Bearbeiten]

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

[Bearbeiten]

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

[Bearbeiten]

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

[Bearbeiten]

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

[Bearbeiten]
Beispiel Systemfarben
SVG Squiggle (Batik) Opera (Presto) Firefox (Gecko; auch SeaMonkey, Iceape, Iceweasel etc) Konqueror (KSVG) Safari (Webkit) Chrome (Webkit) Microsoft Internet Explorer (Trident) librsvg
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

[Bearbeiten]
SVG Squiggle (Batik) Opera (Presto) Firefox (Gecko; auch SeaMonkey, Iceape, Iceweasel etc) Konqueror (KSVG) Safari (Webkit) Chrome (Webkit) Microsoft Internet Explorer (Trident) librsvg
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

[Bearbeiten]

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

[Bearbeiten]

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

[Bearbeiten]

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

[Bearbeiten]
SVG Squiggle (Batik) Opera (Presto) Firefox (Gecko; auch SeaMonkey, Iceape, Iceweasel etc) Konqueror (KSVG) Safari (Webkit) Chrome (Webkit) Microsoft Internet Explorer (Trident) librsvg
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