欢迎关注富途web开发团队 ，缺人从众小编刚来公司的时候，有个需求需要做一个图形动画，当时本来想使用图片做的。Toobug看了需求后，就说可以使用SVG做呀。小编当时对与SVG一点都不会呀。Toobug看我那无辜的表情，说没事。我这有一本书 《SVG精髓》（作者：就是Toobug），你拿去看看，边学边做呗。好吧，小编后面就看了一个星期的SVG精髓，现在也算入门了吧。那么今天小编也不是让大...
欢迎关注富途web开发团队 ，缺人从众
小编刚来公司的时候，有个需求需要做一个图形动画，当时本来想使用图片做的。Toobug看了需求后，就说可以使用SVG做呀。小编当时对与SVG一点都不会呀。Toobug看我那无辜的表情，说没事。我这有一本书 《SVG精髓》（作者：就是Toobug），你拿去看看，边学边做呗。
好吧，小编后面就看了一个星期的SVG精髓，现在也算入门了吧。
那么今天小编也不是让大家来买书的，只希望我们团队 WillWang 翻译的这篇SVG入门文章会对大家入门SVG有帮助。
正文
可缩放矢量图形的一大优势（除了它们可以被无限缩放而没有质量损失之外）是一旦你知道了基本的原理，无需打开绘图程序你就能很容易地手写出一些简单的形状。
只要很少的几行代码你就可以拥有你的自定义图标，而且你还很清楚每个图标是怎么组合出来的。当你创建自己的 SVG 时，你可以确保以最有效的方式来编写它们，并且当你在站点中使用它们时，你拥有最大的控制权。
在本教程中，我们将涵盖手写 SVG 的所有基本原理，但我不会用一个仅仅是丢出一系列相关形状和属性的文章来烦你们。相反，你们会通过实践来学习如何手写 SVG，创建出本教程开头那张图片上所列的6个图标（在线示例）。在此过程中，你将会用到手写 SVG 所需的所有基本元素。
说到那些基本元素，让我们快速地介绍一下他们每一个的情况。
基本的 SVG 元素
你可以深入 SVG 复杂的细节，但这对我们即将创建的图标不是必须的。以下列表涵盖了我们将用到的构建块。
<svg>包裹并定义整个矢量图。<svg>标签之于矢量图就如同<html>标签之于一个 web 页面。<line>创建一条直线。<polyline>创建折线。<rect>创建矩形。<ellipse>创建圆和椭圆。<polygon>创建多边形。<path>通过指定点以及点和点之间的线来创建任意形状。<defs>定义一个可复用的图形。初始情况下<defs>里面的内容是不可见的。<defs>标签之于矢量图就如同<head>标签之于一个 web 页面。<g>将多种形状组合起来。将组合后的形状置于<defs>中可以让它能够被复用。<symbol>类似于一个组合，但是拥有一些额外的特性。通常被置于<defs>标签中便于复用。<use>获取在<defs>中定义的复用对象并在SVG中显示出来。
当我们继续阅读并创建我们的图标时，我们将以上面所看到的元素列表的顺序进行。
起始文件
在我们开始之前，从这个 GitHub 仓库取一份起始文件。你可以下载一个 .zip 格式的文件或者直接将这个仓库 clone 到本地。
我们将从一个已经包含了一些基本的 HTML 和 CSS 的文件开始。这会给我们即将创建的 SVG 以一些样式，也会在页面上准备一些小网格。我们将会在这些网格上创建我们的图标，希望它能在你放置你的 SVG 时帮助你确定坐标。
当你打开 Starter Files 目录下的文件 handcodedsvg.html 时，你应当会看到如下图所示的样子：
x 和 y 值概述
在网站的二维平面上，用 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 文件中有一些内嵌的 CSS 设置了我们即将创建的图标的默认样式。
svg {
stroke: #000;
stroke-width: 5;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}
复制代码上述 CSS 设置了我们的图标是无填充的，粗细 5px 的黑色线条绘制，边角平滑。
1. 设置 SVG
创建任何 SVG 的第一步是写下一个 <svg></svg> 元素。你所期望你的 SVG 显示的所有内容都必须放在这个标签内部。在这个元素上可以使用一些属性，但为了保持简单，我们只使用宽度和高度。
将下面的代码添加到你的 HTML 文档的 <body> 标签里去：
<svg width="750" height="500">
</svg>
复制代码注意：在我们的起始文件中的 CSS 会将这个 SVG 向下和向右各偏移 100px，以此保证 SVG 的左上角被置于背景网格中两条最粗的直线的交点处。在本教程的 CodePen 演示中的值也可能会稍有不同——但可以随意地对它们进行操作。
2. 创建 左对齐 图标
让我们从使用 <line> 元素创建这个左对齐图标开始：
你会用到 line 元素的4个属性：
x1：起点的水平轴坐标y1：起点的竖直轴坐标x2：终点的水平轴坐标y2：终点的竖直轴坐标
综上，你会使用属性 x1 和 y1 来设置直线的起点，使用属性 x2 和 y2 来设置直线的终点。
让我们创建我们的图标的第一条线，即顶部的那条。我们打算让线长 45px，然而我们使用的 5px 粗细的笔画会在我们的线条外增加一些额外的像素。因此我们需要将线条向右下角偏移 3px 以确保所有因 stroke 产生的额外像素都不会被剪掉。
基于上述原因，我们从 x 轴的坐标 3 和 y 轴的坐标 3 处开始我们的直线。我们可以用属性 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 递增来创建所需的垂直间距。
再看一看你的浏览器预览，你应该看到所有的四条线。你也可以直接在下面的 codepen 中编辑 SVG:
代码详情：codepen.io/new4/
在我们继续之前先注释掉你的图标
有了这些代码，你的第一个图标就已经完成了。我们已经准备好继续去创建下一个图标了，我们想在网格的相同位置上创建这个图标，但现在 左对齐 图标占着这个位置。因此，现在需要注释掉它的代码来清理空间。稍后当我们将图标转换为可重用部件时，我们会回过头来恢复被注释掉的代码。
你需要对我们之后创建的每一个图标做同样的事情，即在完成创建之后将其注释掉。出于这个原因，在每个图标的代码之上添加一个小提示或许是个不错的注意，这样在之后回顾的时候你就知道哪个是哪个了。
3. 创建一个 插入 图标
对于这个图标，让我们使用直线 <line> 元素衍生而来的折线元素：即 <polyline>。我们将会使用它来创建一个指向右方的插入符。
<polyline> 元素只有一个属性：points。在这里你会使用一对对的数字来设置一系列的点。点和点之间的线段会自动绘制出来。数值对就简单地一个接一个的被写在点属性里。可以使用逗号分隔，但这不是必须的。为了便于阅读，你可能还想在代码中将每一对值写成一行。
我们会在上一个图标的起始点处开始我们的 插入 图标，那就是 (3, 3)，这确保了我们的笔画和线的端头不会被剪掉。我们想让第二个点向右移动，并向下移 25px，那么我们把它设为 (30,28)。我们的第三个点应该与第一个点垂直对齐，同时再向下移动 25px，所以它应被设为 (3,53)。
你可以把这些点添加到 <polyline> 的 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>
复制代码看一看你的浏览器预览，你会看到你的 插入 图标的显示：另一个图标就这样完成了！
代码详情：codepen.io/new4/
同样地，在进入下一个图标之前先注释掉当前这个图标，并给它加上一个能让你知道它是什么图标的小提示。
4. 创建一个 浏览器 图标
现在我们有了线条，让我们从矩形（<rect>）开始创建一些形状。我们将把它与一些 <line> 结合起来创建一个 浏览器 图标。
长方形和正方形可以通过 <rect> 元素来创建。<rect> 有4个需要提供值的属性：
x：左上角的x轴坐标值y：左上角的y轴坐标值width
最低0.47元/天 解锁文章
1264
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
