
▲ 大疆·新媒体运营 JD ▲ Shopee·新媒体运营 JD
不懂代码的运营不是好的产品。
一个运营人员可以不精通代码,但遇到的时候至少应该不是一味规避,这一两年在公众号交互上展露头角的 SVG 技术就很值得钻研。
或许你可以跟着我,写下人生中的第一行代码。
首先你需要一个代码编辑器,这里我用的是代码编辑器是 Visual Studio Code,你可以在网上搜索下载。
*请在官网或 Github 等可信渠道下载。
下载完成后,我们可以给 Visual Studio Code 安装插件「SVG」,方便我们接下来的编辑工作。


接下来尝试着在公众号内画一个矩形。
使用 Chrome 浏览器打开公众号后台并新建图文消息,输入任意字符,比如「任意」。在浏览器页面右击选择「审查元素/Inspect」,搜索到 「任意」——一个由 「P」标签包裹的代码段, 右击选择「Edit as HTML」,复制&粘贴下面的代码,替换原来的代码。
当然,你也可以 Chrome 浏览器提供的选择元素以审查(Select an element in the page to inspect it)的功能,直接点选 「任意」 文本。
<!-- 不指定具体数值的情况下,SVG宽高默认为300*150(px) --> <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"> <rect width="100" height="100" x="50" y="50" style="fill:#ffff00; stroke-width:10; stroke:#ff0000;" /> </svg>

在网站中也可以绘制 SVG 图形 ▼
除了 rect(矩形)、circle(圆形)之外,SVG 基本图形还包括 ellipse(椭圆形)、line(直线)、polyline(折线),polygon(多边形),更为复杂的图形需要通过 path(路径)绘制。如果我们需要做 SVG 动画,可以在 Visual Studio Code 上编辑完成后,再一次性通过浏览器注入微信公众号后台。
这里需要注意,所有的 SVG 图形标签既可以写成单标签,也可以写成双标签。
你也可以选择在线编辑 SVG

更多图形的代码写法请见 【SVGⅢ 】画出所有你想要的图形(代码示例)