SVGのグレインテクスチャ：ノイズを図形の内側に収める

SVGイラストにグレインを加えるには、feTurbulenceでノイズを生成し、薄い単色のオーバーレイに変えてから、SourceAlphaの内側で合成します。それをSourceGraphicの上に重ねることで、元の塗りを見えるままにします。これにより、アートワークのパス形状を変えずに、描画上のテクスチャを加えられます。

ノイズのプリミティブだけでは、別の結果になります。図形の輪郭に沿うのではなく、フィルタープリミティブのサブ領域を埋めるためです。葉が長方形のノイズ領域に変わるのは、そのためです。MDNのfeTurbulenceリファレンスに、この動作が記載されています。

ウェブイラストでは、テクスチャ付きの表示用バージョンと、きれいなマスターが役立つ納品物です。このフィルターで作られる粒状感は、編集可能な点やカット用輪郭の集合ではありません。

図形と表面の効果を分ける

まず、グレインなしですでに正しく見える、塗り付きの単純なパスから始めます。効果を加える前に、輪郭、隙間、色を修正してください。フィルターでその形状を修復することはできません。

次の三つの状態で、境界の問題を説明できます。

境界が重要です

SourceGraphicは、フィルターを適用する要素を提供します。SourceAlphaは、そのアルファチャンネルを提供します。フィルターはアートワークの画像に対して処理を行い、パスコマンドを書き換えません。これらの入力とフィルターグラフは、W3CのFilter Effects仕様で定義されています。

元のアートワークに透明な部分がある場合は、その部分も収まる範囲に影響します。SourceAlphaは、推測した外側のバウンディングボックスではなく、実際に描画された不透明度に従います。

SVGグレインの完全な例をコピーする

これを.svgファイルとして保存し、ブラウザーで開きます。独自の葉のパス、決定的なノイズシード、暗いオーバーレイ、明示的な範囲制限の処理が含まれています。斜めの開口部はパスの一部なので、テクスチャ付きの版でも透明のまま残ります。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
  <defs>
    <filter id="grain" x="-10%" y="-10%" width="120%" height="120%"
            color-interpolation-filters="sRGB">
      <feTurbulence type="fractalNoise" baseFrequency="0.65"
                    numOctaves="2" seed="8" result="noise"/>
      <feColorMatrix in="noise" type="matrix" values="0 0 0 0 0
        0 0 0 0 0
        0 0 0 0 0
        0 0 0 0.28 0" result="ink"/>
      <feComposite in="ink" in2="SourceAlpha" operator="in" result="inside"/>
      <feMerge>
        <feMergeNode in="SourceGraphic"/>
        <feMergeNode in="inside"/>
      </feMerge>
    </filter>
  </defs>
  <path d="M36 142C40 70 104 26 164 30C164 100 120 150 60 156L38 180L28 170L52 146C80 112 112 78 146 46C104 78 74 110 54 140Z" fill="#e76b50" filter="url(#grain)"/>
</svg>

フィルターは四つの処理を行います。

1. feTurbulenceでノイズを作り、noiseと名付けます。
2. 行列で赤、緑、青をゼロに設定します。最後の行はノイズのアルファに0.28を掛け、inkという薄い黒のオーバーレイを作ります。
3. operator="in"を指定したfeCompositeが、SourceAlphaのある場所にオーバーレイを残します。
4. feMergeが元のアートワークを先に描き、その上に範囲を制限したオーバーレイを描きます。

MDNのfeColorMatrixリファレンスでは、5列の行列が色とアルファを変換する仕組みを説明しています。ここで変わるのはノイズ画像であり、葉の塗りではありません。MDNのfeCompositeリファレンスでは、オーバーレイを二つ目の入力に制限するin操作を説明しています。

0.28はこのコーラル色の葉での出発点であり、あらゆるグレインに使える万能の設定ではありません。テクスチャでアートワークがくすむ場合は下げ、予定の表示サイズでグレインが消える場合は上げてください。黒のオーバーレイによる粒状感は、塗りを暗くします。黒い図柄に、目に見える明るい斑点を作ることはできません。

既存のアートワークの色変更に使う色とアルファの操作については、別のfeColorMatrixガイドを参照してください。既存の透明な縁を硬くする方法は、SVGのアルファしきい値で説明しています。どちらの操作も、ここで使う生成ノイズソースは提供しません。

実際に見られるサイズで結果を確認する

元のパスから、フィルターなし、ノイズのプリミティブだけを含むフィルター付き、上記のグレインを内側に制限する完全なグラフ付き、という三つの版を作りました。同じ0 0 200 200のviewBoxを使い、Chromeで120 × 120と360 × 360 CSSピクセルの描画結果を確認しました。

ブラウザーのDOMには、どのサンプルにも一つのパスがありました。六つのd属性はすべて同一でした。これがこの例の範囲です。描画された表面は変わりましたが、斑点のパスは追加されていません。独自に作成したブラウザーテスト用ファイルであり、PerfectVectorやネイティブのベクターエディターの出力ではありません。

大きなプレビューは効果の確認に役立ちますが、アートワークが見やすさを保っているかを決めるのは小さい版です。両方のサイズを確認してください。同じviewBoxのまま表示サイズを大きくすると、テクスチャの見かけの大きさも変わります。一つのプレビューがすべての用途を代表するとは考えないでください。

設定を一つずつ変えてグレインを調整する

ウェブカード用の小さなイラストなら、例の値から始めます。その後、一つのパラメーターを変え、同じ二つの表示サイズで比較し、好みの版のコピーを残してください。

baseFrequencyには、両軸共通の一つの値か、水平方向と垂直方向の二つの値を指定できます。MDNのbaseFrequencyリファレンスに、この違いが記載されています。この葉では一つの値から始めてください。異なる値にするのは、方向性のあるテクスチャを作るための意図的な選択です。

