SVG/Farben
SVG verwendet die gleichen Farbangaben wie HTML und CSS. Erlaubt sind alle Angaben wie Farbnamen, Hexadezimale Schreibweisen, RGBA-Angaben und HSL-Angaben.
In folgenden Eigenschaften werden Farbangaben verwendet:
- Füllungen (fill)
- Kontur & Randlinien (stroke)
- Verläufe (linearGradient, radialGradient)
- Muster (pattern)
- Schraffuren (hatch)
Inhaltsverzeichnis
Eigenschaften zur Farbdarstellung[Bearbeiten]
color[Bearbeiten]
color-interpolation[Bearbeiten]
Mit der Eigenschaft color-interpolation steuern Sie das Verhalten bei der Farbberechnung.[1]
Folgende Angaben sind möglich:
sRGB
: (Standardwert) Farbberechnung nach dem sRGB-Farbmodellauto
: Grundeinstellungen des BrowserslinearRGB
: Farbberechnung nach dem linearen RGB-Farbmodell
color-rendering[Bearbeiten]
Mit der Eigenschaft color-rendering steuern Sie die Darstellung von Farbe oder Farbverläufen.[2]
auto
: (Standardwert) errechnet automatisch einen günstigen Mittelwert zwischen Qualität und Geschwindigkeit der Anzeige, wo bei die Qualität etwas höher gewichtet wirdoptimizeSpeed
: schnelleres Rendering (Darstellung), geringere QualitätoptimizeQuality
: bessere Qualität, langsamere Darstellung.
<svg>
<defs>
<style type="text/css">
<![CDATA[
text {font-family:Verdana,sans-serif; font-size:14px; }
rect {fill:url(#g01);}
]]>
</style>
<linearGradient id="g01"
x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#c32e04 " />
<stop offset="33%" stop-color="#dfac20" />
<stop offset="66%" stop-color="#5a9900" />
<stop offset="100%" stop-color="#3983ab" />
</linearGradient>
</defs>
<!-- 3 verschiedene Interpolationsarten -->
<rect x="170" y="10" width="150" height="200" />
<rect x="350" y="10" width="150" height="200"
color-interpolation="auto" />
<rect x="530" y="10" width="150" height="200"
color-interpolation="linearRGB" />
<!--3 verschiedene Rendering-Einstellungen -->
<rect x="170" y="250" width="150" height="200" />
<rect x="350" y="250" width="150" height="200"
color-rendering="optimizeSpeed" />
<rect x="530" y="250" width="150" height="200"
color-rendering="optimizeQuality" />
</svg>
paint-order[Bearbeiten]
Mit der Eigenschaft paint-order legen Sie die Zwischenreihenfolge der Darstellung von Füllungen, Umrandungen, Markern fest .[3]
Details: caniuse.com
Folgende Werte sind möglich:
normal
: (Standardwert) Ein Element wird zuerst mit Farbe gefüllt, dann werden Randlinien und danach Markierungen gerendertfill
: Es werden zuerst die Füllungen gerendert (entspricht normal)stroke
: Es werden zuerst die Randlinien gerendert.markers
: Es werden zuerst die Markierungen gerendert.
<g fill="#dfac20" stroke="#306f91" stroke-width="6" stroke-linejoin="round"
text-anchor="middle" font-family="sans-serif" font-size="100px" font-weight="bold">
<text x="200" y="75">stroke over</text>
<text x="200" y="175" paint-order="stroke">stroke under</text>
</g>
In der oberen Textzeile wird der Text zuerst gefüllt und dann mit einer Randlinie versehen, die ja bei einer Breite von 6 dimensionslosen Einheiten je 3 nach außen und innen geht.
In der unteren Textzeile wird durch paint-order="stroke"
zuerst die Randlinie gerendert, die dann durch die Füllung verdeckt wird, sodass nur die außenliegenden 3 dargestellt werden.
Der rechte Text erhält zuerst seine Kontur und dann erst die Füllung, sodass die Proportionen der Zeichen erhalten bleiben.
solidcolor[Bearbeiten]
Hinweis
Mit SVG 2 wird ein neues Element solidcolor eingeführt[4], das es ermöglicht im Definitionsabschnitt eigene Farbdeklarationen vorzunehmen, die dann über ihre ID aufgerufen werden können.
Folgende Eigenschaften sind möglich:
solid-color
: Farbangabe currentColor, Farbnamen, Farbangabensolid-opacity
: Deckkraft von 0.0 (transparent) bis 1.0 (deckend)
<svg>
<svg>
<defs>
<solidcolor id="rot" solid-color="#c32e04" />
<solidcolor id="hellrot" solid-color="#c32e04" solid-opacity="0.5" />
<solidcolor id="gelb" solid-color="#dfac20" />
<solidcolor id="hellgelb" solid-color="#dfac20" solid-opacity="0.8" />
</defs>
<rect x="10" y="120" width="100" height="100" fill="url(#gelb)" stroke="url(#rot)" />
<rect x="120" y="120" width="100" height="100" fill="url(#hellgelb)" />
</svg>
Achtung!
solidColor
zu finden. Sie wurde zu solidcolor vereinfacht.
Weblinks[Bearbeiten]
- ↑ MDN: color-interpolation
- ↑ W3C: RenderingProperties
- ↑ W3C: PaintOrder
- ↑ W3C: SolidcolorElement