新手快速入手微信公众号加入svg代码块

公众号+svg有什么用？

公众号中嵌入svg能让文章有更丰富的交互，简单来说就是能让文章有点击动画或者是矢量图

本文会让你快速对这项技术有个了解，并快速的进入简单的上手

首先要明白svg是什么,SVG 意为可缩放矢量图形（Scalable Vector Graphics）。

SVG 使用 XML 格式定义图像。

Svg的展现方式就是一块代码

例如此是一条直线的svg代码

<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg">

 <g>
  <title>Layer 1</title>
  <line stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_1" y2="401" x2="475" y1="163" x1="147" stroke="#000" fill="none"/>
 </g>
</svg>

其代表的就是一条直线

 

我们暂时不去了解为什么是这样

先进行微信公众号嵌入svg的尝试

步骤

方法一

新建图文消息，先输入好标题、作者，上传好封面图。 然后在正文区域输入一行文字（如 代码嵌入位置）作为代码的占位。

在浏览器空白处鼠标右键/检查，打开调试工具，定位到代码位置文字，右击鼠标选择Edit as HTML（编辑为html）

 

删除原有代码，把内容替换为我们的SVG代码。

 

我们便得到了一条直线的图片

 

步骤略显麻烦？没关系，来介绍另外一种更加简单的方法，但需要一点麻烦的前置

方法二

借助工具“壹伴”

进入“壹伴”官网

壹伴官网_微信编辑器_公众号助手_公众号排版_一键图文排版 (yiban.io)

点击安装插件

 

之后没有什么坑，一路点同意就行了

遇到需要扫码登陆的不用理睬，不登陆也能使用

刷新文章编辑界面，当出现“壹伴”的工具窗口时，便代表已经安装成功

 

然后点击“壹伴·编辑源代码”

 

将svg代码复制进去

 

再点击一下

 

 

已经导入svg

恭喜你已经掌握如何让微信公众号里拥有svg了  o(*￣▽￣*)ブ

下面我们来试着自己制作svg

我们需要初步的了解svg

以下网站有非常详细的介绍，相信凭借你的能力，结合例子带你快速入门

SVG 教程 | 菜鸟教程

不过还需要简单的说一下

如果您对红框外面的代码感兴趣看一下着介绍

HTML 教程 | 菜鸟教程

另附简单的svg编辑工具

 

 

 

此款工具可以让你以比较简单的方式做出svg

相信看完基础知识的你凭借此款工具已经能做出简单的svg了

若想更进一步

也有一些比较好用的工具

速排小蚂蚁编辑器

速排小蚂蚁微信编辑器_微信图文编辑器_微信公众平台编辑器_微信排版美化工具

站内搜索svg板块

秀米SVG排版

图文排版 H5 - 秀米XIUMI

站内搜索svg板块可以使用相关工具

（B站搜 BV1vf4y1J7JQ 有相关教程）

FFFUEL

Free SVG generators, color tools & web design tools

完全免费的svg编辑工具

阿里巴巴矢量图标库

iconfont-阿里巴巴矢量图标库

可以在这里分享和交流，如果你在此上传作品，有几率被发现和使用，赚取一点点“睡后收入”

i排版

微信编辑器_i排版_微信排版_微信图文编辑器_公众号编辑_微信排版工具

135编辑器

135编辑器官网_微信公众号图文排版工具_一键在线文章内容编辑器

png转svg

在线png转svg – ICONS6

svg官网

SVG.js v3.0 |家 (svgjs.dev)