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方案会存在问题,还是推荐只用来制作较为复杂,但是不涉及位图处理的静态图形。
动画制作
前端常见的动画实现方案从使用难度从简到难排序大概是:
- 浏览器原生支持的动画格式,例如gif、webp;
- 基于浏览器原生能力的,通过CSS属性控制的动画,以及使用JS控制CSS属性实现的动画;
- 基于已制作好的SVG图形,在内部添加动画相关的控制代码;
- 以矢量图形变换为主的方案,例如SVGA、Lottie、SVGAtor;
- 基于MP4视频文件和Canvas渲染的方案,例如VAP;
关于各方案的具体优缺点本文就不完全展开了,待未来再单独成文、具体讨论。
这里只大概总结一下SVG动画的优缺点
-
优点:
- 代码都封装在svg文件内,符合「模块化」、「高内聚」的开发思想;
- 可以配合作图软件进行动画制作,比纯使用代码编写更直观,很多效果也可以通过作图软件实现;
- 可以对动画进行完全的控制,包括修改动画进度、动画播放方向、动画元素的各种属性等;
- 免费;
-
缺点:
- 无法全程在动画软件中完成,设计师难以参与,也意味着难以制作特别复杂的动画;
- 不支持位图动画(可以通过内嵌序列帧等方式实现,但当前实践不多,暂不推荐);
- 增加开发者学习成本,其他方案要么可以使用已有知识实现,要么可以开箱即用;
经过上面的讨论,相信大家也对SVG擅长的领域有了个大概的了解,从下章开始,我会演示如何使用SVG实现一些实际开发中可能遇到的需求。