SVG画图：画一个腾讯云logo

什么是SVG

首先来了解一下什么是 SVG，SVG（Scalable Vector Graphics）是一种基于 XML 的图像格式，用于描述二维矢量图形。这种格式具有高度的可伸缩性和分辨率独立性，意味着 SVG 图像可以在不失真的情况下放大或缩小，非常适合用于网页设计、移动应用、数据可视化等领域。

首先要有一个大的框架，SVG 标签中放的是我们要画的图形和元素，其中 width 和 heigth 是整个 SVG 图形的大小

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
   <!-- 在这里添加你的SVG图形和元素 -->
</svg>

接下来我们将使用这个网站来进行在线的画图，当然你也可以直接本地新建一个文本文件把后缀名改为 .svg 后用浏览器直接打开，只是在线网站比较直观不用来回切换 https://www.bejson.com/ui/svg_editor/

来画几个简单的图形

画个圆

接下来画个简单的圆形，其中 circle 表示这是圆，cx 和 cy 属性分别定义圆心的 x 和 y 坐标，r 表示半径，fill 表示填充的颜色，这里为绿色

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" fill="green" />
</svg>

画个矩形

矩形的标签是 rect，x 和 y 定义的是矩形的左上角的坐标，width 和 height 定义矩形的宽度和高度，fill 仍然表示颜色

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="80" height="50" fill="blue" />
</svg>

画一条线

线条的标签是 line，x1 和 y1 定义线的起点坐标，x2 和 y2 定义线的终点坐标，stroke 定义线的颜色，stroke-width 定义线的宽度

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <line x1="10" y1="10" x2="90" y2="90" stroke="red" stroke-width="2" />
</svg>

但是到这里大家应该注意到了，我们画的形状都是有标签来决定的，比如圆的标签是 circle，需要指定这个标签才能画一个圆，但是我们的目标是腾讯云的 logo，这显然有些 ... 复杂了

别担心，如果我们想要自己创建形状可以直接使用 path 标签，path 标签使用 "d" 属性来描述图形的路径。路径描述包括移动（M/m）、线（L/l）、曲线（C/c、Q/q、S/s、A/a）和关闭路径（Z/z）等命令

使用Path画图

这里是 path 标签的一些基本命令：

M (moveto): 移动到一个新位置，不画线。例如，M 10 10 会将画笔移动到坐标 (10,10)。

L (lineto): 从当前位置画一条直线到新位置。例如，L 20 20 会从当前位置画一条直线到 (20,20)。

H (horizontal lineto): 从当前位置画一条水平线到指定的 X 坐标。例如，H 30 会画一条线到 X 坐标 30，当前 Y 坐标不变。

V (vertical lineto): 从当前位置画一条垂直线到指定的 Y 坐标。例如，V 40 会画一条线到 Y 坐标 40，当前 X 坐标不变。

C (cubic Bézier curve): 画一个立方体贝塞尔曲线。它需要三组坐标，分别代表两个控制点和终点。例如，C 10 10, 20 20, 30 30。

S (smooth cubic Bézier curve): 画一个平滑的立方体贝塞尔曲线。它假设第一个控制点是前一个 C 或 S 命令的第二个控制点的反射。它需要两组坐标：一个控制点和一个终点。

Q (quadratic Bézier curve): 画一个二次贝塞尔曲线。它需要两组坐标：一个控制点和一个终点。

T (smooth quadratic Bézier curve): 画一个平滑的二次贝塞尔曲线。它类似于 S，但用于 Q 命令。

A (elliptical arc): 画一个椭圆弧。这个命令需要一些复杂的参数，包括椭圆的半径、旋转角度、大弧标志、顺时针或逆时针标志以及终点坐标。

Z (closepath): 关闭当前的路径。它将当前位置连接回初始的 M 命令的位置。

每个命令都有一个相应的小写字母形式，例如 m、l、h、v 等。小写字母表示相对坐标，而大写字母表示绝对坐标。使用相对坐标可以简化路径的定义，因为它们是相对于前一个点的位置。

例如我们来画一个心型

<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path d="M 10,30
           A 20,20 0,0,1 50,30
           A 20,20 0,0,1 90,30
           Q 90,60 50,90
           Q 10,60 10,30 z" fill="red"/>
</svg>

接下来解析一下这个心形是怎么画出来的

M 10,30 移动到起始点 (10, 30)。

A 20,20 0,0,1 50,30 画出第一个半圆弧形。这里 A 命令指定了一个椭圆弧。它的半径在 x 和 y 方向都是 20，不旋转，大弧标志为 0，顺时针标志为 1，终点是 (50, 30)。这画出了心形顶部的左半边。

