【SVGⅡ】用代码在公众号中画各种图形

• 

• 

不懂代码的运营不是好的产品。

一个运营人员可以不精通代码，但遇到的时候至少应该不是一味规避，这一两年在公众号交互上展露头角的 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Ⅲ 】画出所有你想要的图形（代码示例）