2014年10月22日

SVG 完整教學 31 天

Posted by oxxo on 10/22/2014 01:17:00 上午
完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201410/svg-tutorial.html

摘要：
以下是我所撰寫的 SVG 完整教學，從一開始的入門，到中期的控制 SVG，到後期的 SVG 濾鏡，看完這三十一篇之後，相信對於 SVG 會有非常完整的認識，應用也會更加得心應手。

2014年10月21日

SVG 研究之路 (30) - filter - feConvolveMatrix

Posted by oxxo on 10/21/2014 12:03:00 上午
完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201410/svg-30-filter-feConvolveMatrix.html

摘要：
之前有介紹過模糊的濾鏡 ( SVG 研究之路 (13) - filter - feGaussianBlur )，既然有模糊濾鏡，為什麼沒有銳利化的濾鏡呢？其實是有的，在 SVG 如果說要進行銳利化，便要使用 feConvolveMatrix 這個濾鏡來實現，而且 feConvolveMatrix 不僅能進行銳利化，同時它也可以進行模糊的動作，不過因為是針對每個像素與四周像素進行矩陣運算，來計算出模糊或銳利，所以要寫的數字和程式相較於單純的 feGaussianBlur 濾鏡會複雜不少，因此如果有模糊的需求，還是直接使用 feGaussianBlur 吧！以下就來介紹一下 feConvolveMatrix 這個神奇的濾鏡。

2014年10月10日

SVG 研究之路 (29) - filter - 水波效果

Posted by oxxo on 10/10/2014 02:36:00 下午
完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201410/svg-29-filter-water-ripple.html

摘要：
在 SVG 研究之路 (28) - filter - feDisplacementMap 我們深入的認識了 feDisplacementMap 這個濾鏡，也做出了水波和國旗皺褶的效果，這篇將繼續針對 feDisplacementMap 做一些補充，同時也利用 SVG 的 animte 來做出水波的動畫，畢竟水波就是要會動才逼真呀！

2014年10月9日

SVG 研究之路 (28) - filter - feDisplacementMap

Posted by oxxo on 10/09/2014 02:35:00 下午
完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201410/svg-28-filter-feDisplacementMap.html

摘要：
在玩 photoshop 的時候，我時常會使用一個名為「移置」的特效，這個特效說難不難，可以參考我在 2008 年寫的的教學：photoshop：國旗飄揚皺折，在 Photoshop 裏頭這個特效的基本原理，就在於利用 Alpha 色版的深度，讓圖片的像素產生不同的位移情形，在許多的 AfterEffect 特效或 3D 效果裏頭，也都會使用類似的作法，來讓貼圖更吻合表面。

2014年10月6日

SVG 研究之路 (27) - filter - feImage

Posted by oxxo on 10/06/2014 12:42:00 上午
完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201410/svg-27-filter-feImage.html

摘要：
feImage 是 SVG filter 裏頭最簡單的濾鏡，不過為什麼要用一篇文章專門介紹它呢？就是因為 feImage 可以幫助我們更實際的了解 filter 的原理，除此之外，這篇文章也會搭配另外一個最簡單的濾鏡 feTile ( 到底有幾個最簡單呀 ) 藉由實際的範例來深入了解 SVG filter 的博大精深吧！
訂閱： 文章 (Atom)