▲ 大疆·新媒体运营 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Ⅲ 】画出所有你想要的图形（代码示例）