> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions. # SVGライティング：開口部を保ちながらエンブレムに陰影を付ける > 中空エンブレムのアルファからSVGの拡散光と反射光を作り、効果をシルエット内に収めます。平面のベクターマスターは別に保管します。 Source: https://perfectvector.com/ja/blog/svg-lighting-relief Language: ja Author: Irene Kim Published: 2026-10-02T08:00:00+09:00 Updated: 2026-10-02T08:00:00+09:00 SVGロゴをエンボスのように見せるには、`SourceAlpha`をぼかし、そのアルファを`feDiffuseLighting`または`feSpecularLighting`に渡して、光を元の色と合成し、最後に元の`SourceAlpha`に対する`in`合成を行います。この最後の処理で、効果をエンブレム内に収め、開口部を保ちます。フィルターなしのパスのコピーを、平面のマスターとして保存してください。 効果が変えるのは描画上の見た目です。盛り上がった立体、新しい輪郭、製造用ファイルを作るものではありません。この手順では、SVGとして直接作成した独自のひし形リングのエンブレムを使い、ライティングの各段階とアルファを比較します。 ## アルファを光が当たる表面として使う `feDiffuseLighting`は入力アルファをバンプマップとして使い、不透明なライトマップを生成します。その見た目は光と入力の表面によって変わります。[MDNの拡散ライティングリファレンス](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feDiffuseLighting)で、この動作を説明しています。この例では、リングの不透明な部分が高い領域、開口部が低い領域になります。 ぼかすのは`SourceAlpha`だけで、元の色付きパスは`SourceGraphic`として残します。ぼかしたアルファによって、内側と外側の縁で高さがなだらかに変わり、ライティング計算に使われます。[`feGaussianBlur`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feGaussianBlur)は`stdDeviation`でこのぼかしを制御します。ひな形では、ユーザー空間を明示したフィルターで`2.5`を使います。 未合成の拡散マップは、元のパスが透明だった場所も含めて、フィルター領域全体を塗ります。光の計算を調べるには便利ですが、中空エンブレムの最終シルエットとしては不適切です。最後に範囲を制限するため、元のアルファを使えるようにしておいてください。 ## 陰影付きエンブレムの完全なひな形をコピーする これを`emblem-lighting.svg`として保存し、ブラウザーで開きます。一つの複合パスを持ち、外部画像への依存はありません。 ```svg ``` フィルターは各中間結果に名前を付けているので、それぞれの役割を確認できます。 | 段階 | 入力と結果 | 目的 | | ---- | ----------------------------- | ---------------- | | ぼかし | SourceAlpha → bump | 高さの変化を滑らかにする | | 拡散光 | bump → diffuse | 広い範囲の照明を計算する | | 乗算 | SourceGraphic × diffuse → lit | 元の色に陰影を付ける | | 反射光 | bump → shine | 反射成分を計算する | | 加算 | lit + shine → paint | 陰影とハイライトを組み合わせる | | 範囲制限 | paint in SourceAlpha | 元のシルエットと開口部を復元する | 算術乗算は`k1="1"`を使い、ほかの係数はゼロです。加算は`k2="1" k3="1"`を使い、ほかはゼロです。[`feComposite`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feComposite)は、これらのピクセル操作と`in`演算子を定義しています。元の境界を使いたい場合は、最後の合成の二つ目の入力を、ぼかした`bump`ではなく`SourceAlpha`に保ってください。 フィルターは`color-interpolation-filters="linearRGB"`を明示的に使用しています。これはSVGのフィルター操作の既定値で、通常の色の補間とは別です。[MDNのcolor-interpolation-filtersリファレンス](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/color-interpolation-filters)で、その違いを説明しています。ここで計測したライティングのバリエーションは、すべて同じ設定を使います。 ## 拡散光の陰影と反射光の輝きを比較する 拡散ライティングは、ライトマップに従って元の色を暗く、または明るくします。反射光の段階では反射成分を加えます。[`feSpecularLighting`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feSpecularLighting)は、光に依存する出力とパラメーターを説明しています。ひな形は控えめな定数`.7`と指数`18`を使います。使える拡散光の効果を整えてから調整してください。 拡散光だけを調べるには、ぼかし、拡散光、乗算の段階を残し、最後の合成の最初の入力を`paint`から`lit`に変えます。反射光と加算の段階は削除します。 平面の色の上で反射光だけを調べるには、ぼかしと反射光の段階を残します。加算の最初の入力を`lit`から`SourceGraphic`に変え、拡散光と乗算の段階を削除し、最後の`paint in SourceAlpha`合成は残してください。どちらの比較も、元のパスと光の方向は同じです。 この例の遠方光は`azimuth="225" elevation="45"`を使います。[`feDistantLight`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feDistantLight)は、どちらのライティングプリミティブにも使える光源要素です。この角度は度数で、ピクセル位置ではありません。組み合わせた効果を比較するときは、両方の段階の光の方向を一緒に変更してください。 ## 元のブラウザー対照例でわかったこと 独自に作成した六つのSVGサンプルを、Chromeで`80 × 80`と`160 × 160` CSSピクセルで開きました。平面のマスター、拡散光、反射光、組み合わせた効果は、見た目で区別できるままでした。このテストファイルでは、拡散光の`surfaceScale`を高くすると縁のコントラストが強くなりました。未合成の拡散光の対照例は、透明なシルエットではなく、開口部が埋まったグレーの長方形を示しました。 別に行ったピクセル読み取りでは、元のCanvasサイズ`200 × 200`を使いました。帯のサンプルは`(100, 38)`、縁は`(101, 22)`、開口部は`(100, 100)`、外側は`(10, 10)`です。 | サンプル | 帯のRGB | 縁のRGB | 開口部 / 外側のアルファ | | ----------------------- | ------------- | ------------- | ------------- | | 平面のマスター | 220, 121, 95 | 220, 121, 95 | 0 / 0 | | 未合成の拡散ライトマップ、スケール4 | 219, 219, 219 | 214, 214, 214 | 255 / 255 | | 拡散光の色、スケール4、範囲制限あり | 189, 102, 81 | 185, 101, 79 | 0 / 0 | | 拡散光の色、スケール12、範囲制限あり | 189, 102, 81 | 155, 83, 64 | 0 / 0 | | 平面の色の上の反射光、スケール4、範囲制限あり | 242, 162, 145 | 221, 122, 96 | 0 / 0 | | 組み合わせた効果、スケール4、範囲制限あり | 214, 149, 137 | 185, 102, 81 | 0 / 0 | どのファイルも、同じ`d`値、一つのパス、画像要素ゼロを維持しました。画面上の効果は、元の形状を追加しませんでした。これはこのブラウザーと元データでの観察であり、別のレンダラーやエディターの読み込み動作を保証するものではありません。 **ライティングと平面のマスター** ![平面の塗り、広い範囲の陰影、集中したハイライトを付けた、同一の中空ひし形エンブレムの概念図。](https://perfectvector.com/blog/svg-lighting-relief/lighting-and-master.webp) *模式図：開口部を空けたまま、同じ輪郭に拡散光の陰影と反射光の輝きを付けられます。これはブラウザーのサンプル、トレース結果、物理的なレリーフではありません。* ## 輪郭を変える前に高さ場を調整する [`surfaceScale`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/surfaceScale)は、ライティング計算で使う表面の高さのスケールを設定します。パスを広げるものではありません。拡散光の`4`と`12`の対照例では、この値だけを変更しました。平らな帯のサンプルは同じ色のままで、縁のサンプルは`12`で暗くなりました。 条件を固定して、次の順に進めます。 1. フィルターなしで、元の透明なシルエットと開口部を確認します。 2. アルファのぼかしと光の方向を選びます。 3. ほかをすべて固定して、小さい`surfaceScale`と大きい値を比較します。 4. 反射光を加え、最後の操作として元のアルファで色の範囲を制限します。 5. 実際の表示サイズと、対照的な背景の上で納品するアートワークを確認します。 現在の[Filter Effects仕様](https://www.w3.org/TR/filter-effects-1/#feDiffuseLightingElement)は、拡散光の出力アルファをすべての場所で1とし、反射光の出力アルファはその色成分から定めています。どちらの出力も、元の開口部を保つと考えてはいけません。また、隣接するアルファのサンプルから法線を計算する方法も定義しています。このひな形では`kernelUnitLength`を設定していません。二つのサイズでの確認は、ライティングのサンプルがサイズに依存しないことを示すものではありません。 ライティング段階の中間バッファーが最終結果として表示される場合は、名前付きの入力と最後のプリミティブを確認してください。このリングでは、拡散ライトマップをそのまま返すことで、不透明なグレーの長方形を再現しました。前の乗算ですでに透明度が保たれて見えても、最後の`in SourceAlpha`は意図的な処理です。 ぼかしや効果が予想外の長方形で切れる場合は、[SVGのクリッピングガイド](https://perfectvector.com/ja/blog/svg-shadow-clipped)でフィルター領域を調べます。この領域と、最後の元アルファによる範囲制限は分けて考えてください。片方は効果の作業領域を定め、もう片方は意図したシルエットを復元します。 ## 画面用効果と平面のマスターを一緒に渡す 平面のマスターを確認するには、パスのフィルター属性を外します。同じ外周、内側の開口部、コーラル色一色の塗りが残ります。後の編集を元の形状から始められるよう、そのコピーを陰影付きウェブ版と一緒に保管してください。 物理的な仕上げには、[エンボス用ベクターアートワーク](https://perfectvector.com/ja/blog/vector-artwork-for-embossing)など、別の準備手順を使います。画面用のライティングプリセットは見た目を作るもので、型の形状や計測されたレリーフの深さを提供するものではありません。[SVGのモルフォロジー輪郭ガイド](https://perfectvector.com/ja/blog/svg-femorphology-outline)では、再構築したパスと混同せずに、別のフィルターによる境界効果を説明しています。 ロゴがPNGやJPGでしか存在しない場合は、[PerfectVectorでロゴをベクター化](https://perfectvector.com/ja/vectorize-logo)し、復元した外周と開口部を確認して、SVGの手順でライティングを加える前にきれいな平面マスターを残します。このサービスはベクター形状を復元します。拡散光と反射光のこのパイプラインは、それとは別に作る表示効果です。ベクターマスターがすでにあるなら、直接フィルターを適用して確認してください。 ## よくある質問 **SVGライティングフィルターでロゴをエンボスのように見せられますか？** アルファベースの高さ場から、陰影やハイライトをシミュレーションできます。描画上の効果は、物理的なレリーフ、追加のパス輪郭、製作用の型ファイルを作りません。 **SVGのライティング効果が透明な開口部を埋めるのはなぜですか？** 未合成の拡散ライトマップは、フィルター領域全体で不透明です。光を元の色と組み合わせ、最後に元のSourceAlphaに対するin合成を行い、効果を元のシルエット内に収めてください。 **SVGの拡散光と反射光の違いは何ですか？** 拡散光は、元の色に陰影を付けるための広い範囲の照明を提供します。反射光は、輝きとして加える反射成分を提供します。どちらも入力アルファをバンプマップに使い、選択した光と表面設定に依存します。 **surfaceScaleはロゴのパスを変えますか？** 変えません。ライティング計算で使う高さのスケールを変えます。二つの拡散光の対照例では、パスデータは同一のままで、描画された縁のコントラストが変わりました。 ## 出典 1. [MDN feDiffuseLighting](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feDiffuseLighting) — アルファのバンプマップ入力と、不透明な拡散ライト出力。 2. [MDN feGaussianBlur](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feGaussianBlur) — ぼかした入力と、フィルター領域の注意点。 3. [MDN feComposite](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feComposite) — 算術乗算と加算、元のアルファによる範囲制限。 4. [MDN color-interpolation-filters](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/color-interpolation-filters) — フィルター操作の既定値linearRGB。 5. [MDN feSpecularLighting](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feSpecularLighting) — 反射成分とその設定。 6. [MDN feDistantLight](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feDistantLight) — 両方のライティングプリミティブに使う光源。 7. [MDN surfaceScale](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/surfaceScale) — 計算用の表面高さのスケール。 8. [Filter Effectsライティング仕様](https://www.w3.org/TR/filter-effects-1/#feDiffuseLightingElement) — ライティングのアルファ、角度の単位、隣接サンプルの計算。 ## Explore - [Read the HTML article](https://perfectvector.com/ja/blog/svg-lighting-relief) - [SVG変位マップ：ロゴのプレビューをゆがめる方法](https://perfectvector.com/ja/blog/svg-fedisplacementmap-artwork.md) - [SVGのストローク配置：輪郭を内側・外側に置く](https://perfectvector.com/ja/blog/svg-stroke-alignment.md) - [Product facts](https://perfectvector.com/product-facts.md) - [FAQ](https://perfectvector.com/faq.md) - [Pricing and credits](https://perfectvector.com/pricing.md)