前言

【什么是svg】

HTML5是编写网页骨架的语言，</>是其典型格式。<svg>是其中一类标签，用于在网页中创建一个空画布，通过写下子标签，我们就可以在画布上创作新元素与对应的动效。我们通过编写代码的方式，在这个画布上作画与实现动效。如果了解过其他语言中的canvas画布，可以把svg直接理解为canvas。

【什么是微信推送中的svg】

我们在微信推送中插入svg，但为了维护和管理，官方对我们上传的内容会进行代码阉割，因此不是所有你日常见到的网页动效都能应用到微信推送中。详见jzcreate发布的白名单。基本地来说，这里不能存储变量，不能响应除了按拉交互以外的大部分事件，对网页跳转有严格限制。

如无特殊说明，本系列中所有"svg"都指微信推送环境下的svg。

【其他建议】

技术是锦上添花，内容是雪中送碳。现在秀米XIUMI、135编辑器、E2编辑器都有很强大的svg功能： “如无必要，勿增实体”。
尽管是简单的标签语言，但还是建议自己打代码从零开始练习。
建议的公众号：JzCreate，荒村，yiesbsite，小编备用（这都是svg刚兴起时的头部公众号，我有段时间没关注了，请自己留意）
建议看的书：《硬核运营》，Jz的官方小册子，传媒部有一本公共纸质版（17出资）

本系列中非必要的语句都会用删除线划掉，但仍然可以读读。

创建一个画布！

打开一个能编写代码的软件，最好能支持h5高亮（如sublime），并写下这些：

<svg width='300' height='300' style="background-color:black">
</svg>
<!--这是一个svg画布-->

然后另存为后缀为 .html 的文件，就可以在浏览器中打开并看到一个黑色的画布：

代码通俗易懂，但还是说明一下：

<svg></svg>被称为一个闭合标签，一般标签都要写闭合。除了表示换行的</br>和曲线<path ... />标签。
xxx = "nnn" 或 xxx:nnn 被称为属性值，在很多语言中都能见到（键值对）。但根据规则，并不是所有的属性值都能以xxx = "nnn" 的形式写出，因此需要以xxx:nnn的形式嵌套在style= "xxx:nnn"中，并用分号分割彼此。具体的可以在语言手册中查询，或者自己试一试。偷懒办法：一切属性都能以xxx:nnn的形式放进style.
表示长度的数值默认单位为px
html中空字符不敏感，单双引号不敏感，大小写一般不敏感。（很快乐不是吗！）
代表备注，不会被执行。在大部分编写器中都可以用ctrl + /切换。

图形基础

这里只需要理解一下原理，但也请记住属性的对应英文，大部分图形我们都会用Adobe Illustrator（下称AI）绘制并导出为静态的svg文件。

好，我们幼儿园二年级绘画课上学过一般的矢量图形有两大要素：轮廓和填充。

【1】轮廓有曲直之分：

1、直线类的轮廓（就是多边形）的逻辑为两点确定一线，点由二元组表述，点和点之间用空格间隔，如下图就能确定一个四边形。

<svg width='300' height='300' style="background-color:black"><polygon points="50,60 150,50 120,150 50,150" fill="red"></polygon>
</svg>

2、曲线类的轮廓用贝塞尔描述，代码很复杂我也搞不懂。但所幸我们都用AI直出，并可以用后文将提到的from-to做简单的补间动画。如果你想做复杂的曲线变形动画建议用AE生成gif。

<!--略去画布-->
<path d="M562,233c0,0-37-92-115-50s-117,197-17,277s157,121,157,121s-16-40,53-115s161.67-136,132-225c-23-69-98-110-155-69C569.58,206.11,562,233,562,233z"/>

【2】轮廓也有其他属性

以上属性请背出，并且记住opacity是不透明度，值越高越实。

【3】颜色

颜色只会在填充fill和线色stroke中使用，且必须使用#RGB的格式，这可以很容易在PS或AI中取色，不需要自己写。但为了避免看不懂某些AI导出的代码，你需要了解以下：

