SVG/Farben

Aus SELFHTML-Wiki
< SVG
Wechseln zu: Navigation, Suche

SVG verwendet die gleichen Farben wie HTML und CSS. Erlaubt sind alle Angaben wie Farbnamen, Hexadezimale Schreibweisen, RGBA-Angaben und HSL-Angaben.


Eigenschaften zur Farbdarstellung[Bearbeiten]

color[Bearbeiten]

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[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-Farbmodell
  • auto: Grundeinstellungen des Browsers
  • linearRGB: 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 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>

paint-order[Bearbeiten]

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

  • SVG 2
  • Chrome
  • Firefox
  • Edge
  • Opera
  • Safari

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>

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, so dass nur die außenliegenden 3 dargestellt werden.

"Beispiel für paint-order, Quelle: W3C

Der rechte Text erhält zuerst seine Kontur und dann erst die Füllung, sodass die Proportionen der Zeichen erhalten bleiben.

solidcolor[Bearbeiten]

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[4], das es ermöglicht im Definitionsabschnitt eigene Farbdeklarationen vorzunehmen, die dann über ihre ID aufgerufen werden können.

  • SVG 2
  • Leer
  • Leer
  • Leer
  • Leer
  • Leer
  • Leer

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.


Weblinks[Bearbeiten]

  1. MDN: color-interpolation
  2. W3C: RenderingProperties
  3. W3C: PaintOrder
  4. W3C: SolidcolorElement