SVG图形表现非常给力，但是对于纯粹的文本展示却很吃力，例如希望文字到边缘可以自动换行，结果SVG却很难做到，对于XHTML而言这可以说是天生的理所当然的特性，那有没有什么办法让SVG元素中的文本也如同普通的HTML和CSS那样自动换行呢，有，那就是SVG的<foreignObject>元素！
“Graphic相关”目录存档
SVG <foreignObject>简介与截图等应用
2017年08月4日，星期五HTML5 file API加canvas实现图片前端JS压缩并上传
2017年07月30日，星期日很多网站的图片上传功能都会对图片的大小进行限制，尤其是头像上传，限制5M或者2M以内是非常常见的。然后现在的数码设备拍摄功能都非常出众，一张原始图片超过2M几乎是标配，此时如果用户想把手机或相机中的某个得意图片上传作为自己的头像，就会遇到因为图片大小限制而不能上传的窘境，不得不对图片进行再处理，而这种体验其实非常不好的。如果可以在前端进行压缩，就不会有这种尺寸限制的问题，自然用户体验就可以大大提升，非常具有价值！
JS前端创建html或json文件并浏览器导出下载
2017年07月5日，星期三我们使用JS创建了一个动态的JSON数据，希望可以保存为JSON文件到本机系统，传统做法可能需要复制粘贴，而实际上，我们可以直接使用JS直接创建对应的JSON文件并让浏览器下载，而且代码和原理都出乎意料的简单。
小tips:使用canvas在前端实现图片水印合成
2017年05月17日，星期三图片合成最常见的需求有验证码图片，亦或者图片加水印等，这种实现一般都是后端实现的。
随着HTML5发展和现代浏览器的占比越来越高，我们其实也可以在前端直接进行图片的合成。优点在于，响应更快，体验更好；如果是和文字进行合成，我们可以利用客户端字体，视觉展现效果更丰富；同时展示和合成全部都是前端完成，因此更利于维护。
canvas 2D炫酷动效的实现套路和需要的技术积累
2017年03月18日，星期六目前在web领域，基本上看到那些酷酷的2d动效，都是canvas实现的，flash已经基本上都被淘汰了，canvas效果的实现，无需安装任何插件，IE9及其以上浏览器支持，至少在移动端，大家可以放心大胆使用，甚至webGL 3D效果都可以尝鲜。
无论是雪花飘，星星动还是粒子飞，其canvas实现都是一样的套路…
【翻译】借助SVG实现背景透明JPG图片
2017年03月9日，星期四人物往往色彩丰富，有时候会遇到需要背景透明的场景，结果PNG24图片尺寸太大，PNG8质量太差，JPG尺寸最小效果还好，但是背景又不透明，有没有什么办法就有JPG的小尺寸好效果，同时背景透明呢？本文的处理技巧可能会对你解决相关问题提供一些思路。
canvas图形绘制之星空、噪点与烟雾效果
2016年06月2日，星期四本文的3个效果都是源自我最近做的几个真实的项目，是canvas领域基本入门的一些效果。代码我都专门重新梳理了下，必要注释也都加上去了，方便大家的学习……
SVG精简压缩工具svgo简介和初体验
2016年02月29日，星期一SVG文件，尤其从各种变假期导出的SVG，通常包含大量的无用信息，例如编辑器源信息，注释，因此元素，默认或者非最优值，以及其他一些不会影响渲染结果的可以移除或转换的内容。
有没有什么工具可以简化这些信息呢，有，不妨试试本文介绍的svgo.
CSS或JS实现gif动态图片的停止与播放
2015年12月5日，星期六如题，本文介绍如何使用CSS或者JS等前端方法实现代码控制gif图片的暂停或者播放。一如既往，有demo有截图还有必要的源代码展示，更关键的是，本文gif比较多……
理解SVG transform坐标变换
2015年10月10日，星期六
本文是SVG学习基本且重要的知识点。本文相当详尽的讲解了SVG transform变换的语法、特点以及一些实际的处理等等。有相当多的截图，源代码展示，还有必要的demo，对了，还有很多gif示意。如果你要学习SVG, 本文内容一定会对你的学有所帮助的。
我的应用
我的应用