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)
  • Verlaufsgitter (mesh, meshrow, meshpatch)
• Muster (pattern)
• Schraffuren (hatch)

Eigenschaften zur Farbdarstellung

color

Beachten Sie: Die Eigenschaft color entspricht der gleichnamigen CSS-Eigenschaft, wird aber jedoch noch nicht unterstützt. Verwenden Sie stattdessen die SVG-eigenen Eigenschaften fill bzw. stroke.

color-interpolation

Mit der Eigenschaft color-interpolation steuern Sie das Verhalten bei der Farbberechnung.

Folgende Angaben sind möglich:

• sRGB: (Standardwert) Farbberechnung nach dem sRGB-Farbmodell
• auto: Grundeinstellungen des Browsers
• linearRGB: Farbberechnung nach dem linearen RGB-Farbmodell

color-rendering

Mit der Eigenschaft color-rendering steuern Sie die Darstellung von Farbe oder Farbverläufen.

• auto: (Standardwert) errechnet automatisch einen günstigen Mittelwert zwischen Qualität und Geschwindigkeit der Anzeige, wo bei die Qualität etwas höher gewichtet wird
• optimizeSpeed: schnelleres Rendering (Darstellung), geringere Qualität
• optimizeQuality: bessere Qualität, langsamere Darstellung.

Beispiel ansehen …

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

ansehen …

paint-order

Mit der Eigenschaft paint-order legen Sie die Zwischenreihenfolge der Darstellung von Füllungen, Umrandungen, Markern fest .

• 
• 
• 
• 
• 
• 

Details: caniuse.com

Folgende Werte sind möglich:

• normal: (Standardwert) Ein Element wird zuerst mit Farbe gefüllt, dann werden Randlinien und danach Markierungen gerendert
• fill: Es werden zuerst die Füllungen gerendert (entspricht normal)
• stroke: Es werden zuerst die Randlinien gerendert.
• markers: Es werden zuerst die Markierungen gerendert.

Beispiel ansehen …

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

ansehen …

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

Hinweis

Die Spezifikation zu diesem Element befindet sich im Augenblick noch in der Entwurfsphase. Es wird von Browsern noch nicht unterstützt!

Mit SVG 2 wird ein neues Element solidcolor eingeführt, 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, Farbangaben
• solid-opacity: Deckkraft von 0.0 (transparent) bis 1.0 (deckend)

Beispiel

<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!

In früheren Entwürfen ist noch die Schreibweise solidColor zu finden. Sie wurde zu solidcolor vereinfacht.