numOctavesは、MDNのnumOctavesリファレンスで説明されているように、ノイズのオクターブ数を制御します。オクターブの追加は、ベクターパスの追加ではありません。必要なサイズで見える表面がよくなる場合だけ使ってください。

この例はcolor-interpolation-filters="sRGB"を明示的に設定しています。候補を比較する間はこの設定を変えず、色処理の変化がグレインの比較に混ざらないようにしてください。

長方形、塗りの消失、汚れた縁を修正する

テクスチャが長方形の領域になる。 フィルターの最終出力を確認します。feTurbulenceで終わっている場合は、ノイズ画像を返しています。行列、SourceAlphaとの合成、マージを元に戻してください。フィルターの長方形を広げるだけでは、制限されていないノイズの場所が増えるだけです。

葉の色が消える。 最初のマージノードがSourceGraphicを使っているか確認してください。insideだけを最終結果にすると、元のコーラル色の塗りではなく、暗いオーバーレイだけが含まれます。名前を付けた各resultと各in参照のつづりや大文字小文字も確認します。

透明な開口部にノイズが残る。 合成の二つ目の入力が、長方形のノイズや不透明な背景ではなく、SourceAlphaであることを確認します。テクスチャを付けたいアートワークにフィルターを適用してください。フィルターをかけるグループに不透明な背景を含めると、アルファ入力が変わります。

出力の一部が切れる。 フィルターのx、y、width、heightを確認します。MDNのfilterリファレンスで説明しているように、これらは利用可能なフィルター領域を定義します。例では少し余白を設けています。領域を広げても、範囲制限の処理が抜けている問題は修復できず、別のコンテナーによる切り抜きも直りません。

小さいアートワークが濁って見える。 まずオーバーレイのアルファを下げ、その後で周波数とオクターブ数を比較します。それでもテクスチャがシルエットを損なう場合は、そのサイズではきれいな版を渡してください。

納品用にきれいなマスターを残す

フィルターなしのマスターを作るには、パスからfilter="url(#grain)"を削除し、不要になったフィルター定義を取り除きます。パスのd、塗り、viewBoxは保持してください。そのファイルを別に開き、葉と開口部が元のきれいな版と一致することを確認します。

ウェブアプリでは、実際に使うブラウザーと正確な埋め込み方法で、テクスチャ付きの版を確認してください。このインラインSVGを一つのページで繰り返す場合は、各フィルターに固有のIDを付け、url(#...)参照を更新します。独立したこの例では、インスタンスが一つなのでIDも一つです。

正確なラスターの見た目が必要な利用先には、必要なサイズでラスタープレビューを書き出し、その利用先で確認します。編集可能またはカット可能な形状が必要な手順には、きれいなパスを渡し、グレインは表示効果だと伝えてください。フィルターノイズをベクターの斑点と説明したり、後工程のエディター、PDF書き出し、カッターが再現すると約束したりしないでください。実際の利用先でテストします。

意図的に一つずつ編集できる斑点が必要な場合は、別の形状制作になります。修正方針も決める必要があります。テクスチャを細かな輪郭の塊にトレースする前に、SVGのノードが多すぎる理由を確認してください。ラスターの絵画から粒状感を保つのは別の出発点で、水彩画からベクターへの変換で扱っています。

ベクター化が役立つ場面

きれいな図柄がPNGやJPGでしか残っていない場合は、ブラウザーフィルターを加える前に、その元画像を編集可能なSVGアートワークに変換します。まず、きれいな版で復元したシルエットと開口部を確認してください。PerfectVectorがラスターからベクターへの段階を提供し、このガイドの手続き的なグレイングラフは、その後に加える別のSVG効果です。

パスベースのマスターがすでにありますか。そのまま使ってください。フィルターを使うために二度目の変換は必要ありません。必要なら、画像ベクター化ガイドで元データの復元段階を確認できます。

よくある質問

feTurbulenceが図形に沿わず長方形を作るのはなぜですか？ ノイズはフィルタープリミティブのサブ領域を埋めます。SourceAlphaの内側で合成し、SourceGraphicの上に重ねることで、塗りを保ちながらオーバーレイをアートワーク内に制限してください。

SVGグレインはパスにノードを追加しますか？ このフィルターは斑点のパスを追加しません。元のブラウザーテストでは、六つのサンプルすべてに、同一のdデータを持つ一つのパスが残りました。フィルターが変えたのは描画上の表面です。

どのグレイン設定から始めるべきですか？ 元の葉の例では、fractalNoise、baseFrequency 0.65、2オクターブ、シード8、黒のオーバーレイのアルファ乗数0.28から始めてください。実際の表示サイズで比較し、設定は一つずつ調整します。

グレイン効果をカット用ファイルとして使えますか？ 生成したテクスチャは、編集可能なカット用形状ではありません。フィルターなしのパスマスターを別に残し、実際のカット手順で形状を確認してください。

出典

1. MDN：feTurbulence — ノイズ生成とプリミティブのサブ領域。
2. W3C：フィルタープリミティブツリー — SourceGraphic、SourceAlpha、フィルターの画像処理。
3. MDN：feColorMatrix — 色とアルファの行列操作。
4. MDN：feComposite — in演算子による範囲制限。
5. MDN：baseFrequency — 一軸と二軸の周波数値。
6. MDN：numOctaves — ノイズの詳細レイヤー。
7. MDN：filter — フィルター領域の属性。

ウェブイラスト用に、ラスターから復元したきれいなマスターが必要なら、画像からベクターへの変換から始め、パスを確認して、別の表示用コピーにグレインを加えてください。