SVG (Scalable Vector Graphics) では、 <filter>要素とさまざまなフィルター プリミティブを使用して要素にぼかし効果を適用できます。 SVG でぼかし効果を使用するいくつかの方法を次に示します。

1. ガウスぼかし: <feGaussianBlur>フィルター プリミティブは、ぼかし効果を作成するためによく使用されます。ぼかしの量を決定する標準偏差パラメータを受け取ります。

    XML
    <filter id="blurFilter" x="0" y="0" width="100%" height="100%">
     <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
   </filter>
   
   <rect width="200" height="100" style="filter: url(#blurFilter);" />
   

   この例では、標準偏差 5 のぼかしフィルターが長方形に適用されます。

2. ブラーのカスタマイズ: x 方向と y 方向の両方のブラーを個別に制御できます。

    XML
    <filter id="customBlur" x="0" y="0" width="100%" height="100%">
     <feGaussianBlur in="SourceGraphic" stdDeviation="5 2" />
   </filter>
   
   <rect width="200" height="100" style="filter: url(#customBlur);" />
   

   ここでは、標準偏差は x 方向で 5、y 方向で 2 に設定されます。

3. フィルターの組み合わせ:複数のフィルターを組み合わせて、さまざまな効果を実現できます。たとえば、ブラーとカラー マトリックスを組み合わせると、興味深い効果を生み出すことができます。

    XML
    <filter id="combinedFilter" x="0" y="0" width="100%" height="100%">
     <feGaussianBlur in="SourceGraphic" stdDeviation="3" />
     <feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -10" />
   </filter>
   
   <rect width="200" height="100" style="filter: url(#combinedFilter);" />
   

   この例では、ぼかしとカラー マトリックスを組み合わせます。

4. ぼかしのアニメーション: CSS アニメーションを使用して、動的なぼかし効果を作成できます。

    XML
    <rect width="200" height="100" style="filter: url(#blurFilter); transition: filter 0.5s;" />
   

   フィルター プロパティに CSS トランジションを適用すると、ぼかし効果をアニメーション化できます。

5. 特定の要素にブラーを適用する: filter属性を使用してフィルターを特定の要素に適用できます。

    XML
    <circle cx="50" cy="50" r="40" fill="blue" filter="url(#blurFilter)" />
   

   この例では、指定した円のみにぼかしフィルターを適用します。

SVG グラフィックスで目的のぼかし効果を実現するには、これらのテクニックを試してください。ブラウザのサポートは異なる場合があるので、使用する機能の互換性を確認することをお勧めします。