SVGライティング：開口部を保ちながらエンブレムに陰影を付ける

SVGロゴをエンボスのように見せるには、SourceAlphaをぼかし、そのアルファをfeDiffuseLightingまたはfeSpecularLightingに渡して、光を元の色と合成し、最後に元のSourceAlphaに対するin合成を行います。この最後の処理で、効果をエンブレム内に収め、開口部を保ちます。フィルターなしのパスのコピーを、平面のマスターとして保存してください。

効果が変えるのは描画上の見た目です。盛り上がった立体、新しい輪郭、製造用ファイルを作るものではありません。この手順では、SVGとして直接作成した独自のひし形リングのエンブレムを使い、ライティングの各段階とアルファを比較します。

アルファを光が当たる表面として使う

feDiffuseLightingは入力アルファをバンプマップとして使い、不透明なライトマップを生成します。その見た目は光と入力の表面によって変わります。MDNの拡散ライティングリファレンスで、この動作を説明しています。この例では、リングの不透明な部分が高い領域、開口部が低い領域になります。

ぼかすのはSourceAlphaだけで、元の色付きパスはSourceGraphicとして残します。ぼかしたアルファによって、内側と外側の縁で高さがなだらかに変わり、ライティング計算に使われます。feGaussianBlurはstdDeviationでこのぼかしを制御します。ひな形では、ユーザー空間を明示したフィルターで2.5を使います。

未合成の拡散マップは、元のパスが透明だった場所も含めて、フィルター領域全体を塗ります。光の計算を調べるには便利ですが、中空エンブレムの最終シルエットとしては不適切です。最後に範囲を制限するため、元のアルファを使えるようにしておいてください。

陰影付きエンブレムの完全なひな形をコピーする

これをemblem-lighting.svgとして保存し、ブラウザーで開きます。一つの複合パスを持ち、外部画像への依存はありません。

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
  <defs>
    <filter id="relief" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse" x="0" y="0" width="200" height="200" color-interpolation-filters="linearRGB">
      <feGaussianBlur in="SourceAlpha" stdDeviation="2.5" result="bump"/>
      <feDiffuseLighting in="bump" surfaceScale="4" diffuseConstant="1" lighting-color="#ffffff" result="diffuse">
      <feDistantLight azimuth="225" elevation="45"/>
      </feDiffuseLighting>
      <feComposite in="SourceGraphic" in2="diffuse" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" result="lit"/>
      <feSpecularLighting in="bump" surfaceScale="4" specularConstant=".7" specularExponent="18" lighting-color="#ffffff" result="shine">
      <feDistantLight azimuth="225" elevation="45"/>
      </feSpecularLighting>
      <feComposite in="lit" in2="shine" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="paint"/>
      <feComposite in="paint" in2="SourceAlpha" operator="in"/>
    </filter>
  </defs>
  <path d="M100 20 L180 100 L100 180 L20 100 Z M100 58 L142 100 L100 142 L58 100 Z" fill="#dc795f" fill-rule="evenodd" filter="url(#relief)"/>
</svg>

フィルターは各中間結果に名前を付けているので、それぞれの役割を確認できます。

算術乗算はk1="1"を使い、ほかの係数はゼロです。加算はk2="1" k3="1"を使い、ほかはゼロです。feCompositeは、これらのピクセル操作とin演算子を定義しています。元の境界を使いたい場合は、最後の合成の二つ目の入力を、ぼかしたbumpではなくSourceAlphaに保ってください。

フィルターはcolor-interpolation-filters="linearRGB"を明示的に使用しています。これはSVGのフィルター操作の既定値で、通常の色の補間とは別です。MDNのcolor-interpolation-filtersリファレンスで、その違いを説明しています。ここで計測したライティングのバリエーションは、すべて同じ設定を使います。

拡散光の陰影と反射光の輝きを比較する

拡散ライティングは、ライトマップに従って元の色を暗く、または明るくします。反射光の段階では反射成分を加えます。feSpecularLightingは、光に依存する出力とパラメーターを説明しています。ひな形は控えめな定数.7と指数18を使います。使える拡散光の効果を整えてから調整してください。

拡散光だけを調べるには、ぼかし、拡散光、乗算の段階を残し、最後の合成の最初の入力をpaintからlitに変えます。反射光と加算の段階は削除します。

平面の色の上で反射光だけを調べるには、ぼかしと反射光の段階を残します。加算の最初の入力をlitからSourceGraphicに変え、拡散光と乗算の段階を削除し、最後のpaint in SourceAlpha合成は残してください。どちらの比較も、元のパスと光の方向は同じです。

この例の遠方光はazimuth="225" elevation="45"を使います。feDistantLightは、どちらのライティングプリミティブにも使える光源要素です。この角度は度数で、ピクセル位置ではありません。組み合わせた効果を比較するときは、両方の段階の光の方向を一緒に変更してください。

元のブラウザー対照例でわかったこと

独自に作成した六つのSVGサンプルを、Chromeで80 × 80と160 × 160 CSSピクセルで開きました。平面のマスター、拡散光、反射光、組み合わせた効果は、見た目で区別できるままでした。このテストファイルでは、拡散光のsurfaceScaleを高くすると縁のコントラストが強くなりました。未合成の拡散光の対照例は、透明なシルエットではなく、開口部が埋まったグレーの長方形を示しました。

