SVGのパスに沿うグラデーション：曲がり部分の色を確認する
曲がったリボンでSVGの座標グラデーションと意図的な色帯を比較。元データと二つのサイズを確認し、形状を増やす利点と負担を判断します。
通常のSVGのlinearGradientは、曲がったパスに沿った進み具合を測りません。座標系内のグラデーションベクトルに従って塗ります。リボンが折り返す場合、そのベクトル上で同じ位置にある二つの点は、リボンに沿っては遠く離れていても、同じ色になる場合があります。
曲がりに沿って色を進めたい静的なデザインでは、別々の色付き区間を作れます。順序を制御できますが、形状と目に見える色の境界が増えます。この独自の例では、同じ自作の経路上で、水平グラデーションと、意図的に作った八つの帯を比較します。両ファイルともパスを含み、埋め込み画像はありません。
色が繰り返す場所を確認する
SVG2のペイントサーバー仕様は、線形グラデーションをベクトルとカラーストップで定義しています。放射状グラデーションは、固有の円形の幾何学で説明します。どちらも、任意のパスを経路距離に基づく色軸へ変える定義ではありません。
このリボンは左上から右へ進み、半円を回り込んで左下へ戻ります。水平グラデーションでは、左側の両端がオレンジ、右側の曲がりが紫になります。これは正しい座標グラデーションですが、「この経路の始点から終点へ色を変える」というデザインの問いとは、答えている問いが異なります。
MDNのグラデーションチュートリアルは、端点とストップのモデルを説明しています。ストップを増やすと、座標に基づく色の並びは変わりますが、塗りが曲線に追従するようにはなりません。
通常のグラデーションを対照例として残す
この完全なファイルをcoordinate.svgとして保存します。パスは200×160のviewBox内で24単位のストロークを使います。直線部分と右側の半円は、一つの編集可能な中心線を作ります。
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="160" viewBox="0 0 200 160">
<defs><linearGradient id="across" gradientUnits="userSpaceOnUse" x1="30" y1="0" x2="170" y2="0" color-interpolation="sRGB"><stop offset="0" stop-color="#e36b2c"/><stop offset="1" stop-color="#704baa"/></linearGradient></defs>
<path d="M30 30 H120 A50 50 0 0 1 120 130 H30" fill="none" stroke="url(#across)" stroke-width="24" stroke-linecap="butt"/>
</svg>gradientUnits="userSpaceOnUse"を使い、元の座標系でグラデーションの端点を明示しています。バウンディングボックス座標に変えても、変わるのは端点の表し方で、パス距離に沿う塗りにはなりません。gradientUnitsリファレンスとグラデーション座標ガイドを参照してください。
経路全体は一つのpath要素です。より複雑な色効果を納品する場合も、この単純な版を形状のマスターとして保管してください。
曲がりに沿う段階的な色順序を作る
以下をbands.svgとして保存します。上の直線部分を二つ、半円を四つの円弧、戻りの直線部分を二つに分けます。色は上の始点のオレンジから、下の終点の紫へ、経路順に割り当てます。
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="160" viewBox="0 0 200 160">
<g fill="none" stroke-width="24" stroke-linecap="butt">
<path d="M30 30 H75" stroke="#e36b2c"/>
<path d="M75 30 H120" stroke="#d38d31"/>
<path d="M120 30 A50 50 0 0 1 155.355339 44.644661" stroke="#b4a747"/>
<path d="M155.355339 44.644661 A50 50 0 0 1 170 80" stroke="#6fab79"/>
<path d="M170 80 A50 50 0 0 1 155.355339 115.355339" stroke="#3d9dac"/>
<path d="M155.355339 115.355339 A50 50 0 0 1 120 130" stroke="#4486b9"/>
<path d="M120 130 H75" stroke="#5265b2"/>
<path d="M75 130 H30" stroke="#704baa"/>
</g>
</svg>これは、区間長が均等ではない、手動で選んだ八つの帯です。パスの単位長さごとに均一な色変化を計算したものでも、連続した陰影を作るものでもありません。丸めた小数の円弧端点は元の経路を近似しています。この例は、輪郭がピクセル単位で同一だとは主張しません。
pathリファレンスは、要素とパスデータを説明しています。ここで各区間は、輪郭を閉じた塗りに変えたものではなく、ストローク付きの中心線のままです。利用先が閉じた図形を必要とする場合は、このストローク片をカット用の輪郭と扱わず、形状を別に準備して確認してください。
隣り合う部品が端点より先に伸びないよう、stroke-linecap="butt"を使います。内部の各区間を丸い端にすると、隣の色と重なります。直線から円弧への移行も方向をそろえる必要があります。滑らかな接続のガイドは、形状の連続性を別に扱っています。
二つのサイズと二つの位置で比較する
両方の元ファイルを、Chromeで200×160と400×320 CSSピクセルに描画しました。ブラウザーは各SVGをデコードし、テスト寸法と一致する内部バッファー寸法のキャンバスに描きました。ブラウザーのデバイスピクセル比率は2でした。記録したサンプルは、スクリーンショットのデバイスピクセルを数えたものではなく、キャンバスバッファーから得たものです。
元座標(60,30)と(60,130)の点は、経路の異なる直線部分にあります。水平座標が同じなので、水平グラデーションは同じサンプル色を与えます。
| ファイル | x=60の上側サンプル | x=60の下側サンプル | パス | 埋め込み画像 |
|---|---|---|---|---|
| 座標グラデーション | RGB 202,100,71 | RGB 202,100,71 | 1 | 0 |
| 自作の色帯 | RGB 227,107,44 | RGB 112,75,170 | 8 | 0 |
| 平面の形状マスター | RGB 184,94,57 | RGB 184,94,57 | 1 | 0 |
サンプルのペアはテストした両サイズで同じで、塗った内側のアルファは255でした。元座標(100,80)の空いている領域は、六つすべてのケースでアルファがゼロでした。これはこのブラウザーで自作ファイルを確認したもので、すべてのレンダラーや境界ピクセルを保証しません。
帯で描いた結果は、両サイズとも離散的な色変化を見えるまま保ちます。特に書き出しや埋め込みの後は、納品サイズでつなぎ目を調べてください。別々の部品では、アンチエイリアス、丸め、後の編集によって隙間が見える場合があります。区間数を増やすと各色の段差を小さくできますが、管理するパスと境界も増えます。
アートワークを拡張する前に効果を選ぶ
| デザインの要件 | 役立つ出発点 | 確認が必要な負担 |
|---|---|---|
| ページの方向に色を進める | 一つの座標グラデーション | 端点の位置と元データの範囲 |
| この経路に沿う静的な色の進行 | 意図的に色を付けた区間 | 区間の色、接線方向のつなぎ目、隙間 |
| 任意の曲線に沿う滑らかな進行 | 別途設計した近似か、別の提供方法 | サンプリング、交差、編集可能な形状、利用先での描画 |
線形グラデーションを回転すると方向が変わります。繰り返すと、色の延長方法が変わります。どちらも、折り返すこの中心線に沿って連続的に向きを変える操作ではありません。放射状グラデーションは円形の構成に合う場合がありますが、独自の塗りの形状であり、一般的な経路距離の解決策ではありません。
後から曲線を調整する場合は、区間をまとめて修正します。意図した経路と比較するために平面のマスターを保管し、色効果を付けたコピーは別に残してください。相対パスのガイドは、元になるパスコマンドを読む、または移動するときに役立ちます。
元のアートワークがPNGやJPGで、編集可能な輪郭が必要なら、PerfectVectorで元画像を変換し、復元された形と開いた領域を確認して、きれいなSVGマスターを保管します。その形状を確認してから、色の効果を選ぶか作り直してください。ベクター化は連続的な陰影の正確な復元を保証せず、パスに沿うグラデーションのネイティブ機能を作るわけでもありません。きれいなSVGがすでにある場合は、塗りと形状を直接編集します。画像ベクター化ガイドで、ラスター変換が役立つ場面を説明しています。
よくある質問
linearGradientをあらゆる曲線ストロークに沿わせられますか？ 通常のlinearGradientの定義には、パス距離の設定はありません。座標ベクトルが塗りを制御します。段階的な例では、別々の経路区間に別々の色を割り当てています。
グラデーションのストップを増やせば、戻り部分の色の繰り返しは直りますか？ ストップを増やすと、グラデーションベクトルに沿う色の変化を細かくできます。それでも、そのベクトル上で同じ位置の点は、同じ座標ベースの塗りを共有します。
色帯のファイルにはラスター画像が含まれていますか？ 含まれていません。この自作例は八つのpath要素を含み、image要素はありません。また、パス距離に沿う連続的なグラデーションではなく、目に見える色の段階を持ちます。
すべてのグラデーションを別々のパスに置き換えるべきですか？ デザインに合うなら、より単純な座標グラデーションを使ってください。別々の区間は、その色の進行と編集の負担を許容できる場合に役立ちます。納品前につなぎ目と利用先での描画を確認してください。
出典
- W3C — SVG2のペイントサーバー — グラデーションベクトル、ストップ、座標に基づく塗り。
- MDN — SVGのグラデーション — 線形と放射状のグラデーションの構成。
- MDN — gradientUnits — ユーザー空間とバウンディングボックスの座標系。
- MDN — path — 確認可能なパス要素とパスデータ。
- MDN — stroke-linecap — 平らなストローク端と丸いストローク端の動作。
