> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions. # SVG変位マップ：ロゴのプレビューをゆがめる方法 > SVGのfeDisplacementMapでロゴのプレビューを変形。sRGBでチャンネルと中立グレーを制御し、二つのサイズで確認して、納品用に元のパスマスターを保ちます。 Source: https://perfectvector.com/ja/blog/svg-fedisplacementmap-artwork Language: ja Author: Irene Kim Published: 2026-10-01T08:00:00+09:00 Updated: 2026-10-01T08:00:00+09:00 SVGの`feDisplacementMap`フィルターは、別の画像をサンプリング用のマップとして使い、レンダラーが表示する画像をゆがめます。元のパスデータは変更しません。元に戻せるロゴのプレビューやウェブイラストに使い、編集と納品のためにフィルターなしのマスターを残してください。 最初の例を予測しやすくするために、`in="SourceGraphic"`を設定し、`in2`に名前付きマップを指定し、水平方向と垂直方向のチャンネルを選び、`color-interpolation-filters="sRGB"`を設定します。[MDNの変位リファレンス](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feDisplacementMap)で、二つの入力とサンプリング式を説明しています。画面で曲がって見える図形が、自動的に新しい編集可能な輪郭になるわけではありません。 ## 必要なファイルを決める | 目的 | 適した方法 | 残すもの | | -------------------- | ---------------------- | ---------------------- | | ウェブページ上の静止した変形アートワーク | フィルターを適用した表示用コピー | 元のSVGパスマスター | | 輪郭が恒久的に変形した編集可能なロゴ | 形状を意図的に編集または再構築する | 検証済みの新しいパス形状 | | 見た目を固定したラスタープレビュー | 必要なサイズで表示用コピーをレンダリングする | きれいなマスターと確認済みのラスター書き出し | | 印刷やカットの製作用形状 | フィルターなしのマスターから始める | 利用先で確認した寸法、穴、パス | 以下の例では、中央に開口部を持つ独自の正方形バッジを使います。辺が直線なので、ゆがみを比較しやすくなっています。これはデモ用の図柄で、顧客のロゴやベクター化ツールの出力ではありません。 **プレビューと元データは別です** ![同一の直線的な元パスの輪郭の上に、輪郭のゆがみが段階的に強くなる三つのコーラル色バッジのプレビューを並べたイラスト](https://perfectvector.com/blog/svg-fedisplacementmap-artwork/displacement-states.webp) *模式図：元の輪郭が変わらなくても、表示されるバッジはゆがみます。この概念図は、ブラウザーのスクリーンショット、ネイティブエディターの書き出し、変換結果ではありません。* プレビューの色だけを変える場合は、[feColorMatrixによる色変更](https://perfectvector.com/ja/blog/svg-fecolormatrix)を使ってください。変位が扱うのは、レンダリングされる画像のどこをサンプリングするかという空間的な問題です。 ## 条件を固定した静的SVGの例をコピーする 次のコードをSVGとして保存し、ブラウザーで開きます。一つのパス、固定のノイズソース、水平方向のチャンネルを変化させつつ垂直方向のチャンネルを中立に保つ行列、`36`の変位スケールが含まれています。 ```xml ``` `feTurbulence`は手続き的な変化を生成します。[MDNのノイズリファレンス](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feTurbulence)で、周波数、オクターブ、シード、種類の設定を説明しています。ここではそれらを固定し、`scale`の変更によって同じマップで強さを比較できるようにしています。 行列はノイズの赤チャンネルを残し、緑を`0.5`、青をゼロ、アルファを一に設定します。出力は制御マップであって、コーラル色のバッジの新しいカラーパレットではありません。[MDNの行列リファレンス](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feColorMatrix)でチャンネル変換を説明しています。その後、赤が水平方向のサンプリングを制御し、緑は中立の垂直オフセットを与えます。 強さを比較するには、`scale="36"`だけを`scale="12"`、次に`scale="0"`へ変更します。パス、シード、マップの行列、色空間、viewBoxは変更しないでください。これで、判断したい要素だけを切り分けられます。 ## scaleをサンプリング位置のずれとして読む 選択したマップチャンネルに対し、元画像をサンプリングする位置は次のようになります。 ```text sampleX = x + scale × (horizontalChannel - 0.5) sampleY = y + scale × (verticalChannel - 0.5) ``` [W3Cの変位仕様](https://drafts.csswg.org/filter-effects/#feDisplacementMapElement)は、この逆方向の対応付けを定義しています。出力の各位置が、元画像のどこからサンプルを取るかを求めます。サンプリングの正のオフセットは、パスのノードをその方向へ動かす指示ではありません。 スケールが`36`の場合、水平方向のチャンネルは次のサンプリングオフセットを与えます。 | フィルターの作業用色空間でのチャンネル値 | 水平方向のサンプリングオフセット | | -------------------- | ---------------- | | `0` | `-18` | | `0.5` | `0` | | `1` | `+18` | この例では`primitiveUnits="userSpaceOnUse"`を使っているため、値はSVGのユーザー座標系に対応します。viewBoxを拡大縮小した後のCSSピクセル距離を保証するものではありません。また、仕様ではスケール`0`に変位効果がないことも定義しています。 この例では、緑の値を固定して垂直方向のサンプリングを中立に保っています。後から二軸のゆがみを試す場合は、緑にも意図的に変化を与えてください。予想外の結果を調べるときに、チャンネルとマップを同時に変えないでください。 ## 中立グレーの色空間を明示する 中立とは、選択したチャンネルの値が**マップに使う作業用色空間で0.5**であることです。見た目が中間のグレーなら、どのフィルター設定でも中立になるという意味ではありません。 フィルターの既定の作業用色空間は`linearRGB`ですが、この例は明示的に`sRGB`を使います。`rgb(50%,50%,50%)`と記述した色は、線形RGBに変換した後は数値として0.5ではありません。[MDNのcolor-interpolation-filtersリファレンス](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/color-interpolation-filters)で、既定値と明示的な選択肢を説明しています。 診断用の一定値マップを作るには、ノイズのプリミティブと行列を次に置き換えます。 ```xml ``` 変位のプリミティブ、セレクター、フィルターに明示した`sRGB`はそのままにします。[MDNのfeFloodリファレンス](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feFlood)で、ここで使う一定色の画像を説明しています。この対照例は、マップの変化と色空間によるずれを区別するのに役立ちます。 Chromeのテストファイルでは、sRGBの一定値マップを使ったバッジは、フィルターなしのバッジと位置がそろって見えました。明示的な色空間設定を取り除くと、同じグレーマップのバッジが目に見えてずれました。これはブラウザー上の観察であり、異なるエンジンでピクセル単位まで同じ描画になると主張するものではありません。この方法を自分のアートワークに移すときも色空間設定を残し、それを上書きするCSSルールがないか確認してください。 ## 同じバッジを二つのサイズで確認する 元のバッジをChromeで**120 × 120**と**300 × 300 CSSピクセル**にレンダリングしました。どちらのサイズも、同じ固定マップをスケール`0`、`12`、`36`で表示し、同じ`0 0 200 200`のviewBoxを使っています。 | 強さ | 元のテストファイルでの観察 | 判断に役立つこと | | ---- | --------------------------- | --------------- | | `0` | 直線的な外側の辺と正方形の開口部 | 比較の基準 | | `12` | 水平方向の輪郭に穏やかな変化があり、開口部は見えるまま | 控えめな表示効果 | | `36` | 外側の辺と開口部のゆがみがより強い | 納品前に認識しやすさを確認する | 効果は両方のサイズで見え、大きいプレビューでは穴と辺を確認しやすくなりました。ブラウザーのDOMには、六つのサンプルそれぞれに一つのパスが残り、`d`の値も同一でした。さらに三つの200ピクセルの対照例で、フィルターなしのバッジ、明示的なsRGBの一定グレーマップ、既定のlinearRGBの一定グレーマップを比較しました。 これらは独自に作成したSVGサンプルです。テストしたブラウザーでこのファイルがどう動作したかと、元の形状が変わっていないことを確認するものです。ネイティブエディターのテストでも、PerfectVectorの出力でも、互換性調査でもありません。 自分のロゴでは、まず実際に表示する最小サイズを確認してください。きれいなマスターが保たれていても、開口部や角がゆがむことでマークの見え方が変わる場合があります。 ## 位置ずれ、弱い効果、切れた端を診断する **バッジが曲がらず全体でずれる。** sRGBを明示した一定値マップの対照例を試します。選択したチャンネルと、そのチャンネル内でマップが本当に変化しているかを確認してください。選択した値が一定で中立でない場合は、均一なサンプリングオフセットが生じます。 **効果が弱いままになる。** `in2="map"`が行列の名前付き`result`と一致しているか確認します。同じシードと周波数のまま、スケールを少しずつ上げてください。その後、必要なら別のマップを試します。新しいシードは空間的なパターンを変えるため、別の比較になります。 **垂直の辺が予想外の動きをする。** この例は水平方向の変位用です。`xChannelSelector="R"`と`yChannelSelector="G"`を使い、Gを0.5に固定しています。二軸の変化を加える前に、行列の行とチャンネル名のつづりを確認してください。 **変形した輪郭が切れる。** 元のパスを編集する前に、フィルター領域を調べます。この例は`x="-25%"`、`y="-25%"`、幅と高さの`150%`で余白を確保しています。[MDNのfilterリファレンス](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/filter)で、これらの領域属性を説明しています。より極端な効果には別の領域が必要な場合があり、周囲のビューポートが別の境界を課すこともあります。領域を広げても出力の欠けが直らない場合は、[SVGフィルターとビューポートのクリッピング確認](https://perfectvector.com/ja/blog/svg-shadow-clipped)に従ってください。 **別の利用先でSVGの効果が消える。** 納品するそのファイルを利用先で開きます。ブラウザーのプレビューでは、エディター、PDF書き出し、カッターでの動作は確認できません。フィルターがそのまま引き継がれると約束せず、きれいなマスターを用意しておいてください。 ## きれいなマスターを別に渡す フィルターなしのバージョンを作るには、パスから`filter="url(#warp)"`を削除し、使わなくなったフィルター定義を取り除きます。元の`d`、`fill-rule="evenodd"`、塗り、viewBoxは残してください。できたファイルを開き、正方形の開口部と直線的な辺が、きれいな基準版と一致することを確認します。 きれいなマスターと表示効果を加えた版には、別のファイル名を使います。フィルター付きSVGを同じページにインラインで繰り返し配置する場合は、各フィルターに固有のIDを付け、`url(#...)`参照を更新してください。最終的な埋め込み方法と、対応予定のブラウザーを確認します。 最終的なゆがんだ輪郭そのものを編集可能にする必要があるなら、その形状は別のアートワーク制作として用意してください。このフィルターは、プレビューを新しいパスコマンドに焼き込むものではありません。ラスタライズしたプレビューのトレースも、精度と修正を確認する必要がある新たな変換です。数学的に変わっていない元のマスターを復元するものではありません。 SVG内に配置されたPNGは、さらに別の話です。ファイル名が編集可能なロゴのパスを保証すると考える前に、[ラスター画像を含むSVGファイル](https://perfectvector.com/ja/blog/svg-contains-raster-image)を確認してください。 ## ロゴのベクター化が役立つ場面 元のきれいなロゴがPNGやJPGでしか残っていない場合は、[その元のロゴをベクター化](https://perfectvector.com/ja/vectorize-logo)し、シルエット、穴、編集可能な色領域を確認してから、表示用フィルターを加えます。PerfectVectorはラスターからベクターへの変換を行います。このガイドの変位グラフは、それとは別のSVG効果です。ゆがんだプレビューを、製作用の輪郭として保証されたものに変えるわけではありません。 きれいなパスマスターがすでにある場合は、そのファイルを直接使ってください。元データの準備とロゴの修正については、[ロゴのベクター化ガイド](https://perfectvector.com/ja/blog/how-to-vectorize-a-logo)で、ブラウザーでの変形ではなく復元の段階を説明しています。 ## よくある質問 **feDisplacementMapはSVGのパスを変更しますか？** このフィルターは、マップに基づくサンプリングによって描画画像を変更します。元のブラウザーテストでは、強さを比較する六つのサンプルに、同じd値を持つ一つのパスが残っていました。 **グレーの変位マップなのにアートワークが動くのはなぜですか？** 中立とは、マップの作業用色空間でチャンネル値が0.5であることです。50%のsRGBグレーは、既定のlinearRGB色空間に変換した後は数値として0.5ではありません。色空間を明示し、一定値マップで条件を固定したテストを行ってください。 **この例のscale 36は何を意味しますか？** プリミティブ単位がuserSpaceOnUseの場合、選択したチャンネルの値が0から1なら、サンプリングのオフセットはSVGユーザー単位で-18から+18になります。表示される距離は、SVGのviewBoxの拡大縮小によって変わります。 **ゆがんだSVGをそのままカッターに渡せますか？** 表示上のゆがみは、新しい編集可能なカット用形状ではありません。フィルターなしのパスマスターを残し、実際の利用先を確認してください。ジョブで恒久的に変形した輪郭が必要なら、別途用意します。 ## 出典 1. [MDN：feDisplacementMap](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feDisplacementMap) — 元画像とマップの入力、チャンネル、サンプリング動作。 2. [W3C：変位フィルター](https://drafts.csswg.org/filter-effects/#feDisplacementMapElement) — 逆方向のマッピング、スケール、プリミティブの座標。 3. [MDN：feTurbulence](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feTurbulence) — 固定された手続き的マップの設定。 4. [MDN：feColorMatrix](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feColorMatrix) — 制御マップの明示的なチャンネル値。 5. [MDN：color-interpolation-filters](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/color-interpolation-filters) — 既定のlinearRGBと、明示的なsRGB。 6. [MDN：feFlood](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feFlood) — 一定色マップによる対照例。 7. [MDN：filter](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/filter) — フィルター領域の属性。 きれいな元画像がラスターでしか存在しないなら、[自分のロゴをSVGに変換](https://perfectvector.com/ja/vectorize-logo)し、シルエットと穴を確認して、そのマスターを保存してから、別のゆがんだ表示用コピーを作ってください。 ## Explore - [Read the HTML article](https://perfectvector.com/ja/blog/svg-fedisplacementmap-artwork) - [Illustratorの画像トレースがグレー表示になるときの確認方法](https://perfectvector.com/ja/blog/illustrator-image-trace-greyed-out.md) - [fpdf2のSVG画像：PythonのPDFでパスを保つ](https://perfectvector.com/ja/blog/fpdf2-svg-image.md) - [Product facts](https://perfectvector.com/product-facts.md) - [FAQ](https://perfectvector.com/faq.md) - [Pricing and credits](https://perfectvector.com/pricing.md)