> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions. # SVGのグレインテクスチャ：ノイズを図形の内側に収める > feTurbulenceでSVGにグレインを加え、SourceAlpha内に単色ノイズを制限。二つのサイズで調整し、別の用途に備えてきれいなパスマスターを保管します。 Source: https://perfectvector.com/ja/blog/svg-feturbulence-grain Language: ja Author: Irene Kim Published: 2026-10-01T08:00:00+09:00 Updated: 2026-10-01T08:00:00+09:00 SVGイラストにグレインを加えるには、`feTurbulence`でノイズを生成し、薄い単色のオーバーレイに変えてから、`SourceAlpha`の内側で合成します。それを`SourceGraphic`の上に重ねることで、元の塗りを見えるままにします。これにより、アートワークのパス形状を変えずに、描画上のテクスチャを加えられます。 ノイズのプリミティブだけでは、別の結果になります。図形の輪郭に沿うのではなく、フィルタープリミティブのサブ領域を埋めるためです。葉が長方形のノイズ領域に変わるのは、そのためです。[MDNのfeTurbulenceリファレンス](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feTurbulence)に、この動作が記載されています。 ウェブイラストでは、テクスチャ付きの表示用バージョンと、きれいなマスターが役立つ納品物です。このフィルターで作られる粒状感は、編集可能な点やカット用輪郭の集合ではありません。 ## 図形と表面の効果を分ける まず、グレインなしですでに正しく見える、塗り付きの単純なパスから始めます。効果を加える前に、輪郭、隙間、色を修正してください。フィルターでその形状を修復することはできません。 次の三つの状態で、境界の問題を説明できます。 | バージョン | フィルターの出力 | 使う場面 | | -------- | -------------------------- | ---------------------- | | 効果なしの図形 | 元の塗り付きパス | 編集と、きれいなマスター | | ノイズのみ | フィルター領域内に生成した長方形の画像 | 図柄の納品ではなく、ノイズソースの確認 | | 図形内のグレイン | 元のアートワークと、そのアルファで制限した単色ノイズ | ブラウザーに表示するテクスチャ付きバージョン | **境界が重要です** ![きれいなコーラル色の葉、葉の外にはみ出すグレイン、鮮明な葉のシルエット内に収まったグレインのイラスト](https://perfectvector.com/blog/svg-feturbulence-grain/grain-boundary.webp) *模式図：ノイズをシルエットに収めることで、図形はきれいなまま保たれます。この概念図は、SVGレンダラーのスクリーンショットやベクター化の結果ではありません。* `SourceGraphic`は、フィルターを適用する要素を提供します。`SourceAlpha`は、そのアルファチャンネルを提供します。フィルターはアートワークの画像に対して処理を行い、パスコマンドを書き換えません。これらの入力とフィルターグラフは、[W3CのFilter Effects仕様](https://drafts.csswg.org/filter-effects/#FilterPrimitiveTree)で定義されています。 元のアートワークに透明な部分がある場合は、その部分も収まる範囲に影響します。SourceAlphaは、推測した外側のバウンディングボックスではなく、実際に描画された不透明度に従います。 ## SVGグレインの完全な例をコピーする これを`.svg`ファイルとして保存し、ブラウザーで開きます。独自の葉のパス、決定的なノイズシード、暗いオーバーレイ、明示的な範囲制限の処理が含まれています。斜めの開口部はパスの一部なので、テクスチャ付きの版でも透明のまま残ります。 ```xml ``` フィルターは四つの処理を行います。 1. `feTurbulence`でノイズを作り、`noise`と名付けます。 2. 行列で赤、緑、青をゼロに設定します。最後の行はノイズのアルファに`0.28`を掛け、`ink`という薄い黒のオーバーレイを作ります。 3. `operator="in"`を指定した`feComposite`が、`SourceAlpha`のある場所にオーバーレイを残します。 4. `feMerge`が元のアートワークを先に描き、その上に範囲を制限したオーバーレイを描きます。 [MDNのfeColorMatrixリファレンス](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feColorMatrix)では、5列の行列が色とアルファを変換する仕組みを説明しています。ここで変わるのはノイズ画像であり、葉の塗りではありません。[MDNのfeCompositeリファレンス](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feComposite)では、オーバーレイを二つ目の入力に制限する`in`操作を説明しています。 `0.28`はこのコーラル色の葉での出発点であり、あらゆるグレインに使える万能の設定ではありません。テクスチャでアートワークがくすむ場合は下げ、予定の表示サイズでグレインが消える場合は上げてください。黒のオーバーレイによる粒状感は、塗りを暗くします。黒い図柄に、目に見える明るい斑点を作ることはできません。 既存のアートワークの色変更に使う色とアルファの操作については、別の[feColorMatrixガイド](https://perfectvector.com/ja/blog/svg-fecolormatrix)を参照してください。既存の透明な縁を硬くする方法は、[SVGのアルファしきい値](https://perfectvector.com/ja/blog/svg-alpha-threshold)で説明しています。どちらの操作も、ここで使う生成ノイズソースは提供しません。 ## 実際に見られるサイズで結果を確認する 元のパスから、フィルターなし、ノイズのプリミティブだけを含むフィルター付き、上記のグレインを内側に制限する完全なグラフ付き、という三つの版を作りました。同じ`0 0 200 200`のviewBoxを使い、Chromeで**120 × 120**と**360 × 360 CSSピクセル**の描画結果を確認しました。 | 確認 | 120ピクセル版 | 360ピクセル版 | | --------- | ------------------- | ----------------------- | | 効果なしのマスター | 滑らかなコーラル色の葉と透明な開口部 | 同じ輪郭と開口部 | | ノイズのみ | 長方形のノイズが見える図柄に置き換わる | 長方形のノイズが葉のシルエットの外にも見える | | 図形内のグレイン | 葉の内側に薄いテクスチャ | テクスチャがより見え、開口部と周囲は透明のまま | ブラウザーのDOMには、どのサンプルにも一つのパスがありました。六つの`d`属性はすべて同一でした。これがこの例の範囲です。描画された表面は変わりましたが、斑点のパスは追加されていません。独自に作成したブラウザーテスト用ファイルであり、PerfectVectorやネイティブのベクターエディターの出力ではありません。 大きなプレビューは効果の確認に役立ちますが、アートワークが見やすさを保っているかを決めるのは小さい版です。両方のサイズを確認してください。同じviewBoxのまま表示サイズを大きくすると、テクスチャの見かけの大きさも変わります。一つのプレビューがすべての用途を代表するとは考えないでください。 ## 設定を一つずつ変えてグレインを調整する ウェブカード用の小さなイラストなら、例の値から始めます。その後、一つのパラメーターを変え、同じ二つの表示サイズで比較し、好みの版のコピーを残してください。 | 設定 | 決めること | 実際の確認 | | --------------- | --------------------- | ---------------------------------- | | `baseFrequency` | SVG座標上の変化を粗くするか細かくするか | `0.25`と`0.65`を比較し、実際の表示サイズで確認する | | `numOctaves` | ノイズの細部を何層重ねるか | 詳細を増やす前に`1`と`2`を比較する | | `seed` | どのノイズの実現値を使うか | ほかの設定を比較する間は固定する | | 行列のアルファ乗数 | 黒のオーバーレイが塗りを暗くする強さ | 同じアートワークで`0.15`と`0.28`を比較する | | フィルター領域 | フィルターグラフが使える長方形 | アルファによる範囲制限の代わりに長方形を使わず、出力の欠けを修正する | `baseFrequency`には、両軸共通の一つの値か、水平方向と垂直方向の二つの値を指定できます。[MDNのbaseFrequencyリファレンス](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/baseFrequency)に、この違いが記載されています。この葉では一つの値から始めてください。異なる値にするのは、方向性のあるテクスチャを作るための意図的な選択です。 `numOctaves`は、[MDNのnumOctavesリファレンス](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/numOctaves)で説明されているように、ノイズのオクターブ数を制御します。オクターブの追加は、ベクターパスの追加ではありません。必要なサイズで見える表面がよくなる場合だけ使ってください。 この例は`color-interpolation-filters="sRGB"`を明示的に設定しています。候補を比較する間はこの設定を変えず、色処理の変化がグレインの比較に混ざらないようにしてください。 ## 長方形、塗りの消失、汚れた縁を修正する **テクスチャが長方形の領域になる。** フィルターの最終出力を確認します。`feTurbulence`で終わっている場合は、ノイズ画像を返しています。行列、`SourceAlpha`との合成、マージを元に戻してください。フィルターの長方形を広げるだけでは、制限されていないノイズの場所が増えるだけです。 **葉の色が消える。** 最初のマージノードが`SourceGraphic`を使っているか確認してください。`inside`だけを最終結果にすると、元のコーラル色の塗りではなく、暗いオーバーレイだけが含まれます。名前を付けた各`result`と各`in`参照のつづりや大文字小文字も確認します。 **透明な開口部にノイズが残る。** 合成の二つ目の入力が、長方形のノイズや不透明な背景ではなく、`SourceAlpha`であることを確認します。テクスチャを付けたいアートワークにフィルターを適用してください。フィルターをかけるグループに不透明な背景を含めると、アルファ入力が変わります。 **出力の一部が切れる。** フィルターの`x`、`y`、`width`、`height`を確認します。[MDNのfilterリファレンス](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/filter)で説明しているように、これらは利用可能なフィルター領域を定義します。例では少し余白を設けています。領域を広げても、範囲制限の処理が抜けている問題は修復できず、別のコンテナーによる切り抜きも直りません。 **小さいアートワークが濁って見える。** まずオーバーレイのアルファを下げ、その後で周波数とオクターブ数を比較します。それでもテクスチャがシルエットを損なう場合は、そのサイズではきれいな版を渡してください。 ## 納品用にきれいなマスターを残す フィルターなしのマスターを作るには、パスから`filter="url(#grain)"`を削除し、不要になったフィルター定義を取り除きます。パスの`d`、塗り、viewBoxは保持してください。そのファイルを別に開き、葉と開口部が元のきれいな版と一致することを確認します。 ウェブアプリでは、実際に使うブラウザーと正確な埋め込み方法で、テクスチャ付きの版を確認してください。このインラインSVGを一つのページで繰り返す場合は、各フィルターに固有のIDを付け、`url(#...)`参照を更新します。独立したこの例では、インスタンスが一つなのでIDも一つです。 正確なラスターの見た目が必要な利用先には、必要なサイズでラスタープレビューを書き出し、その利用先で確認します。編集可能またはカット可能な形状が必要な手順には、きれいなパスを渡し、グレインは表示効果だと伝えてください。フィルターノイズをベクターの斑点と説明したり、後工程のエディター、PDF書き出し、カッターが再現すると約束したりしないでください。実際の利用先でテストします。 意図的に一つずつ編集できる斑点が必要な場合は、別の形状制作になります。修正方針も決める必要があります。テクスチャを細かな輪郭の塊にトレースする前に、[SVGのノードが多すぎる理由](https://perfectvector.com/ja/blog/svg-too-many-nodes)を確認してください。ラスターの絵画から粒状感を保つのは別の出発点で、[水彩画からベクターへの変換](https://perfectvector.com/ja/blog/watercolor-to-vector)で扱っています。 ## ベクター化が役立つ場面 きれいな図柄がPNGやJPGでしか残っていない場合は、ブラウザーフィルターを加える前に、[その元画像を編集可能なSVGアートワークに変換](https://perfectvector.com/ja/image-to-vector)します。まず、きれいな版で復元したシルエットと開口部を確認してください。PerfectVectorがラスターからベクターへの段階を提供し、このガイドの手続き的なグレイングラフは、その後に加える別のSVG効果です。 パスベースのマスターがすでにありますか。そのまま使ってください。フィルターを使うために二度目の変換は必要ありません。必要なら、[画像ベクター化ガイド](https://perfectvector.com/ja/blog/what-is-image-vectorization)で元データの復元段階を確認できます。 ## よくある質問 **feTurbulenceが図形に沿わず長方形を作るのはなぜですか？** ノイズはフィルタープリミティブのサブ領域を埋めます。SourceAlphaの内側で合成し、SourceGraphicの上に重ねることで、塗りを保ちながらオーバーレイをアートワーク内に制限してください。 **SVGグレインはパスにノードを追加しますか？** このフィルターは斑点のパスを追加しません。元のブラウザーテストでは、六つのサンプルすべてに、同一のdデータを持つ一つのパスが残りました。フィルターが変えたのは描画上の表面です。 **どのグレイン設定から始めるべきですか？** 元の葉の例では、fractalNoise、baseFrequency 0.65、2オクターブ、シード8、黒のオーバーレイのアルファ乗数0.28から始めてください。実際の表示サイズで比較し、設定は一つずつ調整します。 **グレイン効果をカット用ファイルとして使えますか？** 生成したテクスチャは、編集可能なカット用形状ではありません。フィルターなしのパスマスターを別に残し、実際のカット手順で形状を確認してください。 ## 出典 1. [MDN：feTurbulence](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feTurbulence) — ノイズ生成とプリミティブのサブ領域。 2. [W3C：フィルタープリミティブツリー](https://drafts.csswg.org/filter-effects/#FilterPrimitiveTree) — SourceGraphic、SourceAlpha、フィルターの画像処理。 3. [MDN：feColorMatrix](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feColorMatrix) — 色とアルファの行列操作。 4. [MDN：feComposite](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feComposite) — in演算子による範囲制限。 5. [MDN：baseFrequency](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/baseFrequency) — 一軸と二軸の周波数値。 6. [MDN：numOctaves](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/numOctaves) — ノイズの詳細レイヤー。 7. [MDN：filter](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/filter) — フィルター領域の属性。 ウェブイラスト用に、ラスターから復元したきれいなマスターが必要なら、[画像からベクターへの変換から始め](https://perfectvector.com/ja/image-to-vector)、パスを確認して、別の表示用コピーにグレインを加えてください。 ## Explore - [Read the HTML article](https://perfectvector.com/ja/blog/svg-feturbulence-grain) - [FontForgeにSVGを読み込む：描いた図形をグリフの輪郭へ](https://perfectvector.com/ja/blog/fontforge-import-svg.md) - [ベクタートレースの品質を評価する：12点の採点表](https://perfectvector.com/ja/blog/evaluate-vector-trace-quality.md) - [Product facts](https://perfectvector.com/product-facts.md) - [FAQ](https://perfectvector.com/faq.md) - [Pricing and credits](https://perfectvector.com/pricing.md)