SVG (Scalable Vector Graphics) のシャドウ効果は、画像やグラフィックに奥行きと立体感を加えることができます。 SVG で影効果を適用するにはさまざまな方法があります。一般的に使用されるいくつかのテクニックを次に示します。

1. <filter>要素を使用したドロップ シャドウ: <filter>要素とfeDropShadowフィルター プリミティブを使用して、ドロップ シャドウ効果を作成できます。以下に例を示します。

    XML
    <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
     <defs>
       <filter id="drop-shadow" x="0" y="0" width="150%" height="150%">
         <feOffset result="offOut" in="SourceAlpha" dx="5" dy="5" />
         <feGaussianBlur result="blurOut" in="offOut" stdDeviation="3" />
         <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
       </filter>
     </defs>
     <rect width="100" height="100" fill="#3498db" filter="url(#drop-shadow)" />
   </svg>
   

   この例では、ドロップ シャドウ フィルターが適用されたrect要素が使用されています。 dx 、 dy 、 stdDeviationなどのパラメータを調整して、影の外観を制御できます。

2. テキストのシャドウ:テキスト要素にシャドウを適用するのは簡単です。 text-shadow CSS プロパティを SVG ファイルで直接使用できます。以下に例を示します。

    XML
    <svg width="200" height="50" xmlns="http://www.w3.org/2000/svg">
     <text x="10" y="40" font-family="Arial" font-size="20" fill="#3498db" style="text-shadow: 2px 2px 5px rgba(0,0,0,0.5);">
       Hello SVG
     </text>
   </svg>
   

   text-shadowプロパティは、水平および垂直オフセット、ぼかし半径、および影の色の値を受け取ります。

3. 追加の形状を使用したカスタム シャドウ:メイン要素の背後に追加の形状を使用してカスタム シャドウを作成できます。たとえば、メイン シェイプの複製を作成し、わずかにオフセットして、影を表す色で塗りつぶします。

    XML
    <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
     <rect x="10" y="10" width="100" height="100" fill="#3498db" />
     <rect x="12" y="12" width="100" height="100" fill="rgba(0,0,0,0.5)" />
   </svg>
   

   この例では、2 番目のrect最初の 12 の単純な影として機能します。

これらのテクニックを自由に試してパラメータを調整して、SVG グラフィックスで希望の影効果を実現してください。