使用過 Photoshop 都知道，模糊就跟斯斯一樣多種，其中的一種就是「高斯模糊」，同樣的，在 illustrator 裏頭也有高斯模糊，因此 SVG 也就擁有高斯模糊的能力！( oxxostudio.tw 同步發表：SVG 研究之路 (13) - filter - feGaussianBlur )

以往我們單純用網頁製作「假」的高斯模糊，常常是將十幾二十張圖片更改透明度與些微的座標差距，來做出類似的效果 ( 可以參考這個我以前做的效果 )，這個方式其實在一些 3D 軟體做景深渲染的時候也常常使用，不過這種方法在網頁上必須撰寫一些程式才能辦到。今天有了 SVG 的 feGaussianBlur 濾鏡，我們只需要下幾個指令就能夠達到模糊的效果，且還能夠使用程式做互動的反應，是相當方便的喔！

feGaussianBlur 應該算是 SVG filter 裏頭最簡單的濾鏡，因為它只有一個參數需要注意：stdDeviation，這也是控制模糊程度的參數，數字越大越模糊，數字為零則是圖片原本的狀態，在這邊有一個比較需要注意的地方，就是要記得設定 filter 的 filterUnits 為 userSpaceOnUse ，因為預設值是會讓 filter 跟隨著套用該 filter 的物件跑，所以要記得設定成跟隨整個 SVG space。

<defs>
<filter width="200" height="200" x="0" y="0" id="blur" filterUnits="userSpaceOnUse">
  <feGaussianBlur stdDeviation="1" />
</filter>
</defs>
<rect x="30" y="30" width="70" height="70" fill="#a00" filter=url("#blur") />

<defs>
<filter width="200" height="200" x="0" y="0" id="blur" filterUnits="userSpaceOnUse">
  <feGaussianBlur stdDeviation="5" />
</filter>
</defs>
<rect x="30" y="30" width="70" height="70" fill="#a00" filter=url("#blur") />

<defs>
<filter width="200" height="200" x="0" y="0" id="blur" filterUnits="userSpaceOnUse">
  <feGaussianBlur stdDeviation="10" />
</filter>
</defs>
<rect x="30" y="30" width="70" height="70" fill="#a00" filter=url("#blur") />

feGaussianBlur 的 stdDeviation 還有一個鮮為人知且相當好用的設定，就是可以撰寫兩個數值在裏頭，分別代表水平與垂直方向的模糊程度。

<filter width="200" height="200" x="0" y="0" id="blur1" filterUnits="userSpaceOnUse" >
  <feGaussianBlur stdDeviation="1 15"/>
</filter>
</defs>
<rect x="30" y="30" width="70" height="70" fill="#ff4500" filter=url("#blur1") />

<filter width="200" height="200" x="0" y="0" id="blur1" filterUnits="userSpaceOnUse" >
  <feGaussianBlur stdDeviation="15 1"/>
</filter>
</defs>
<rect x="30" y="30" width="70" height="70" fill="#ff4500" filter=url("#blur1") />

理解了 feGaussianBlur的用法之後，我們就可以利用它來做一些與眾不同的變化，例如：

1. 不同的景深:
   

2. 陰影 :
   陰影其實說好做很好做，就做一個黑色的色塊讓它模糊即可，不過這裡用了一個比較有趣的方法，就是讓濾鏡套用在物件的 Aplha 色版 ( in="SourceAlpha" )，如此一來也可以做出陰影。
   

3. 不同形狀的陰影:
   

陰影的做法萬變不離其宗，跟我們以往使用 photoshop 和 illustrator 總是幾分類似，畢竟身為設計師，最拿手的也應該就是利用光影的變化來欺騙眼睛，學會了 SVG 的 feGaussianBlur，相信一定能做出更多有趣的效果。