借助SVG feDisplacementMap滤镜可以实现非常有意思的水波效果。本文深入介绍feDisplacementMap滤镜的作用原理，同时展示其在实际项目中可以大规模实际应用的潜力。
“SVG相关”目录存档
深入理解SVG feDisplacementMap滤镜及实际应用
2017年12月14日，星期四照片位图转SVG矢量图片JS工具primitive.js等简介
2017年11月30日，星期四primitive是相对来说比较有名的将照片图片使用几何图形重建的工具。基于原始的这个primitive项目算法，很多开发人员拓展了Java版本，react版本等。自然也有JavaScript版本，就是本文要介绍的primitive.js。以及还会介绍其他一些位图转矢量图JS。
SVG <foreignObject>简介与截图等应用
2017年08月4日，星期五SVG图形表现非常给力，但是对于纯粹的文本展示却很吃力，例如希望文字到边缘可以自动换行，结果SVG却很难做到，对于XHTML而言这可以说是天生的理所当然的特性，那有没有什么办法让SVG元素中的文本也如同普通的HTML和CSS那样自动换行呢，有，那就是SVG的<foreignObject>元素！
【翻译】借助SVG实现背景透明JPG图片
2017年03月9日，星期四人物往往色彩丰富，有时候会遇到需要背景透明的场景，结果PNG24图片尺寸太大，PNG8质量太差，JPG尺寸最小效果还好，但是背景又不透明，有没有什么办法就有JPG的小尺寸好效果，同时背景透明呢？本文的处理技巧可能会对你解决相关问题提供一些思路。
SVG精简压缩工具svgo简介和初体验
2016年02月29日，星期一SVG文件，尤其从各种变假期导出的SVG，通常包含大量的无用信息，例如编辑器源信息，注释，因此元素，默认或者非最优值，以及其他一些不会影响渲染结果的可以移除或转换的内容。
有没有什么工具可以简化这些信息呢，有，不妨试试本文介绍的svgo.
理解SVG transform坐标变换
2015年10月10日，星期六
本文是SVG学习基本且重要的知识点。本文相当详尽的讲解了SVG transform变换的语法、特点以及一些实际的处理等等。有相当多的截图，源代码展示，还有必要的demo，对了，还有很多gif示意。如果你要学习SVG, 本文内容一定会对你的学有所帮助的。
寥寥数行SVG实现圆环loading或倒计时效果
2015年07月31日，星期五本文内容如题。有Demo有截图有帅气的源代码展示，不过没有漂亮的妹子，但是这并不会影响你的学习。
CSS3/SVG clip-path路径剪裁遮罩属性简介
2014年12月22日，星期一CSS3新增属性除了我们现在用的比较多的border-radius, box-shadow, gradient, ...之类，还有很重要的一个分支：SVG属性家族！
所谓「SVG属性家族」是指原本SVG的标签属性可以直接使用CSS设置。本文的clip-path就是其中一个属性，可以游走于SVG属性和CSS属性之前。本文中等篇幅，中等难度，丰富的源代码展示，丰富的demo页面，丰富的截图，还有必要的gif演示，总之，希望本文的内容能够对您的学习有所帮助！
SVG-Morpheus实现SVG图标图形间的补形动画
2014年12月14日，星期日如何实现矢量图形之间的过渡动画效果呢？可不可以像以前的flash那样，知道前后图形，直接创建中间的补间动画呢？有，当当当当，就是本文要介绍的SVG-Morpheus! 一如既往，有demo页面、有丰富的截图，有必要的源代码展示，不仅如此，本文还有swf效果展示， MP4视频效果展示以及gif截图效果。总之，希望本文的内容能够对您的学习有所帮助。
我的应用
我的应用