color-interpolation

color-interpolation 属性は、グラデーションの補間、色のアニメーション、アルファ合成に用いる色空間を指定します。

メモ: フィルター効果については、color-interpolation-filters プロパティで用いる色空間を制御します。

color-interpolation プロパティは、色の操作を sRGB 色空間で行うか (光のエネルギーがリニアな) linearized RGB 色空間で行うかを選択します。適切な色空間を選択したら、コンポーネント単位での補間を行います。

子要素が背景とブレンドされるときは、ブレンドの種類は親要素の color-interpolation の値ではなく、子要素の color-interpolation プロパティの値によって決まります。href (en-US) または廃止された xlink:href (en-US) 属性で他のグラデーションを参照しているグラデーションでは、fill または stroke プロパティで直接参照されているグラデーション要素のプロパティの値を用います。色をアニメーションするときは、アニメーションが行われる要素の color-interpolation プロパティの値に従って色の補間を行います。

メモ: プレゼンテーション属性なので、color-interpolation は CSS のプロパティとして使用できます。

この属性は、以下の SVG 要素で使用できます。

使用上のメモ

値 auto | sRGB | linearRGB
デフォルト値 sRGB
アニメーション 可 (離散)
auto

ユーザーエージェントが色の補間用に sRGB または linearRGB 空間を選択してよいことを表します。この値は、作成者が色の補間を特定の色空間で行うことを要求していないことを表します。

sRGB

色の補間を sRGB 色空間で行うべきであることを表します。

linearRGB

色の補間を sRGB の仕様書に記述されている通りの linearized RGB 色空間で行うべきであることを表します。

例

この例では、4 個の SVG を見せます。それぞれの SVG には、<rect> 要素と、<rect> を塗りつぶすのに用いる異なるグラデーションがあります。最初の 2 個の SVG では <linearGradient> を用い、次の 2 個では <radialGradient> 要素を用います。未対応のブラウザーでは、グラデーションは同じに見えます。

最初の SVG では、<linearGradient> 要素に color-interpolation 属性は設定されておらず、デフォルト値の sRGB が用いられます。

html
<svg width="450" height="70">
  <title>color-interpolation 属性の無い linearGradient の例</title>
  <defs>
    <linearGradient id="gradientDefault">
      <stop offset="0%" stop-color="white" />
      <stop offset="25%" stop-color="blue" />
      <stop offset="50%" stop-color="white" />
      <stop offset="75%" stop-color="red" />
      <stop offset="100%" stop-color="white" />
    </linearGradient>
  </defs>
  <rect
    x="0"
    y="0"
    width="400"
    height="40"
    fill="url(#gradientDefault)"
    stroke="black" />
  <text x="0" y="60" font-family="courier" font-size="16">
    color-interpolation 設定なし
  </text>
</svg>

この 2 番目の SVG では、<linearGradient> 要素に color-interpolation 属性が設定され、値は linearRGB になっています。

html
<svg width="450" height="70">
  <title>color-interpolation 属性を用いた linearGradient の例</title>
  <defs>
    <linearGradient id="gradientLinearRGB" color-interpolation="linearRGB">
      <stop offset="0%" stop-color="white" />
      <stop offset="25%" stop-color="blue" />
      <stop offset="50%" stop-color="white" />
      <stop offset="75%" stop-color="red" />
      <stop offset="100%" stop-color="white" />
    </linearGradient>
  </defs>
  <rect
    x="0"
    y="0"
    width="400"
    height="40"
    fill="url(#gradientLinearRGB)"
    stroke="black" />
  <text x="0" y="60" font-family="courier" font-size="16">
    color-interpolation="linearRGB"
  </text>
</svg>

この 3 番目の SVG では、<radialGradient> 要素に color-interpolation 属性は設定されておらず、デフォルト値の sRGB が用いられます。

html
<svg width="450" height="70">
  <title>color-interpolation 属性なしの radialGradient の例</title>
  <defs>
    <radialGradient id="none">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="gold" />
    </radialGradient>
  </defs>
  <rect x="0" y="0" width="400" height="40" fill="url(#none)" stroke="black" />
  <text x="0" y="60" font-family="courier" font-size="16">
    color-interpolation 設定なし
  </text>
</svg>

この 4 番目の SVG では、<radialGradient> 要素に color-interpolation 属性が設定され、値は linearRGB になっています。

html
<svg width="450" height="70">
  <title>color-interpolation 属性を用いた radialGradient の例</title>
  <defs>
    <radialGradient id="radLinearRGB" color-interpolation="linearRGB">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="gold" />
    </radialGradient>
  </defs>
  <rect
    x="0"
    y="0"
    width="400"
    height="40"
    fill="url(#radLinearRGB)"
    stroke="black" />
  <text x="0" y="60" font-family="courier" font-size="16">
    color-interpolation="linearRGB" (SVG 属性)
  </text>
</svg>

仕様書

Specification
Scalable Vector Graphics (SVG) 2
# ColorInterpolation

ブラウザーの互換性

BCD tables only load in the browser

関連情報