SVGフィルターエフェクト：高度なビジュアルエフェクトの作成
ぼかし、影、カラーエフェクト、複雑なビジュアル処理のためのSVGフィルターをマスターしましょう。フィルタープリミティブと創造的な組み合わせの完全ガイド。
Founder of VectoSolve
Self-taught developer, founder and sole developer of VectoSolve since 2024. He builds the conversion engine and the cutting, embroidery and 3D printing exports.
How this article was made: drafted with AI assistance, then edited and fact-checked before publication. About the author
Key Takeaways
- SVGフィルターはぼかし、影、歪みなどのGPUアクセラレーションされたビジュアルエフェクトをブラウザ内で直接適用する
- フィルタープリミティブ（feGaussianBlur、feColorMatrix、feTurbulenceなど）をチェーンして複雑なエフェクトを作成できる
- すりガラス、ネオングロー、エンボスなどのクリエイティブレシピは、シンプルなフィルタープリミティブの組み合わせで構築される
- パフォーマンスは大きく異なる — feColorMatrixは軽量だがfeTurbulenceは計算負荷が高い
- シンプルなエフェクトにはCSSフィルターをフォールバックとして使用し、SVGフィルターは高度なコンポジションに温存する
SVGフィルターの力
SVGフィルターはラスター画像なしで洗練されたビジュアルエフェクトを実現します。シンプルな影から複雑な歪みまで、フィルターはベクターグラフィックスを強力に変換します。
フィルターの基本
フィルター構造
<defs>
<filter id="myFilter">
<!-- フィルタープリミティブをここに -->
</filter>
</defs>
<rect filter="url(#myFilter)" .../>フィルター領域
フィルター境界の制御：
<filter id="f" x="-20%" y="-20%" width="140%" height="140%">
<!-- 要素の外側にフィルター領域を拡張 -->
</filter>Pro Tip: ぼかしや影のエフェクトを使用する際は、常にフィルター領域を拡張してください（例：x="-20%"）。フィルター出力がクリップされて見える場合、フィルター領域が小さすぎます。
一般的なフィルターエフェクト
ぼかし（feGaussianBlur）
<filter id="blur">
<feGaussianBlur stdDeviation="5"/>
</filter>可変ぼかし：
<!-- 水平ぼかしのみ -->
<feGaussianBlur stdDeviation="10 0"/>
<!-- 垂直ぼかしのみ -->
<feGaussianBlur stdDeviation="0 10"/>ドロップシャドウ（feDropShadow）
シンプルな影：
<filter id="shadow">
<feDropShadow dx="3" dy="3" stdDeviation="2" flood-opacity="0.5"/>
</filter>カスタムシャドウ
より細かい制御：
<filter id="custom-shadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur"/>
<feOffset in="blur" dx="4" dy="4" result="offset"/>
<feFlood flood-color="#000" flood-opacity="0.5" result="color"/>
<feComposite in="color" in2="offset" operator="in" result="shadow"/>
<feMerge>
<feMergeNode in="shadow"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>A Full Year of Conversions for $49
Starter Annual: 25 conversions every month, $49 for the whole year. That is about $4.08 a month · Cancel anytime
Get the Annual Dealカラーエフェクト
カラーマトリックス（feColorMatrix）
グレースケール変換：
<filter id="grayscale">
<feColorMatrix type="saturate" values="0"/>
</filter>セピアトーン：
<filter id="sepia">
<feColorMatrix type="matrix"
values="0.393 0.769 0.189 0 0
0.349 0.686 0.168 0 0
0.272 0.534 0.131 0 0
0 0 0 1 0"/>
</filter>色相回転：
<filter id="hue-rotate">
<feColorMatrix type="hueRotate" values="90"/>
</filter>カラー調整
明るさ/コントラスト：
<filter id="bright">
<feComponentTransfer>
<feFuncR type="linear" slope="1.5" intercept="0"/>
<feFuncG type="linear" slope="1.5" intercept="0"/>
<feFuncB type="linear" slope="1.5" intercept="0"/>
</feComponentTransfer>
</filter>「SVGフィルターはブラウザのPhotoshopです — 賢く重ねれば、通常は重い画像編集ソフトウェアが必要なエフェクトを作成できます。」 - Sara Soueidan、SVGエキスパート
変位と歪み
タービュランス
ノイズの作成：
<filter id="turbulence">
<feTurbulence type="turbulence"
baseFrequency="0.05"
numOctaves="2"/>
</filter>変位マップ
パターンによる歪み：
<filter id="displace">
<feTurbulence type="turbulence"
baseFrequency="0.02"
numOctaves="3"
result="noise"/>
<feDisplacementMap in="SourceGraphic"
in2="noise"
scale="30"
xChannelSelector="R"
yChannelSelector="G"/>
</filter>ライティングエフェクト
ディフューズライティング
3D風ライティング：
<filter id="diffuse">
<feDiffuseLighting lighting-color="#white" surfaceScale="5">
<fePointLight x="100" y="100" z="200"/>
</feDiffuseLighting>
</filter>スペキュラーライティング
光沢のあるハイライト：
<filter id="specular">
<feSpecularLighting specularConstant="1"
specularExponent="30"
lighting-color="white"
surfaceScale="5">
<fePointLight x="150" y="60" z="200"/>
</feSpecularLighting>
</filter>Free SVG Tools for Crafters
Design Checker · Color Separator · Mat Preview · Offset Generator · Text to SVG
Check Your SVG Freeフィルターの組み合わせ
マージ操作
結果の重ね合わせ：
<filter id="glow">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"/>
<feMerge>
<feMergeNode in="blur"/>
<feMergeNode in="blur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>コンポジット操作
オペレータでの組み合わせ：
<filter id="cutout">
<feImage href="mask.svg" result="mask"/>
<feComposite in="SourceGraphic"
in2="mask"
operator="in"/>
</filter>クリエイティブレシピ
すりガラス
<filter id="frosted">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"/>
<feColorMatrix in="blur" type="saturate" values="1.5" result="saturate"/>
<feTurbulence type="fractalNoise" baseFrequency="0.1" result="noise"/>
<feDisplacementMap in="saturate" in2="noise" scale="5"/>
</filter>ネオングロー
<filter id="neon">
<feFlood flood-color="#ff00ff" result="flood"/>
<feComposite in="flood" in2="SourceGraphic" operator="in" result="mask"/>
<feGaussianBlur in="mask" stdDeviation="5" result="blur"/>
<feMerge>
<feMergeNode in="blur"/>
<feMergeNode in="blur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>エンボスエフェクト
<filter id="emboss">
<feConvolveMatrix
order="3"
kernelMatrix="-2 -1 0
-1 1 1
0 1 2"/>
</filter>
フィルターによるアニメーション
アニメーションぼかし
<filter id="animated-blur">
<feGaussianBlur stdDeviation="0">
<animate attributeName="stdDeviation"
values="0;10;0"
dur="2s"
repeatCount="indefinite"/>
</feGaussianBlur>
</filter>ダイナミックタービュランス
<feTurbulence baseFrequency="0.02">
<animate attributeName="baseFrequency"
values="0.01;0.05;0.01"
dur="5s"
repeatCount="indefinite"/>
</feTurbulence>A Full Year of Conversions for $49
Starter Annual: 25 conversions every month, $49 for the whole year. That is about $4.08 a month · Cancel anytime
Get the Annual Dealパフォーマンスの考慮事項
パフォーマンスへの影響
フィルターパフォーマンス：
feGaussianBlur：重い（半径に依存）
feColorMatrix：軽い
feTurbulence：非常に重い
feDisplacementMap：重い
チェーンフィルター：累積的最適化のヒント
- フィルター領域を最小化する
- ぼかし半径を縮小する
- チェーンエフェクトを制限する
- 静的フィルターをキャッシュする
- 可能な場合はCSSフィルターを使用する
ぼかし、グレースケール、ドロップシャドウなどのシンプルなエフェクトには、CSSのfilterがSVGフィルターよりも大幅に高速です。ハードウェアアクセラレーションされたコンポジティングを活用するためです。CSSでは再現できないエフェクトにSVGフィルターを温存してください。
CSSフィルターの代替
可能な場合はCSSを使用：
.blurred {
filter: blur(5px);
}
.grayscale {
filter: grayscale(100%);
}ブラウザ互換性
サポート状況
広範なサポート：
- feGaussianBlur
- feColorMatrix
- feOffset
- feMerge
可変サポート：
- feDisplacementMap
- feTurbulence
- feDiffuseLightingフォールバック戦略
.element {
/* フォールバック */
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
@supports (filter: url(#shadow)) {
.element {
box-shadow: none;
filter: url(#shadow);
}
}まとめ
SVGフィルターはCSSだけでは不可能な洗練されたエフェクトを実現します。計算負荷は高いものの、ビジュアル処理を正確に制御できます。インパクトのあるエフェクトに効果的に使用し、常にパフォーマンスを考慮してフォールバックを提供してください。
| フィルタープリミティブ | エフェクト | パフォーマンスコスト |
|---|---|---|
| feGaussianBlur | ソフトぼかし / すりガラス | 中（GPUアクセラレーション） |
| feColorMatrix | カラーシフト、彩度低下 | 低 |
| feTurbulence | ノイズ、有機的テクスチャ | 高（ピクセルレベル計算） |
| feDisplacementMap | 歪み、波紋エフェクト | 高 |
| feDropShadow | ドロップシャドウ | 低〜中 |
Free SVG Tools for Crafters
Design Checker · Color Separator · Mat Preview · Offset Generator · Text to SVG
Check Your SVG Free参考資料・関連リンク
- MDN Web Docs: SVGフィルターエフェクト — すべてのSVGフィルタープリミティブとその属性の詳細リファレンス
- W3C SVG 2: フィルターエフェクト — SVGフィルターパイプラインとコンポジティングモデルの公式仕様
- CSS-Tricks: SVGフィルター — クリエイティブなSVGフィルター組み合わせのビジュアル例とレシピ
- Smashing Magazine: SVGフィルター — プロダクション向けビジュアルエフェクトのためのフィルタープリミティブチェーンの上級チュートリアル