微信SVG交互图文设计入门教程

作为一个十足的拖延症患者，我终于积蓄力量，准备放大招了。

但凡学习SVG的人，必定对其有所了解，所以，你们了解过的，我直接略过；不了解的，百度搜索：超级强大的SVG SMIL animation动画详解（置顶一篇即是）。

入门分四部分：

一、认识SVG

二、设计工具

三、设计流程

四、注意事项

一、认识SVG

1.SVG简介

举例：戳大鱼↓

通常我们说的 Web 动画，包含了三大类：

① CSS3 动画；

② javascript 动画（canvas）；

③ html 动画（SVG）；

因为微信并不支持前两种，所以在微信里做交互式动画的重任，落在SVG头上。

就是说，学SVG，也是在码！代！码！

2.SVG功能

①SVG排版：☞

查看案例

☜

② SVG动态效果：☞查看案例☜

③ SVG交互效果：☞查看案例☜

其实难点并不在代码学习上，而是怎么搭配使用，用有限的代码实现丰富的创意。

二、设计工具

Illustrator

(AI)

①绘图；

②排版；

③生成SVG代码；

Dreamweaver

(DW)

①修改静态代码；

②添加动态、交互代码；

135编辑器

支持HTML代码模式

微信编辑器

不支持HTML代码模式

三、设计流程

1. Ai里绘图、排版：

所有内容设计、排版完毕，生成SVG代码。

AI生成SVG代码选项↑

2. Dw对生成的代码进行处理：

Dw代码处理页面↑

① 去掉头部HTML代码

② CSS样式转化成SVG样式

这是网页设计中的CSS样式，微信是不支持的，需要更改为，插入到相应的元素标签中。

③ 标签闭合

导出的SVG代码，默认元素标签是单标签，需要对此处理。

其他诸如：

等。

这个时候，Ai矢量图，已经整体代码化。

目前是静态代码，如果做动态和交互，需要手动添加代码。这一部分，后续教程再说。

3.拷贝到135编辑器（代码中转站）

因为微信自身的编辑器不支持代码模式，所以生成的代码需要拷贝到135编辑器，作为中转站，再复制到微信。

ps:有的朋友使用浏览器的开发者模式（审查元素），直接往后台拷贝代码，这样就跳过一步提高效率。

4.复制到微信后台。

四、注意事项

1. Ai设计

❶不支持位图

❷不支持渐变

❸不支持蒙版（尤其是常用的剪贴蒙版）

❹AI整体稿颜色不要过多，后期处理会累死

❺微信默认只支持"微软雅黑"，其他字体需要创建轮廓，变成矢量元素，才能显示。也因此，可修改性特别差。

2.Dw代码处理

❶90%的标签需要闭合

❷不支持CSS样式表

3.SVG语言

❶微信支持的SVG元素和属性有限

所以，SVG的交互设计，是在有限的框架内，寻求创意突破。

❷代码量

微信后台能承受的代码量是有限的，1.2万行左右，再多会卡顿甚至无法拷贝到微信。

❸终端适配

不同手机终端显示的效果是不一样的，需要考虑和多做测试。

4.创意设计：

前期设计很重要，费脑子、掉头发、撕裂般抓狂；

5.交互逻辑：

创意设计的效果如何实现。这个也很重要，费脑子、掉头发、撕裂般抓狂+1。

#入门教程END#

以后会陆续出相关教程

欢迎大家关注、转发 ~

▼