◎SVG要素（タグ）の記述について（その４）

代表的な「ぼかし効果」「ドロップシャドー」「グラデーション」についてまとめて見ました。
ＳＶＧ要素（タグ）で使用出来るフィルターの一覧は、下記の通りとなります。

○使用出来るフィルター一覧
　feBlend – イメージ合成用フィルタ
　feColorMatrix – 色変換用フィルタ
　feComponentTransfer
　feComposite
　feConvolveMatrix
　feDiffuseLighting
　feDisplacementMap
　feFlood
　feGaussianBlur
　feImage
　feMerge
　feMorphology
　feOffset – ドロップシャドー用フィルタ
　feSpecularLighting
　feTile
　feTurbulence
　feDistantLight – ライティング用フィルタ
　fePointLight – ライティング用フィルタ
　feSpotLight – ライティング用フィルタ

１、ぼかし効果
　　<feGaussianBlur>要素（タグ）は、ぼかし効果を発生させるために使用します。

２、ドロップシャドー
<feOffset>要素（タグ）は、ドロップシャドーを発生させるために使用します。
例では、feOffset/feColorMatrix/feGaussianBlur/feBlendを使用しています。

３、グラデーション
　　<linearGradient>要素（タグ）は、線形グラデーションを定義するために使用します。
例では、水平･垂直･傾斜のグラデーションを定義しています。
　　<radialGradient>要素（タグ）は、円形のグラデーションを定義するために使用します。

↓以下がテストのソースサンプルです。

▼HTML

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<!-- ぼかし効果 -->
  <defs>
    <filter id="SVG1" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="yellow" stroke-width="3" fill="green" filter="url(#SVG1)" />
<!-- ドロップシャドー -->
  <defs>
    <filter id="SVG2" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="10" dy="10" />
      <feColorMatrix result = "matrixOut" in = "offOut" type = "matrix" values = "0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0"/>
      <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <rect x="100" y="100" width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#SVG2)" />
<!-- 水平グラデーション -->
  <defs>
    <linearGradient id="SVG3" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="yellow" stop-opacity="1" />
      <stop offset="100%" stop-color="GREEN" stop-opacity="1" />
    </linearGradient>
  </defs>
  <rect x="200" y="200" width="90" height="90" fill="url(#SVG3)" />
<!-- 垂直グラデーション -->
  <defs>
    <linearGradient id="SVG4" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="yellow" stop-opacity="1" />
      <stop offset="100%" stop-color="GREEN" stop-opacity="1" />
    </linearGradient>
  </defs>
  <rect x="300" y="300" width="90" height="90" fill="url(#SVG4)" />
<!-- 傾斜グラデーション -->
  <defs>
    <linearGradient id="SVG5" x1="100%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="yellow" stop-opacity="1" />
      <stop offset="100%" stop-color="GREEN" stop-opacity="1" />
    </linearGradient>
  </defs>
  <rect x="400" y="400" width="90" height="90" fill="url(#SVG5)" />
<!-- 円形グラデーション -->
  <defs>
    <radialGradient id="SVG6" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="yellow" stop-opacity="1" />
      <stop offset="100%" stop-color="GREEN" stop-opacity="1" />
    </radialGradient>
  </defs>
  <rect x="500" y="500" width="90" height="90" fill="url(#SVG6)" />

</svg>

デモページは、こちら