svg 编码设置_如何手动编码SVG

最新推荐文章于 2025-05-30 14:33:37 发布

翻译最新推荐文章于 2025-05-30 14:33:37 发布 · 2.2k 阅读

文章标签：

本文介绍了如何手工编码SVG图标，从SVG基本元素到创建各种形状。通过实践，读者将学习如何编写SVG代码并创建一系列图标，包括左对齐、右插入、浏览器、警报、播放和下载图标。教程中详细解释了SVG的元素、属性和坐标系统，帮助开发者掌握SVG编码基础。

svg 编码设置

关于可伸缩矢量图形的一大优点（除了它们可以无限伸缩而不造成质量损失外）是，一旦您了解了基本原理，就可以很容易地手工编写简单的形状，而无需打开图形应用程序。

仅需几行代码，您就可以拥有自己的自定义图标，并且您将确切地知道每个图标是如何组合在一起的。创建自己的SVG时，请确保以最有效的方式编写它们，并且在站点中使用它们时具有最大程度的控制权。

在本教程中，我们将手工介绍编码SVG的所有基础知识，但是我不会在枯燥的演讲中让您感到厌烦，只是讲了相关的形状和属性。相反，您将学习如何通过实践来编写SVG代码，并创建在本教程开始时看到的六个图标（请在线查看演示）。在此过程中，您将使用SVG手动编码所需的所有基本元素。

说到这些基本元素，让我们快速介绍一下它们的基本含义。

SVG基本元素

SVG可能会导致很多复杂性，但是对于我们将要制作的图标而言，这并不是必需的。以下列表涵盖了我们需要的构建基块。

<svg>包装并定义整个图形。 <svg>是可缩放的矢量图形，而<html>元素是网页。
<line>制作单条直线。
<polyline>制作多段线。
<rect>制作矩形和正方形。
<ellipse>制作圆形和椭圆形。
<polygon>制作具有三个或更多个侧面的直边形状。
<path>通过定义点和点之间的线来制作任何您喜欢的形状。
<defs>定义可重用资产。最初，此<defs>部分中没有任何内容可见。 <defs>是可缩放矢量图形，而<head>元素是网页。
<g>多个形状包装成一个组。将组放在<defs>部分中，以使它们可以重复使用。
<symbol>与组类似，但具有一些额外的功能。通常放置在<defs>部分中。
<use>获取<defs>部分中定义的资产，并使它们在SVG中可见。

在浏览和创建图标时，我们将按照上面看到的顺序处理此元素列表。

入门文件

在开始之前，请从GitHub存储库中获取启动程序文件的副本。您可以下载.zip文件，也可以将存储库克隆到您自己的系统中。

我们将从具有一些基本HTML和CSS的文档开始。这将为我们将要制作的SVG提供一些样式，并且还将在页面上为您设置一些网格。我们将在此网格的顶部创建图标，希望它可以帮助您在放置SVG时可视化正在使用的坐标。

当从源“ Starter Files”文件夹中打开“ handcodedsvg.html”时，应该看到以下内容：

`x`和`y`值快速入门

在网站上的2D空间中工作时，水平轴由x表示，垂直轴由y表示。沿每个轴的位置用数字表示。如果要向右移动某些内容，则需要使用增加的x值，向左移动则需要使用减小的x值。同样，要向下移动某些内容，我们将使用增加的y值，而向上移动某些内容，我们将使用减小的y值。

表示单个点的x和y值的常用简写是(x, y) 。例如， x轴上的10点和y轴上的50点可以写为(10, 50). 在本教程中，我将不时使用该速记。

注意到网格上最暗的两条线了吗？我们将放置SVG，以便其左上角与它们相交的位置对齐。这样，该交点将表示我们的SVG中的位置x = 0和y = 0或(0,0) 。

背景网格

每条最浅的网格线代表10px ，中等厚度的线代表100px 。因此，如果要将对象从一条中等厚度的线向下移动到另一条，则可以将其在y轴上的位置增加100px 。

如果这听起来还不清楚，请放心，随着我们进入创建SVG图标的实用性，这一切都将变得有意义。

默认SVG样式

请注意，在起始HTML文件中，有一些包含CSSCSS，这些CSS具有我们即将创建的SVG图标的默认样式：

