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)" /> 実務での使いどころ
-
カスタムビジュアルエフェクト
ぼかし、色調変更、変形を組み合わせた独自のフィルターエフェクトを画像やテキストに適用します。
注意点
- 複雑なフィルターチェーンはレンダリングパフォーマンスに大きく影響するため、アニメーション中の使用は特に注意が必要です。
アクセシビリティ
- フィルターでテキストの視認性が低下しないよう、十分なコントラスト比を維持してください。