別に行ったピクセル読み取りでは、元のCanvasサイズ200 × 200を使いました。帯のサンプルは(100, 38)、縁は(101, 22)、開口部は(100, 100)、外側は(10, 10)です。

どのファイルも、同じd値、一つのパス、画像要素ゼロを維持しました。画面上の効果は、元の形状を追加しませんでした。これはこのブラウザーと元データでの観察であり、別のレンダラーやエディターの読み込み動作を保証するものではありません。

ライティングと平面のマスター

輪郭を変える前に高さ場を調整する

surfaceScaleは、ライティング計算で使う表面の高さのスケールを設定します。パスを広げるものではありません。拡散光の4と12の対照例では、この値だけを変更しました。平らな帯のサンプルは同じ色のままで、縁のサンプルは12で暗くなりました。

条件を固定して、次の順に進めます。

1. フィルターなしで、元の透明なシルエットと開口部を確認します。
2. アルファのぼかしと光の方向を選びます。
3. ほかをすべて固定して、小さいsurfaceScaleと大きい値を比較します。
4. 反射光を加え、最後の操作として元のアルファで色の範囲を制限します。
5. 実際の表示サイズと、対照的な背景の上で納品するアートワークを確認します。

現在のFilter Effects仕様は、拡散光の出力アルファをすべての場所で1とし、反射光の出力アルファはその色成分から定めています。どちらの出力も、元の開口部を保つと考えてはいけません。また、隣接するアルファのサンプルから法線を計算する方法も定義しています。このひな形ではkernelUnitLengthを設定していません。二つのサイズでの確認は、ライティングのサンプルがサイズに依存しないことを示すものではありません。

ライティング段階の中間バッファーが最終結果として表示される場合は、名前付きの入力と最後のプリミティブを確認してください。このリングでは、拡散ライトマップをそのまま返すことで、不透明なグレーの長方形を再現しました。前の乗算ですでに透明度が保たれて見えても、最後のin SourceAlphaは意図的な処理です。

ぼかしや効果が予想外の長方形で切れる場合は、SVGのクリッピングガイドでフィルター領域を調べます。この領域と、最後の元アルファによる範囲制限は分けて考えてください。片方は効果の作業領域を定め、もう片方は意図したシルエットを復元します。

画面用効果と平面のマスターを一緒に渡す

平面のマスターを確認するには、パスのフィルター属性を外します。同じ外周、内側の開口部、コーラル色一色の塗りが残ります。後の編集を元の形状から始められるよう、そのコピーを陰影付きウェブ版と一緒に保管してください。

物理的な仕上げには、エンボス用ベクターアートワークなど、別の準備手順を使います。画面用のライティングプリセットは見た目を作るもので、型の形状や計測されたレリーフの深さを提供するものではありません。SVGのモルフォロジー輪郭ガイドでは、再構築したパスと混同せずに、別のフィルターによる境界効果を説明しています。

ロゴがPNGやJPGでしか存在しない場合は、PerfectVectorでロゴをベクター化し、復元した外周と開口部を確認して、SVGの手順でライティングを加える前にきれいな平面マスターを残します。このサービスはベクター形状を復元します。拡散光と反射光のこのパイプラインは、それとは別に作る表示効果です。ベクターマスターがすでにあるなら、直接フィルターを適用して確認してください。

よくある質問

SVGライティングフィルターでロゴをエンボスのように見せられますか？ アルファベースの高さ場から、陰影やハイライトをシミュレーションできます。描画上の効果は、物理的なレリーフ、追加のパス輪郭、製作用の型ファイルを作りません。

SVGのライティング効果が透明な開口部を埋めるのはなぜですか？ 未合成の拡散ライトマップは、フィルター領域全体で不透明です。光を元の色と組み合わせ、最後に元のSourceAlphaに対するin合成を行い、効果を元のシルエット内に収めてください。

SVGの拡散光と反射光の違いは何ですか？ 拡散光は、元の色に陰影を付けるための広い範囲の照明を提供します。反射光は、輝きとして加える反射成分を提供します。どちらも入力アルファをバンプマップに使い、選択した光と表面設定に依存します。

surfaceScaleはロゴのパスを変えますか？ 変えません。ライティング計算で使う高さのスケールを変えます。二つの拡散光の対照例では、パスデータは同一のままで、描画された縁のコントラストが変わりました。

出典

1. MDN feDiffuseLighting — アルファのバンプマップ入力と、不透明な拡散ライト出力。
2. MDN feGaussianBlur — ぼかした入力と、フィルター領域の注意点。
3. MDN feComposite — 算術乗算と加算、元のアルファによる範囲制限。
4. MDN color-interpolation-filters — フィルター操作の既定値linearRGB。
5. MDN feSpecularLighting — 反射成分とその設定。
6. MDN feDistantLight — 両方のライティングプリミティブに使う光源。
7. MDN surfaceScale — 計算用の表面高さのスケール。
8. Filter Effectsライティング仕様 — ライティングのアルファ、角度の単位、隣接サンプルの計算。