svg {
  stroke: #000;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

这会将我们的图标设置为无填充，并且将黑色5px宽的笔触带有圆角的帽和连接。

1.设置SVG

创建任何SVG的第一步是放置一个<svg></svg>元素。您想要SVG显示的所有内容都必须在这些标记之间。您可以在此元素上使用一些属性，但我们将使事情保持简单，而仅使用width和height 。

在HTML文档的<body>部分中添加以下代码：

<svg width="750" height="500">

</svg>

注意：起始文件中CSS将使此SVG向下和向右偏移100px因此其左上角将位于背景网格上两条最暗线的交点。而且，本教程中CodePen演示中的值可能也略有不同-但请随意使用它们。

2.创建“左对齐”图标

让我们从使用<line>元素创建此左对齐图标开始：

line元素具有四个需要使用的属性：

x1线的水平起点
y1直线的垂直起点
x2线的水平终点
y2线的垂直终点

综上所述，您可以使用x1和y1属性设置行的开始位置，并使用x2和y2属性设置行的结束位置。

让我们创建图标的第一行，即顶部的那一行。我们要作出行45px长，但是5px我们使用行程将增加围绕我们行以外的一些额外的像素。因此，我们需要将行向下和向右偏移3px以确保不会3px笔触创建的所有多余像素。

出于这个原因，我们会在一个位置，开始我们的线3的x轴和3对y轴。我们可以通过使用属性x1="3" y1="3"来设置(3,3)的行起点。

我们希望该行的长度为45px ，因此我们要在开始的x位置3增加45 ，为我们要为x2设置的值是48 。我们希望直线在水平轴上的相同位置处结束，因此我们将y2设置为等于3 ，即为y1赋予相同的值。我们将通过属性x2="48" y2="3"添加此(48,3)行终点。

第一行的完整代码应如下所示：

<line x1="3" y1="3" x2="48" y2="3"></line>

检查您的浏览器预览，您应该会看到一条45px长的黑色线条，带有漂亮的圆形大写字母。

现在，我们可以继续并将下面三行添加到我们的图标中。我们希望最终共有四行。第一个和第三个应为45px长，第二个和第四个应为62px长。我们还希望每个16px之间有一个垂直间隙。

我们可以通过以下代码实现：

<line x1="3" y1="3" x2="48" y2="3"></line>
<line x1="3" y1="19" x2="65" y2="19"></line>
<line x1="3" y1="35" x2="48" y2="35"></line>
<line x1="3" y1="51" x2="65" y2="51"></line>

注意：每行的y值会递增16px ，以创建所需的垂直间隙。

再看一下浏览器预览，您应该看到所有四行。您也可以在此笔中直接编辑SVG：

注释掉我们的图标

有了该代码，您的第一个图标已经制作好了。我们已经准备好继续创建下一个图标，并且希望将其放置在网格上的同一位置，但是现在左侧的align图标在路上。因此，现在只需注释掉其代码以清除空间即可。当我们将图标变成可重复使用的资产时，我们将返回并取消注释。

您需要为每个图标做同样的事情，完成创建后将其注释掉。出于这个原因，在每个图标的代码上方添加一个小注释也可能是一个好主意，这样您以后就可以知道它们是哪个。

3.创建一个“右插入符”图标

对于此图标，让我们使用<line>元素的下一个演变： <polyline> 。我们将使用它来创建正确的插入符号。

<polyline>元素只有一个属性： points 。在这里，您可以使用数字对来设置一系列点。线将自动在它们之间绘制。数字对只是在points属性内一个接一个地写。尽管可以选择包括逗号，但不需要逗号分隔。为了提高可读性，您可能还希望将每对值放在代码中的单独一行上。

我们将在开始我们最后一个图标的位置处开始右插入符号的折线，即(3,3)以确保我们的笔触和笔帽不会被剪切。我们希望第二点向右移动，向下移动25px ，因此我们将其设置为(30,28) 。我们的第三个点应与第一个点垂直对齐，并向下移动另一个25px ，因此将其设置为(3,53) 。

我们可以将这些点添加到折线的points属性中，如下所示：

<polyline points="
  3 3
  30 28
  3 53
"></polyline>

如果您想要更简洁的代码，也可以将上面的代码编写为：

<polyline points="3 3, 30 28, 3 53"></polyline>

要么

<polyline points="3 3 30 28 3 53"></polyline>

看一下浏览器的预览，您应该看到右侧的插入符号图标显示出来：另一个图标就这样完成了！

再次注释掉该图标并给它一点注释，以便在移动到下一个图标之前知道它是哪一个。

4.创建一个“浏览器”图标

现在我们有线条向下拍拍，让我们创建一些形状，从矩形（ <rect> ）开始。我们将其与几个<line>结合使用以创建浏览器图标。

矩形和正方形可以使用<rect>元素创建，该元素具有您需要提供的四个属性：

x x轴上的左上角位置
y y轴的左上角位置
width的形状的宽度
height的形状的高度

注意：如果需要，还可以使用属性rx和ry创建圆角。

我们将创建一个矩形，该矩形的左上角在两个方向上的偏移均为3px ，再次避免剪切笔划，因此我们将使用属性x="3" y="3" 。我们希望它是80px由宽60px高，所以我们也将使用属性width="80" height="60" 。

因此，我们的完整矩形代码应为：

<rect x="3" y="3" width="80" height="60"></rect>

保存代码，然后查看浏览器预览。您应该看到一个整洁的小矩形坐在那里。

现在，我们需要做的就是在顶部添加一条水平线，并在左上角附近添加一条垂直线，如本节开始部分中的图像所示。我们将使用与以前相同的行创建过程，并且完整的浏览器图标代码应如下所示：

<rect x="3" y="3" width="80" height="60"></rect>
<line x1="3" y1="19" x2="83" y2="19"></line>
<line x1="20" y1="3" x2="20" y2="17"></line>

花点时间看一下两个线属性中提供的坐标，也许稍微改变一下它们的值，以便在此图标中可以看到它们的工作方式。

5.创建一个“警报”图标

现在我们已经可以控制矩形的创建了，让我们尝试使用<ellipse> 。我们将使用它们中的两个以及<line>来创建此警报图标：

与矩形一样， <ellipse>元素也需要四个属性，但是它们与矩形有些不同。代替使用宽度和高度，我们设置水平和垂直半径。而不是放置形状的左上角，我们放置其中心：

cx x轴上的中心位置。考虑“ cx代表中心x” 。
cy在y轴上的中心位置。想想“ cy为中心y” 。
rx x轴上半径的大小，即形状的高度分成两半。考虑“ rx表示半径x” 。
ry上的半径的大小y轴，即，形状的宽度分成两半。想想“为半径y求” 。

我们希望有一个完美的圆圈这是80px宽80px高，这意味着我们需要它的半径为40px的两个轴。我们将使用属性rx="40" ry="40" 。

我们还希望圆与图上最暗的线齐平。鉴于我们的圆将是80px宽和高，这将使其圆心位于40px 。但是，我们还需要允许3px偏移量以避免裁剪，因此这意味着圆的中心点在两个轴上都应为43px 。我们将使用属性cx="43" cy="43" 。

将所有内容放在一起，我们得到以下代码：

<ellipse cx="43" cy="43" rx="40" ry="40"></ellipse>

检查浏览器预览，您现在应该在页面上看到一个圆圈。

现在，我们将添加第二个圆圈，以在感叹号的底部创建点。我们将以相同的方式创建它，唯一的区别是我们将使用内联样式将填充设置为黑色：

<ellipse style="fill:black;" cx="43" cy="65" rx="5" ry="5"></ellipse>

最后，我们只需要添加一行以创建感叹号的其他部分。再一次，我们使用的技巧与到目前为止使用的其他线条相同，唯一的区别是，我们将使用内联样式将此笔划宽度从5px增至8px 。

警报图标的完整代码如下：

6.创建一个“播放”图标

现在我们掌握了相对固定的矩形和椭圆形形状，可以使用<polygon>元素来滚动自己的形状了。我们可以用它创建任何想要的多边形状，从八边形到星形。但是，我们暂时保持直截了当，并创建一个三角形。我们将其与<ellipse>以创建播放图标：

<polygon>元素几乎与<polyline>元素相同。它也只有一个属性points ，在其中您可以使用成对的值来设置构成形状的每个点。区别在于，虽然折线将保持打开状态，但是多边形将自动关闭。

让我们开始向下移动多边形将位于其中的圆。我们将使用与警报图标中完全相同的椭圆：

<ellipse cx="43" cy="43" rx="40" ry="40"></ellipse>

现在让我们创建多边形。我们将放置三个点，并且将在这些点之间自动生成线以创建一个三角形。这些点将是（35,23），（60,43）和（35,63）。因此，我们的多边形代码将为：

<polygon points="35 23, 60 43, 35 63" />

我们完整的播放图标的代码是：

7.创建一个“下载”图标

现在，我们将介绍产生SVG形状的最潜在，最复杂但同时也是最灵活的方法，这就是<path>元素。创建路径有点像创建多边形，您可以一次在其中放置形状。但是，使用路径可以直接创建每个点并自己进行直线化而无需自动化，并且还可以选择在点之间创建曲线，而不是直线。

路径几乎可以用来创建任何东西，但是除了一定程度的复杂性之外，使用矢量设计应用程序而不是手工编码还是更好的选择。因此，我们将专注于路径功能的一小部分，并使用它来创建此下载图标：

从技术上讲，您可以使用多边形创建上述形状，但是此箭头将为我们提供一种了解路径元素工作方式的好方法。

我们将仅使用<path>的属性之一，即d 。 d代表“数据”，在这里您将定义路径的所有点和线。在此属性中，通过单个字母（例如M或L ）以及一组x和/或y坐标，提供用于设置路径的点并在它们之间创建线的命令。

其中有几个命令，但是为了给您介绍<path>使用入门，我们将坚持一些在手工编码时可以实际使用的命令。它们如下：

M代表moveto 。它在给定的位置开始一个由x和y值定义的新路径。想象一下，这就像将鼠标悬停在画布上的某个点上，可以绘制了。大写M表示移动到绝对坐标集。（小写字母m表示相对坐标）。
L代表lineto 。从当前位置到新位置画一条线。大写L表示移动到绝对坐标集。（小写字母l表示相对坐标）。
Z代表closepath 。通过在当前点到路径中创建的第一个点之间绘制一条直线，可将路径转换为封闭形状。

您绝对应该查看这三个命令（以及我们将使用它们创建的图标），作为<path>元素的入门入门。为了真正充分利用它，您需要熟悉可用的所有命令。

编码您的下载图标

为了编码您的下载图标路径，我建议首先添加空路径元素：

<path d="

"></path>

从这里开始，一次添加每个命令，保存并查看形状的进度，以便了解形状的创建方式。我还建议将每个命令放在自己的行中以提高可读性。

首先，我们要移至(18,3) ，这是我们希望箭头开始的点。为此，我们将命令M 18 3添加到路径的d属性中。
接下来，我们要使用L命令创建一条直线，该直线从路径的起点沿x轴绘制28px 。为此，我们添加第二个命令： L 46 3 。检查您的预览，您应该会看到一条小的水平线。
现在，通过添加L 46 40直线向下绘制37px的直线。
然后使用L 61 40右移15px
接下来，我们必须开始创建箭头点。我们需要沿对角线向左下方绘制一条线。我们将使用L 32 68进行此操作。
然后我们将有一条线L 3 40对角地向左上和向左。
现在，通过L 18 40再次向右画一点箭头来完成箭头的制作。
要闭合形状，我们不需要指定要画线的点。我们需要做的就是添加Z命令，它将自动为我们关闭形状。

您最终的箭头路径代码应如下所示：

<path d="
  M 18 3
  L 46 3
  L 46 40
  L 61 40
  L 32 68
  L 3 40
  L 18 40
  Z
"></path>

有关使用<path>更多信息，请查看页面底部的参考。

8.添加`<defs>`元素

我们已经完成了六个图标的编码，因此现在我们可以准备将它们放置在SVG中并重新使用。

为此，我们将包装带有标记<defs></defs>所有六个（当前已注释掉）图标的代码：

<defs>
<!-- All the icons you created so far go in here -->
</defs>

这告诉系统，默认情况下将隐藏我们创建的所有图标，直到我们明确使用它们为止。

您现在可以取消注释每个图标，并且它们不会在页面上显示。

9.使用`<g>`创建组

我们可以通过两种方式使图标准备就绪：将它们转换为组或符号。我们将图标的前半部分分组，然后将下半部分变为符号，以便我们说明它们之间的区别。

要将我们的一个图标转换为一组，我们要做的就是用<g></g>标签将其包装起来。为了使该组可用，我们还需要为其赋予唯一的ID。

例如：

<g id="leftalign">
<!-- Left align icon made with lines -->
<line x1="3" y1="3" x2="48" y2="3"></line>
<line x1="3" y1="19" x2="65" y2="19"></line>
<line x1="3" y1="35" x2="48" y2="35"></line>
<line x1="3" y1="51" x2="65" y2="51"></line>
</g>

用<g></g>标记包裹您的前三个图标，并添加唯一的ID，如下所示：

<g id="leftalign">
<!-- Left align icon made with lines -->
<line x1="3" y1="3" x2="48" y2="3"></line>
<line x1="3" y1="19" x2="65" y2="19"></line>
<line x1="3" y1="35" x2="48" y2="35"></line>
<line x1="3" y1="51" x2="65" y2="51"></line>
</g>

<g id="rightcaret">
<!-- Right caret icon made with a polyline -->
<polyline points="
  3 3
  30 28
  3 53
"></polyline>
</g>

<g id="browser">
<!-- Browser icon made with rectangle and lines -->
<rect x="3" y="3" width="80" height="60"></rect>
<line x1="3" y1="19" x2="83" y2="19"></line>
<line x1="20" y1="3" x2="20" y2="17"></line>
</g>

10.使用`<use>`放置组

现在，我们在<defs>元素中将三个图标定义为组，因此可以在SVG中使用它们了。为此，我们要做的就是添加<use>元素（确保将其添加到<defs>元素之后和之外），并设置href属性以定位所需图标的ID。

例如，要使用左对齐图标，请添加以下代码：

<use href="#leftalign"></use>

要将图标放置在特定位置，请添加x和y属性：

<use href="#leftalign" x="100" y="100"></use>

添加所有三个图标并将它们隔开的代码如下所示：

<use href="#leftalign" x="100" y="100"></use>

<use href="#rightcaret" x="300" y="100"></use>

<use href="#browser" x="500" y="100"></use>

检查您的浏览器，您应该会看到所有前三个图标：

11.使用`<symbol>`创建符号

除了使用组来定义图标外，还可以使用符号。符号几乎与组相同，但是您可以访问其他设置来控制视图框和宽高比。

如果您想做一些事情，例如将我们到目前为止创建的图标居中，这将非常有用。我们将其余三个图标变成符号，然后对其进行调整，以使其垂直填充100px高的空间，并在该空间中水平居中。

我们以与组相同的方式创建符号，只是将最后三个图标的代码分别包装在<symbol></symbol>标记中。我们还需要为每个添加唯一的ID。

我们需要给viewBox属性提供四个值。前两个将定义图标的左上角，第三个和第四个分别定义图标的宽度和高度。

从“警报”图标开始，其宽度和高度均为86px因此我们将其viewBox设置为0 0 86 86如下所示：

<symbol id="alert" viewBox="0 0 86 86">
<!-- Alert icon made with ellipses and a line -->
<ellipse cx="43" cy="43" rx="40" ry="40"></ellipse>
<ellipse style="fill:black;" cx="43" cy="65" rx="5" ry="5"></ellipse>
<line style="stroke-width: 8;" x1="43" y1="19" x2="43" y2="48"></line>
</symbol>

“播放”图标也86px的宽度和高度，而“下载”图标64px宽71px高。因此，我们的符号的相应代码应为：

<symbol id="alert" viewBox="0 0 86 86">
<!-- Alert icon made with ellipses and a line -->
<ellipse cx="43" cy="43" rx="40" ry="40"></ellipse>
<ellipse style="fill:black;" cx="43" cy="65" rx="5" ry="5"></ellipse>
<line style="stroke-width: 8;" x1="43" y1="19" x2="43" y2="48"></line>
</symbol>

<symbol id="play" viewBox="0 0 86 86">
<!-- Play icon made with ellipse and polygon -->
<ellipse cx="43" cy="43" rx="40" ry="40"></ellipse>
<polygon points="35 23, 60 43, 35 63" />
</g>

<symbol id="download" viewBox="0 0 64 71">
<!-- Download icon made with path -->
<path d="
  M 18 3
  L 46 3
  L 46 40
  L 61 40
  L 32 68
  L 3 40
  L 18 40
  Z
"></path>
</symbol>

12.用`<use>`放置符号

现在，我们可以像处理小组一样使用符号图标。但是，我们还将为每个提供的width和height属性设置为100 ：

<use href="#alert" x="100" y="200" width="100" height="100"></use>

<use href="#play" x="300" y="200" width="100" height="100"></use>

<use href="#download" x="500" y="200" width="100" height="100"></use>

您会看到每个基于符号的图标都以其100px x 100px空间整齐地填充并对齐：

尝试将width和height属性应用于基于组的图标之一的<use>元素。您会注意到没有任何变化。这是因为浏览器依赖于viewBox值（组不能具有）来知道如何缩放图标。

结语

这是完整代码的外观：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Hand Coded SVG</title>
  <style>
  html, body {
    height: 100%;
    width: 100%;
    background: #e9e9e9;
  }
  body {
    margin: 0;
    text-align: center;
  }
  .grid {
    width: 750px;
    height: 500px;
    margin: 0 auto;
    padding-top: 100px;
    padding-left: 100px;
    background-image: url('grid.png');
    position: relative;
  }
  .grid::before {
    content: "";
    border-left: 1px solid #7c7cea;
    position: absolute;
    top: 0;
    left: 100px;
    width: 750px;
    height: 600px;
  }
  .grid::after {
    content: "";
    border-top: 1px solid #7c7cea;
    position: absolute;
    top: 100px;
    left: 0;
    width: 850px;
    height: 500px;
  }
  svg {
    stroke: rgb(0, 0, 0);
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
  }
  </style>
</head>
<body>

<div class="grid">

<svg width="750" height="500">

<defs>

<g id="leftalign">
<!-- Left align icon made with lines -->
<line x1="3" y1="3" x2="48" y2="3"></line>
<line x1="3" y1="19" x2="65" y2="19"></line>
<line x1="3" y1="35" x2="48" y2="35"></line>
<line x1="3" y1="51" x2="65" y2="51"></line>
</g>

<g id="rightcaret">
<!-- Right caret icon made with a polyline -->
<polyline points="
  3 3
  30 28
  3 53
"></polyline>
</g>

<g id="browser">
<!-- Browser icon made with rectangle and lines -->
<rect x="3" y="3" width="80" height="60"></rect>
<line x1="3" y1="19" x2="83" y2="19"></line>
<line x1="20" y1="3" x2="20" y2="17"></line>
</g>

<symbol id="alert" viewBox="0 0 86 86">
<!-- Alert icon made with ellipses and a line -->
<ellipse cx="43" cy="43" rx="40" ry="40"></ellipse>
<ellipse style="fill:black;" cx="43" cy="65" rx="5" ry="5"></ellipse>
<line style="stroke-width: 8;" x1="43" y1="19" x2="43" y2="48"></line>
</symbol>

<symbol id="play" viewBox="0 0 86 86">
<!-- Play icon made with ellipse and polygon -->
<ellipse cx="43" cy="43" rx="40" ry="40"></ellipse>
<polygon points="35 23, 60 43, 35 63" />
</g>

<symbol id="download" viewBox="0 0 64 71">
<!-- Download icon made with path -->
<path d="
  M 18 3
  L 46 3
  L 46 40
  L 61 40
  L 32 68
  L 3 40
  L 18 40
  Z
"></path>
</symbol>

</defs>

<use href="#leftalign" x="100" y="100"></use>

<use href="#rightcaret" x="300" y="100"></use>

<use href="#browser" x="500" y="100"></use>

<use href="#alert" x="100" y="200" width="100" height="100"></use>

<use href="#play" x="300" y="200" width="100" height="100"></use>

<use href="#download" x="500" y="200" width="100" height="100"></use>

</svg>

</div>

</body>
</html>

这涵盖了手工编码SVG的要点！让我们回顾一下并总结一下我们学到的东西：

设置您的<svg>元素以包装整个图形。
使用<line>和<polyline>创建线。
使用<rect> ， <ellipse>和<polygon>创建闭合形状。
使用<path>创建所需的任何内容。
使用<g>元素对形状进行分组。
对于具有额外功能的类似团体的行为，请使用<symbol>
使用<defs>元素定义任何可重用的符号和组。
将定义的可重用符号和组放在<use>元素中。

我们了解到在本教程中一些坚实的基础，但还有很多你可以用SVG这样做并不到此为止，不断挖掘和发现更多的是可以实现的东西真棒！

同时，希望您不再感到完全依赖于矢量设计应用程序来进行SVG创作，并且您有信心手工制作一些自己的图形。对于更复杂的图形，仍然可以使用设计应用程序，但是您可以利用自己拥有的构建块做很多事情，充分利用手工编码带来的速度和控制。