RGB表示红黄蓝三色混合，是屏幕的显色逻辑，一般用二进制三元组如(255,245,234)或六位十六进制eaa5f9写出。
#RGB是十六进制数据，#相当于标识头，上图中的#eaa5f9代表#RGB中R=ea,G=a5,B=f9混合而成的颜色。
- 你可能会看到#eaa三位的，那就是R=e,G=a,B=a
#RGBA是#RGB变体，#eaa5f999代表上面这个粉色且不透明度为99/100（16进制）
- 你可能会看到#eaa9四位的，那就是R=e,G=a,B=a,Alpha=9/10（16进制），七位同理。

不支持渐变色，kuso！

【怎么从AI里导出】

请记住1125x2436这个iphoneX的尺寸作为常用画布尺寸。当你画完后，另存为>保存为svg>保存，就会弹出这个窗口，点击“更多选项”：

就会展开为这个更大的窗口，确保红框标出的两个属性如图所示，然后点击"svg代码"

得到一个临时txt，把代码头部显然是描述和水印的几行去掉，留下干净的<svg></svg>及其之间的内容，就可以复制到编译器里进行进一步编辑了。

微信SVG使用指南 01相关推荐

微信点餐系统01——环境搭建
微信点餐系统01--环境搭建一.创建数据库表微信点餐系统一共需要5个表. 商品表:商品编号.商品名称.商品价格.商品库存.商品描述.商品图片.商品情况(上架还是下架).它属于哪个类目(热销?男 ...
Hive编程指南01
文章目录 Hive编程指南01 命令行界面操作 1.Hive中"一次使用"命令 2.从文件中执行Hive查询 3.hiverc文件 4.Hive CLI的其他功能 (1)自动补全功 ...
第三方网站应用微信登录开发指南
微信开放平台网址网站应用微信登录开发指南准备工作网站应用微信登录是基于OAuth2.0协议标准构建的微信OAuth2.0授权登录系统. 在进行微信OAuth2.在进行微信OAuth2.0授权登录 ...
微信小程序设计指南官方版放出
微信团队总喜欢在深夜搞个大惊喜,昨天晚间发布微信小程序开发文档,微信小程序设计指南也一同放出,都说腾讯的产品用户体验很好,我们就和ytkah一起看看这个小程序设计指南吧,参考一下他们的UI.交互.连接 ...
微信接入php指南,微信公众号开发教程01：接入指南
要成为微信开发者,首先需要进入接入校验,微信相关的接入文档地址为: 具体步骤如下: 一.填写服务器配置 1.申请微信公众号,并登陆:https://mp.weixin.qq.com/ 2.填写相关的参 ...
小红书运营方案：从0到1的引流微信私域指南
前全国午和小伙伴在沟通,她做的是小红书旅游类项目,目的是用户流量,转微信私域.她面临的疑问,不止是小红书营销传播,还要打磨服务产物. 她自己做过几年运营,思路相对清晰,我也给她罗列了7个框架:后面在复 ...
[微信开发] 开发指南笔记
(1)测试号申请 https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login (2)接入指南 1.每个用户对每个公众号有一个唯一的Op ...
[公测]微信小程序设计指南文档
微信小程序·开放了.不要在意名额,一定要加大专注度.并保持良好的想法以及意识,扩大认知范围,这样才能占得先机.程序上的事我不懂,设计文档还是有必要看一看.文档并没有讲如何更漂亮.只是从人性化的角度去讲 ...
SVG 入门指南(看完,对SVG结构不在陌生)
你知道的越多,你不知道的越多点赞再看,养成习惯本文 GitHub:https://github.com/qq449245884/xiaozhi 上已经收录,更多往期高赞文章的分类,也整理了很多我的 ...
SVG 入门指南(初学者入门必备)
SVG 简介 SVG,即可缩放矢量图形(Scalable Vector Graphics),是一种 XML 应用,可以以一种简洁.可移植的形式表示图形信息.目前,人们对 SVG 越来越感兴趣.大多数现 ...

微信SVG使用指南 01

前言