SVG変位マップ：ロゴのプレビューをゆがめる方法

SVGのfeDisplacementMapフィルターは、別の画像をサンプリング用のマップとして使い、レンダラーが表示する画像をゆがめます。元のパスデータは変更しません。元に戻せるロゴのプレビューやウェブイラストに使い、編集と納品のためにフィルターなしのマスターを残してください。

最初の例を予測しやすくするために、in="SourceGraphic"を設定し、in2に名前付きマップを指定し、水平方向と垂直方向のチャンネルを選び、color-interpolation-filters="sRGB"を設定します。MDNの変位リファレンスで、二つの入力とサンプリング式を説明しています。画面で曲がって見える図形が、自動的に新しい編集可能な輪郭になるわけではありません。

必要なファイルを決める

以下の例では、中央に開口部を持つ独自の正方形バッジを使います。辺が直線なので、ゆがみを比較しやすくなっています。これはデモ用の図柄で、顧客のロゴやベクター化ツールの出力ではありません。

プレビューと元データは別です

プレビューの色だけを変える場合は、feColorMatrixによる色変更を使ってください。変位が扱うのは、レンダリングされる画像のどこをサンプリングするかという空間的な問題です。

条件を固定した静的SVGの例をコピーする

次のコードをSVGとして保存し、ブラウザーで開きます。一つのパス、固定のノイズソース、水平方向のチャンネルを変化させつつ垂直方向のチャンネルを中立に保つ行列、36の変位スケールが含まれています。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
  <defs>
    <filter id="warp" x="-25%" y="-25%" width="150%" height="150%" primitiveUnits="userSpaceOnUse"
            color-interpolation-filters="sRGB">
      <feTurbulence type="fractalNoise" baseFrequency="0.035"
                    numOctaves="1" seed="8" result="noise"/>
      <feColorMatrix in="noise" type="matrix" values="1 0 0 0 0
        0 0 0 0 0.5
        0 0 0 0 0
        0 0 0 0 1" result="map"/>
      <feDisplacementMap in="SourceGraphic" in2="map" scale="36"
                         xChannelSelector="R" yChannelSelector="G"/>
    </filter>
  </defs>
  <path d="M42 42H158V158H42Z M78 78H122V122H78Z" fill="#e76b50" fill-rule="evenodd" filter="url(#warp)"/>
</svg>

feTurbulenceは手続き的な変化を生成します。MDNのノイズリファレンスで、周波数、オクターブ、シード、種類の設定を説明しています。ここではそれらを固定し、scaleの変更によって同じマップで強さを比較できるようにしています。

行列はノイズの赤チャンネルを残し、緑を0.5、青をゼロ、アルファを一に設定します。出力は制御マップであって、コーラル色のバッジの新しいカラーパレットではありません。MDNの行列リファレンスでチャンネル変換を説明しています。その後、赤が水平方向のサンプリングを制御し、緑は中立の垂直オフセットを与えます。

強さを比較するには、scale="36"だけをscale="12"、次にscale="0"へ変更します。パス、シード、マップの行列、色空間、viewBoxは変更しないでください。これで、判断したい要素だけを切り分けられます。

scaleをサンプリング位置のずれとして読む

選択したマップチャンネルに対し、元画像をサンプリングする位置は次のようになります。

sampleX = x + scale × (horizontalChannel - 0.5)
sampleY = y + scale × (verticalChannel - 0.5)

W3Cの変位仕様は、この逆方向の対応付けを定義しています。出力の各位置が、元画像のどこからサンプルを取るかを求めます。サンプリングの正のオフセットは、パスのノードをその方向へ動かす指示ではありません。

スケールが36の場合、水平方向のチャンネルは次のサンプリングオフセットを与えます。

この例ではprimitiveUnits="userSpaceOnUse"を使っているため、値はSVGのユーザー座標系に対応します。viewBoxを拡大縮小した後のCSSピクセル距離を保証するものではありません。また、仕様ではスケール0に変位効果がないことも定義しています。

この例では、緑の値を固定して垂直方向のサンプリングを中立に保っています。後から二軸のゆがみを試す場合は、緑にも意図的に変化を与えてください。予想外の結果を調べるときに、チャンネルとマップを同時に変えないでください。

中立グレーの色空間を明示する

中立とは、選択したチャンネルの値がマップに使う作業用色空間で0.5であることです。見た目が中間のグレーなら、どのフィルター設定でも中立になるという意味ではありません。

フィルターの既定の作業用色空間はlinearRGBですが、この例は明示的にsRGBを使います。rgb(50%,50%,50%)と記述した色は、線形RGBに変換した後は数値として0.5ではありません。MDNのcolor-interpolation-filtersリファレンスで、既定値と明示的な選択肢を説明しています。

診断用の一定値マップを作るには、ノイズのプリミティブと行列を次に置き換えます。

<feFlood flood-color="rgb(50%,50%,50%)" result="map"/>

変位のプリミティブ、セレクター、フィルターに明示したsRGBはそのままにします。MDNのfeFloodリファレンスで、ここで使う一定色の画像を説明しています。この対照例は、マップの変化と色空間によるずれを区別するのに役立ちます。

