![cover](https://img-blog.csdnimg.cn/f9768c255c6647bb90f68d0e68fbd4a6.png)
新手快速入手微信公众号加入svg代码块
在浏览器空白处鼠标右键/检查,打开调试工具,定位到代码位置文字,右击鼠标选择Edit as HTML。公众号中嵌入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编辑工具
此款工具可以让你以比较简单的方式做出svg
相信看完基础知识的你凭借此款工具已经能做出简单的svg了
若想更进一步
也有一些比较好用的工具
速排小蚂蚁编辑器
速排小蚂蚁微信编辑器_微信图文编辑器_微信公众平台编辑器_微信排版美化工具
站内搜索svg板块
秀米SVG排版
站内搜索svg板块可以使用相关工具
(B站搜 BV1vf4y1J7JQ 有相关教程)
FFFUEL
Free SVG generators, color tools & web design tools
完全免费的svg编辑工具
阿里巴巴矢量图标库
可以在这里分享和交流,如果你在此上传作品,有几率被发现和使用,赚取一点点“睡后收入”
i排版
微信编辑器_i排版_微信排版_微信图文编辑器_公众号编辑_微信排版工具
135编辑器
135编辑器官网_微信公众号图文排版工具_一键在线文章内容编辑器
png转svg
svg官网
![Logo](https://devpress.csdnimg.cn/79de2bf0b7994defa4242ef90d5513fa.jpg)
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
所有评论(0)