SVGのグラデーション単位：ロゴのパス全体で色の変化を共有する
複数のSVGロゴパスに1つのグラデーションを流します。gradientUnitsを比較し、共通の端点を設定して、移動したグループで生じる色のずれを直します。
目次
別々のSVGパス全体へ1つのグラデーションを広げるには、gradientUnits="userSpaceOnUse"を使い、画像の座標で端点を設定して、パスを同じ座標系に保ちます。各パスは、その位置に対応する色の変化の部分を表示します。ロゴの部品は別々に編集可能なままにできます。
既定のobjectBoundingBoxは、各描画要素にグラデーションを収めます。そのため、3本のパスから同じグラデーションIDを参照しても、紫からオレンジへの変化が3回繰り返される場合があります。単位を変えるとその繰り返しは直りますが、変換された子要素は自身の描画をずらすことがあります。MDNのgradientUnitsリファレンスは、参照空間を、グラデーションを使う要素の現在のユーザー空間と定義しています。
この手順では、SVGパスとして直接描いた独自の3部品のエンブレムを使います。ベクターのロゴがすでにあれば、そのマスターから作業します。ラスターしかない元データは、この描画編集の前に形状の復元が必要です。グラデーションのベクター化ガイドは、その選択を説明しています。
色の変化を各形に適用するか、マーク全体に適用するか決める
各部品に完全な色の変化を持たせる場合は、オブジェクトに対する描画を使います。左右の部品が1つの変化から異なる色を取る場合は、共通のユーザー空間の端点を使います。
| 設定 | 端点の基準 | 別々のパスでの結果 |
|---|---|---|
objectBoundingBox | 各描画要素の境界 | 各部品で色の変化が繰り返されます |
userSpaceOnUse | 参照する要素の現在のユーザー座標 | 同じ座標を共有する部品間で色の変化が続きます |
別途変換した子の中のuserSpaceOnUse | その子の変換済み座標系 | 描画が子とともに動く場合があります |
グループにfill="url(#brandBlend)"を置くと、塗りを子へ渡します。オブジェクト境界ボックスのグラデーションが、グループ全体の輪郭を測るようになるわけではありません。子は引き続き自身の描画を受けます。SVGのペイントサーバー仕様は、グラデーションを、要素の塗りやストロークから参照するリソースとして説明しています。
画像全体をまたぐ端点を設定する
例のパスは、水平方向にx=30からx=310を占めます。これをグラデーションの端点にします。三角形はx=125まで、中央のブロックは140から210、右の形は225から310です。
shared-logo.svgとして保存し、ブラウザーで開きます。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 170" width="720" height="340">
<defs>
<linearGradient id="brandBlend" gradientUnits="userSpaceOnUse" x1="30" y1="0" x2="310" y2="0">
<stop offset="0" stop-color="#5939d8" />
<stop offset="0.5" stop-color="#ee4380" />
<stop offset="1" stop-color="#ffae42" />
</linearGradient>
</defs>
<g fill="url(#brandBlend)">
<path d="M30 120 L90 30 L125 120 Z" />
<path d="M140 45 H210 V135 H140 Z" />
<path d="M225 30 H310 L280 135 H225 Z" />
</g>
</svg>Bのように、紫の三角形、主にピンクの中央ブロック、オレンジ系の右の形が見えるはずです。空の隙間は同じ色の変化の一部を隠します。次のパスが始まっても、色は最初に戻りません。1つのstopを変更すると、同じ定義を参照する3つの部品がすべて更新されます。
Aと直接比較するには、グラデーションのgradientUnits、x1、y1、x2、y2属性を、x1="0%" y1="0%" x2="100%" y2="0%"へ置き換えます。gradientUnitsを省略すると既定値に戻ります。今度は各形に色の変化全体が適用されます。
x2=1でロゴが単色に見える理由
ユーザー空間では、単位なしのx2="1"は座標1を意味し、ロゴの100%ではありません。パスが始まる前にグラデーションが終わると、既定のpad動作が最後の色をパス全体に広げます。画像の実際の境界から端点を選びます。
パーセントにも別の基準があります。userSpaceOnUseでは、描画オブジェクトの境界ボックスではなく、現在のSVGビューポートを参照します。この例は、明示的な数値のほうが確認しやすくなります。大きなviewBoxの一部だけにあるロゴでは、viewBox全体の幅を色の変化に使う必要はありません。
1つの部品の色が違う場合は変換を確認する
Cでは、右の形はその場に残っているように見えます。パス座標を60単位左へ移し、子グループで60単位右へ戻しています。
<g transform="translate(60 0)">
<path d="M165 30 H250 L220 135 H165 Z" />
</g>完全な例の3本目のパスをこのグループに置き換えると、不一致を再現できます。見える左端はx=225のままですが、ローカルの左端はx=165です。グラデーションはそのローカル空間を使うため、この部品は早い位置の、よりピンクに近い色を取ります。userSpaceOnUseは、入れ子の変換に関係なく1つのグローバル座標系を使う保証ではありません。
このエンブレムでは、3本目の元の座標を戻し、その部品だけの移動変換を削除します。ロゴ全体を動かす必要があれば、既存の外側グループにtransform="translate(10 0)"を適用します。これがDで、3つの形と共通の描画が一緒に動きます。
この修正が機能するのは、パスがすでに共通の座標系で表されているからです。関係のない変換済みの子を、さらに1つのグループに入れても、個々の変換は消えません。読み込んだロゴでは、形状を平坦化したり書き換えたりする前に変換を調べ、元マスターのコピーを保持します。
gradientTransformが役立つ場合
gradientTransformは、パス形状を変えずに描画の座標対応を変えます。色の変化を意図して回転、傾斜、再配置する場合に役立ちます。MDNは追加の変換として説明しています。gradientUnitsが選ぶ座標系を確立した後に適用します。
1つの子を補正するために共通の定義を調整するときは、他の子も必ず確認します。その定義を参照するすべての形に影響する場合があります。この単純なロゴでは共通の空間に画像を保つほうが管理しやすくなります。複雑な読み込み画像には、別々に対応付けたグラデーション定義が必要な場合があります。
PerfectVectorを使う場面
元データがPNGやJPGのロゴしかない場合は、連携したグラデーションを作り直す前に、PerfectVectorで編集可能なベクター形状を復元できます。ロゴをベクター化し、エディターで輪郭、穴、別々の部品を確認します。それらの形を共通の描画の出発点にします。
上のデモは座標の挙動を切り分けるために手書きしたもので、PerfectVectorの変換結果ではありません。陰影のあるピクセルのトレースが、元のグラデーションstopや座標設定を復元すると想定しないでください。単純なロゴは、手で描き直すほうが速い場合もあります。既存のSVG、AI、ベクターPDFがあれば保持します。
新しい塗りが反映されない形では、グラデーション座標を変える前にSVGの色変更の確認事項を使います。同じ書き出しがアプリによって異なる場合は、SVGの色ずれの診断に従います。
渡す前にファイルを開き直す
新しいSVGを保存し、エディターのキャンバスだけでなく、その正確なファイルをテストします。次を確認してください。
- グラデーションIDが存在し、意図した各パスが参照していること。
- 希望する方向に色の変化がロゴの境界を覆うこと。
- マーク全体を動かしても、色の連携が保たれること。
- 編集したい箇所で、別々の部品を選択できること。
- 受け取り側のアプリが期待する見た目を保持すること。
滑らかなブラウザー描画は、そのブラウザーでの描画動作を示します。すべてのエディターの対応を確認したり、グラデーションをカット形状にしたりするものではありません。単色の形が必要な手順にはフラットカラー版を用意し、編集可能なSVGマスターを保持します。SVGファイルのガイドは、ファイルの形状内容と表示上の見た目の違いを説明しています。
よくある質問
グラデーションを共有するにはパスを結合する必要がありますか？ いいえ。別々のパスが1つのグラデーションを参照できます。適切な端点でuserSpaceOnUseを使い、パスが意図した座標系を共有することを確認します。
グループ化してもグラデーションが繰り返されるのはなぜですか？ グループは塗りを子パスへ渡せますが、objectBoundingBoxのグラデーションは、引き続き描画される各子の境界を使います。マーク全体へ色の変化を広げるには、ユーザー空間の端点を設定します。
グループに移した後、1本のパスの色が変わったのはなぜですか？ グループの変換が、パスのローカル座標系を変える場合があります。共通のグラデーションを調整する前に、その変換を他のパスと比較し、書き出したSVGをテストします。
参考資料
- MDN — gradientUnits — 既定値、参照する座標系、パーセントの挙動を定義しています。
- SVG Working Group — ペイントサーバー — 再利用するグラデーション描画、stop、広がり方を規定しています。
- MDN — gradientTransform — グラデーション座標の追加変換を説明しています。
ラスターのロゴから始める場合は、ロゴを編集可能なSVGパスへ変換し、別々の形を確認してから共通のグラデーションを作り直し、最終出力を開き直して整列を確認してください。