Chromeのテストファイルでは、sRGBの一定値マップを使ったバッジは、フィルターなしのバッジと位置がそろって見えました。明示的な色空間設定を取り除くと、同じグレーマップのバッジが目に見えてずれました。これはブラウザー上の観察であり、異なるエンジンでピクセル単位まで同じ描画になると主張するものではありません。この方法を自分のアートワークに移すときも色空間設定を残し、それを上書きするCSSルールがないか確認してください。

同じバッジを二つのサイズで確認する

元のバッジをChromeで120 × 120と300 × 300 CSSピクセルにレンダリングしました。どちらのサイズも、同じ固定マップをスケール0、12、36で表示し、同じ0 0 200 200のviewBoxを使っています。

効果は両方のサイズで見え、大きいプレビューでは穴と辺を確認しやすくなりました。ブラウザーの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リファレンスで、これらの領域属性を説明しています。より極端な効果には別の領域が必要な場合があり、周囲のビューポートが別の境界を課すこともあります。領域を広げても出力の欠けが直らない場合は、SVGフィルターとビューポートのクリッピング確認に従ってください。

別の利用先でSVGの効果が消える。 納品するそのファイルを利用先で開きます。ブラウザーのプレビューでは、エディター、PDF書き出し、カッターでの動作は確認できません。フィルターがそのまま引き継がれると約束せず、きれいなマスターを用意しておいてください。

きれいなマスターを別に渡す

フィルターなしのバージョンを作るには、パスからfilter="url(#warp)"を削除し、使わなくなったフィルター定義を取り除きます。元のd、fill-rule="evenodd"、塗り、viewBoxは残してください。できたファイルを開き、正方形の開口部と直線的な辺が、きれいな基準版と一致することを確認します。

きれいなマスターと表示効果を加えた版には、別のファイル名を使います。フィルター付きSVGを同じページにインラインで繰り返し配置する場合は、各フィルターに固有のIDを付け、url(#...)参照を更新してください。最終的な埋め込み方法と、対応予定のブラウザーを確認します。

最終的なゆがんだ輪郭そのものを編集可能にする必要があるなら、その形状は別のアートワーク制作として用意してください。このフィルターは、プレビューを新しいパスコマンドに焼き込むものではありません。ラスタライズしたプレビューのトレースも、精度と修正を確認する必要がある新たな変換です。数学的に変わっていない元のマスターを復元するものではありません。

SVG内に配置されたPNGは、さらに別の話です。ファイル名が編集可能なロゴのパスを保証すると考える前に、ラスター画像を含むSVGファイルを確認してください。

ロゴのベクター化が役立つ場面

元のきれいなロゴがPNGやJPGでしか残っていない場合は、その元のロゴをベクター化し、シルエット、穴、編集可能な色領域を確認してから、表示用フィルターを加えます。PerfectVectorはラスターからベクターへの変換を行います。このガイドの変位グラフは、それとは別のSVG効果です。ゆがんだプレビューを、製作用の輪郭として保証されたものに変えるわけではありません。

きれいなパスマスターがすでにある場合は、そのファイルを直接使ってください。元データの準備とロゴの修正については、ロゴのベクター化ガイドで、ブラウザーでの変形ではなく復元の段階を説明しています。

よくある質問

feDisplacementMapはSVGのパスを変更しますか？ このフィルターは、マップに基づくサンプリングによって描画画像を変更します。元のブラウザーテストでは、強さを比較する六つのサンプルに、同じd値を持つ一つのパスが残っていました。

グレーの変位マップなのにアートワークが動くのはなぜですか？ 中立とは、マップの作業用色空間でチャンネル値が0.5であることです。50%のsRGBグレーは、既定のlinearRGB色空間に変換した後は数値として0.5ではありません。色空間を明示し、一定値マップで条件を固定したテストを行ってください。

この例のscale 36は何を意味しますか？ プリミティブ単位がuserSpaceOnUseの場合、選択したチャンネルの値が0から1なら、サンプリングのオフセットはSVGユーザー単位で-18から+18になります。表示される距離は、SVGのviewBoxの拡大縮小によって変わります。

ゆがんだSVGをそのままカッターに渡せますか？ 表示上のゆがみは、新しい編集可能なカット用形状ではありません。フィルターなしのパスマスターを残し、実際の利用先を確認してください。ジョブで恒久的に変形した輪郭が必要なら、別途用意します。

出典

1. MDN：feDisplacementMap — 元画像とマップの入力、チャンネル、サンプリング動作。
2. W3C：変位フィルター — 逆方向のマッピング、スケール、プリミティブの座標。
3. MDN：feTurbulence — 固定された手続き的マップの設定。
4. MDN：feColorMatrix — 制御マップの明示的なチャンネル値。
5. MDN：color-interpolation-filters — 既定のlinearRGBと、明示的なsRGB。
6. MDN：feFlood — 一定色マップによる対照例。
7. MDN：filter — フィルター領域の属性。

きれいな元画像がラスターでしか存在しないなら、自分のロゴをSVGに変換し、シルエットと穴を確認して、そのマスターを保存してから、別のゆがんだ表示用コピーを作ってください。