Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。
SVG Widely available

SVG filters

SVGフィルターは feGaussianBlur、feColorMatrix、feDisplacementMap などのプリミティブを組み合わせて、高度なビジュアルエフェクトを作成できます。CSSの filter プロパティから参照することで、HTML要素にも適用可能です。CSSフィルター関数では実現できない複雑なエフェクトを実装できます。

フィルター視覚効果

概要

SVGフィルターは feGaussianBlur、feColorMatrix、feDisplacementMap などのプリミティブを組み合わせて、高度なビジュアルエフェクトを作成できます。CSSの filter プロパティから参照することで、HTML要素にも適用可能です。CSSフィルター関数では実現できない複雑なエフェクトを実装できます。

対応ブラウザ

デスクトップ

Chrome 5+
Edge 12+
Safari 6+
Firefox 3+

モバイル

Chrome Android 18+
Safari iOS 6+
Firefox Android 4+

基本構文

HTML 
<filter id="blur">
  <feGaussianBlur in="SourceGraphic"
    stdDeviation="5" />
</filter>
<rect filter="url(#blur)" />

実務での使いどころ

  • カスタムビジュアルエフェクト

    ぼかし、色調変更、変形を組み合わせた独自のフィルターエフェクトを画像やテキストに適用します。

注意点

  • 複雑なフィルターチェーンはレンダリングパフォーマンスに大きく影響するため、アニメーション中の使用は特に注意が必要です。

アクセシビリティ

  • フィルターでテキストの視認性が低下しないよう、十分なコントラスト比を維持してください。

参考リンク