SVG

在推上看到Sarah Drasner用vue做的好多作品，真的好看。这是她的个人网站。她还出了SVG Animations这本书。国内好像还没有翻译。

工具：

• 查询浏览器支持情况：http://caniuse.com/#search=svg
• 图像编辑工具：
  • Sketch只有Mac版：http://www.sketchapp.com/
  • 开源软件Inkscape：https://inkscape.org/en/
  • Google有SVG-edit：
    http://svg-edit.googlecode.com/svn/branches/stable/editor/svg-editor.html
  • Draw SVG和Method Draw，后者被认为是SVG-edit更好看的分支。
• SVG图标服务：https://icomoon.io/
• 生成图像精灵或者data URI的工具是Iconizr
  为了对比data URI还是图像精灵比较适合你的项目，可以访问
  https://benfrain.com/image-sprites-data-uris-icon-fonts-v-svgs/
• GreenSock动画平台：http://greensock.com/、Velocity.js：http://julian.com/research/velocity/或者Snap.svg：http://snapsvg.io/
• 优化SVG：
  • SVGO：https://github.com/svg/svgo
  • SVGO浏览器版本，SVGOMG：https://jakearchibald.github.io/svgomg/

资料：

• 为了真正地明白视框和SVG坐标系统以及它们带来的机会，尝试阅读Sara Soueidan的文章：https://sarasoueidan.com/blog/svg-coordinate-systems/
  以及Jakob Jenkov的文章：http://tutorials.jenkov.com/svg/svg-viewport-view-box.html

• 《SVG精髓（第2版）》 ，由J. David Eisenberg和Amelia Bellamy-Royds编写。

• SVG动画（SMIL）指南，由Sara Soueidan编写（https://css-tricks.com/guide-svg-animations-smil/）。

• SVG内部媒体查询测试，由Jeremie Patonnier编写（http://jeremie.patonnier.net/experiences/svg/media-queries/test.html）。

• 现代浏览器的SVG指南（https://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html）。

• 了解SVG坐标系和变换（第一部分），由Sara Soueidan编写（https://sarasoueidan.com/blog/svg-coordinate-systems/）。

• 动手实践：SVG滤镜效果（https://testdrive-archive.azurewebsites.net/Graphics/hands-on-css3/hands-on_svg-filter-effects.htm）。

• SVG教程，由Jakob Jenkov编写（http://tutorials.jenkov.com/svg/index.html）。