SVG实战教程 第0章 各前端图形方案对比

「SVG实战教程」是由本人制作的一系列关于SVG从图形绘制到复杂动画实现的教程，主要刊载于我的个人博客和掘金专栏，推荐有一定SVG和前端基础的同学阅读。

这是本系列文章的开篇，在正式开始学习前，我希望先明确一个基本观念，就是绝大多数时候前端都不需要了解和手动编写SVG的，基本就是把图片导出为SVG，然后直接在<img/>标签里使用就好了的，哪怕是后续会提到的SVG动画，也更推荐使用SVGAtor的可视化界面来编辑（虽然要付费）。

所以在学习SVG的具体技术前，首先要知道到底什么时候要用SVG，接下来我会分静态图形和动画制作两个方面进行说明探讨。

静态图形

绘制静态图形前端最常使用的技术主要有CSS、Canvas和SVG。

• CSS

  CSS由于是前端三大件之一，所有开发人员都熟悉其规则，所以常常用来实现一些简单的静态图形，例如分割线、角标、箭头等。

  但是问题在于CSS最大的本职工作还是进行页面元素的样式修改，如果用来绘制图形，常常会使用一些特殊技巧，不光导致样式代码中间掺杂产生伪元素的代码，而且这些代码也通常不利于阅读。

  我的看法是CSS只用来实现一些和元素关系紧密的、简单的装饰性图形（分割线、角标） 。

• Canvas

  这里指的是主要用于绘制2D图形的Canvas API。

  由于具有极高的自由度，Canvas理论上完全可以绘制任何图形，而且也常常用来绘制基于已有图片的内容，例如个人海报、二维码等。

  但是也由于其基本API使用起来过于繁琐，所以在需要完成更复杂的逻辑时，更推荐基于Canvas二次封装的包（包括各种游戏引擎）。

  而且，由于需要使用JS来执行相关绘制方法，所以Canvas绘制图形的代码通常是和HTML代码分离的，再加上繁琐的使用过程，也导致Canvas绘图相关代码维护难度更大。

  所以，对于Canvas，我更推荐用来绘制复杂的，且最好是涉及到图片二次处理的图形（海报、二维码、图片裁剪） 。

• SVG

  SVG其实在前端日常使用各种图标时就有接触了，只不过大部分时候都是直接导出设计做好的图形来使用。

  而我使用SVG的流程也和设计类似，不是直接用代码来写SVG，而是直接使用作图软件来自己画/改图，这种直观的图形化操作界面就是使用CSS和Canvas比不了的。

  而且所有SVG代码都是封装在文件内部，不会担心代码混乱，而且当需要修改时，也可以方便地使用作图软件进行修改。

  再加上可以使用image标签来插入外部的图片（也可以直接使用base64的图片数据），使用foreignObject来插入HTML元素，SVG几乎可以说是完美的静态图形解决方案。

  不过鉴于我的实践经验不够多，可能在某些情况下SVG方案会存在问题，还是推荐只用来制作较为复杂，但是不涉及位图处理的静态图形。

动画制作

前端常见的动画实现方案从使用难度从简到难排序大概是：

1. 浏览器原生支持的动画格式，例如gif、webp；
2. 基于浏览器原生能力的，通过CSS属性控制的动画，以及使用JS控制CSS属性实现的动画；
3. 基于已制作好的SVG图形，在内部添加动画相关的控制代码；
4. 以矢量图形变换为主的方案，例如SVGA、Lottie、SVGAtor；
5. 基于MP4视频文件和Canvas渲染的方案，例如VAP；

关于各方案的具体优缺点本文就不完全展开了，待未来再单独成文、具体讨论。

这里只大概总结一下SVG动画的优缺点

• 优点：

  • 代码都封装在svg文件内，符合「模块化」、「高内聚」的开发思想；
  • 可以配合作图软件进行动画制作，比纯使用代码编写更直观，很多效果也可以通过作图软件实现；
  • 可以对动画进行完全的控制，包括修改动画进度、动画播放方向、动画元素的各种属性等；
  • 免费；

• 缺点：

  • 无法全程在动画软件中完成，设计师难以参与，也意味着难以制作特别复杂的动画；
  • 不支持位图动画（可以通过内嵌序列帧等方式实现，但当前实践不多，暂不推荐）；
  • 增加开发者学习成本，其他方案要么可以使用已有知识实现，要么可以开箱即用；

经过上面的讨论，相信大家也对SVG擅长的领域有了个大概的了解，从下章开始，我会演示如何使用SVG实现一些实际开发中可能遇到的需求。

原文链接：https://juejin.cn/post/7341314453575385103 作者：RJiazhen