新手快速入手微信公众号加入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)
新手快速入手微信公众号加入svg代码块相关推荐
- 企业宣传片如何快速接入微信公众号中?
原创文章:2019-8-6 文章内容:快速在微信公众号中接入自己公司的视频宣传片 大家好,我来说说企业视频宣传片.产品宣传片如何接入微信公众号,让关注公众号的用户,轻松点击观看,提升企业形象,提升产品 ...
- 基于Vue+SpringCloudAlibaba微服务电商项目实战-技术选型-004:快速整合微信公众号开发
004:快速整合微信公众号开发 1 微信公众号开发项目演示 2 微信公众号开发设计原理 3 基于natapp将本地项目发布到外网 4 对接微信公众号测试平台 5 第三方微信框架快速实现微信开发 6 微 ...
- 如何优雅的在微信公众号中编辑代码
这篇文章严格意义上是写给有公众号且公众号文章需要贴代码的朋友们看的. 1 公众号编辑器真难用 自从入坑公众号以来,被公众号的这个编辑器简直折磨死了.我发的文章基本上是少不了贴代码的,可是每次贴上去的代 ...
- asp群发微信公众号模板消息代码asp写的
asp群发微信公众号模板消息代码asp写的,主要用于对已经入库的会员群发模板消息 <% '=群发模板信息=转载请保留作者信息:18611436777======== If Request(&qu ...
- 微信公众号编辑菜单栏代码
微信公众号编辑菜单栏代码 这是一款基于jQuery的微信公众号在线菜单编辑修改功能,可以添加和删除菜单名称.菜单类型.菜单值等.保存提交菜单类型可以获取json数据. 演示地址 下载地址
- 微信公众号裂变式营销代码实现,PHP,具体看图片
微信公众号裂变式营销代码实现,先讲下基础原理,先生成带有用户参数的二维码,然后用php自带的gd库处理,生成带有用户头像,昵称,参数二维码,营销信息的自定义图片,再将图片传入微信公众号临时素材,当其他 ...
- HTML5期末大作业:学生网页设计——微信公众号6页(代码质量好) 学生DW网页设计作业源码 web课程设计网页规划与设计
HTML5期末大作业:学生网页设计--微信公众号6页(代码质量好) 学生DW网页设计作业源码 web课程设计网页规划与设计 HTML+CSS+JavaScript(毕业设计) 常见网页设计作业题材有 ...
- asp群发微信公众号模板消息代码
刚刚做的一个项目需要用到asp群发微信公众号的模板消息, 以前没做过,想了一会用了下面这种方法实现的模板消息群发推送,效果很好. asp群发微信公众号模板消息代码
- 使用WxJava快速接入微信公众号
在微信公众号请求用户网页授权之前,开发者需要先到公众平台官网中的"开发 - 接口权限 - 网页服务 - 网页帐号 - 网页授权获取用户基本信息"的配置选项中,修改授权回调域名. 环 ...
最新文章
- 提示以演示模式运行_德事隆和IMSAR在小型无人机上集成并演示合成孔径雷达
- 关卡设计快速入门_2. 导航视口
- 【Shell】使用记录
- 计算机视觉与深度学习 | 使用HOG特征进行数字分类
- 第十七章 特殊成员_类的函数指针
- 微服务网关路由过滤作用介绍
- SAP CRM 和 SAP Cloud for Customer 的表格列项目宽度调整的原理介绍
- Android WebView 在内部打开链接,捕获错误
- c语言函数大全doc,c语言函数大全.doc
- 【面试题3】二维数组中的查找
- 缩进一个字符_韩语毕业论文排版之 学会悬挂缩进,不再天天敲空格!
- 别人改出了新BUG,怎么看?
- 诺顿引起的系统频繁重启的解决方法重新
- 哆啦A梦:基于Prometheus的企业监控报警平台
- 阿里云ACP认证考试笔记
- 【转载】Excel中批量填充公式有5个方法
- UE4地编大型开放世界~制作烘焙全流程
- 2020-12-22 ACM集训一(二维数组与结构体)
- 在uni-App(Vue)中使用 SVG + JS 自定义动画:模拟关键帧
- java高级开发面试题
热门文章
- HTML5网页设计基础——咖啡banner
- 计算机专业博士学位有哪些,计算机在职博士生和全日制博士有哪些方面的不同在职读博含金量高吗...
- JavaScript基础之方法 形参以及arguments属性
- 深入理解java虚拟机(三)GC垃圾回收-对象存活算法
- 抖音小店无货源店群猜你喜欢精细化运营玩法,不直播不发视频人人都可操作
- TikTok为什么无法关注其他人?
- 台式计算机碟片怎么安装,台式电脑怎么用光盘安装win7系统
- qcy教你下载你在CSDN上写过的文章
- java随机生成电话号,邮箱,姓名
- 淘宝购物车运费计算方式