A 20,20 0,0,1 90,30 画出第二个半圆弧形，与第一个半圆弧形相接，绘出心形的顶部右半边，结束于 (90, 30)。

Q 90,60 50,90 使用一个二次贝塞尔曲线，从 (90, 30) 开始，通过控制点 (90, 60) 到终点 (50, 90)，形成心形的右下边缘。

Q 10,60 10,30 再画一个二次贝塞尔曲线，从 (50, 90) 开始，通过控制点 (10, 60) 回到 (10, 30)，形成心形的左下边缘。

最后，z 命令关闭路径，确保所有线条连接起来，形成闭合的图形。

fill="red" 属性确保这个心形被填充红色。整个描述合在一起，就形成了一个红色的心形图形。

那么我们来观察一下 腾讯云的这个 logo，基本可以根据颜色分为三部分，上面是一个圆环的一部分

先来画一个圆环

<svg width="200" height="200">
  <path d="M 50,100
    A 50,50 0 0 1 150,100
    L 130,100
    A 30,30 0 0 0 70,100
    Z"
    fill="#006EFF"  />
</svg>

M 50,100 移动到起点。

A 50,50 0 0 1 150,100 画一个半径为50的外圈弧线到点(150,100)。

L 130,100 从外圈弧线的终点画一条直线到内圈弧线的起点。

A 30,30 0 0 0 70,100 画一个半径为30的内圈弧线回到点(70,100)。

Z 闭合路径，自动画一条直线从内圈弧线的终点回到起点。

但是看起来 logo 并不是单纯的半圆环，我们来稍微调整一下，让它有些倾斜

<svg width="200" height="200">
  <path d="M 50,100
           A 50,50 0 0 1 140,90
           L 120,93
           A 30,30 0 0 0 70,100
           Z"
        fill="#006EFF"  />
</svg>

然后来画左下角的图形，这里基本上要参照原来的图形的坐标，先画直线，在画圆弧最终闭合起来

<svg width="200" height="200">
  <path d="M 50,100
           A 50,50 0 0 1 140,90
           L 120,93
           A 30,30 0 0 0 70,100
           Z"
        fill="#006EFF"  />
  <path d="M 90,130
           L 100,120
           L 70, 100
            L 50, 100
           A 20,20 0 0 0 70,180
           L 80 170
           L 60 170
           A 20,24 0 0 1 57,111
           L 64 112
           Z"
        fill="#00C8DC"  />
</svg>

M 90,130 移动到点 90，130 这个起点是右边最下方的点

L 100,120 走直线到 100，120

L 70, 100 再走直线到 70，100

L 50, 100 走直线到 50，100 到这里就和上面的图形看上去连接起来了，我们开始画圆弧

A 20,20 0 0 0 70,180 逆时针画一个圆弧

L 80 170

L 60 170 这些是画下面的直线

A 20,24 0 0 1 55,113 顺时针画圆弧

L 64 112 走到合适的位置方便闭合

Z 闭合

接下来画最后一部分，这是一个类似水滴的形状，先从第二个图形的最下端开始画，画一个直线后直接画圆弧得到这样一个全部填充的形状

  <path d="M 70,180
        L 130,105
        A  20,20 0 0 1 160,180
        Z"
        fill="#00A3FF"  />

我们可以继续从里面走线直到把线条闭合留出里面的空白，也可以复制一份画一个小的白色的水滴型，把里面填充为白色

  <path d="M 95,168
        L 135,118
        A  10,10 0 0 1 155,168
        Z"
        fill="#ffffff"  />

到此，一个仿制的腾讯云 logo 就完成了

emmm，再调整一下宽度等细节，只能说，凑合能认识吧

完整代码：

<svg width="200" height="200">
  <path d="M 50,100
           A 50,50 0 0 1 140,90
           L 120,93
           A 30,30 0 0 0 70,100
           Z"
        fill="#006EFF"  />
  <path d="M 90,130
           L 100,120
           L 70, 100
            L 50, 100
           A 20,20 0 0 0 70,180
           L 80 170
           L 60 170
           A 20,24 0 0 1 57,111
           L 64 112
           Z"
        fill="#00C8DC"  />
  <path d="M 70,180
        L 130,105
        A  20,20 0 0 1 160,180
        Z"
        fill="#00A3FF"  />
  <path d="M 95,168
        L 135,118
        A  10,10 0 0 1 155,168
        Z"
        fill="#ffffff"  />
</svg>

再来看一下原版的代码有多复杂，甚至连字都是这么画出来的！？瑞思拜：