如何使用基本形状简化SVG代码

处理图标的方法有很多，但最佳方案始终包括SVG，无论它是内联实现还是作为图像文件链接。这是因为它们是在代码中“绘制”的，使它们在任何环境中都灵活、适应性和可扩展性。

但是，在使用SVG时，总有可能包含许多不必要的代码。在某些情况下，内联SVG的代码可能很长，以至于文档滚动更长，使用起来不舒服，是的，比它需要的要重一些。

我们可以使用<use></use>元素重用代码块，或者应用原生变量来在一个地方管理我们的SVG样式。或者，如果我们在服务器端环境中工作，我们总是可以添加一些PHP（或类似的）来提取SVG文件的内容，而不是直接将其放入。

这都很好，但是如果我们可以在文件级别解决这个问题，而不是求助于基于代码的方法，那不是很好吗？我想关注一个不同的视角：如何使用基本形状用更少的代码制作相同的图形。这样，我们就可以在项目中获得更小、更可控和语义化的图标的好处，而不会牺牲质量或视觉变化。我将介绍不同的示例，探讨常用图标的代码以及如何使用我们可以制作的一些最简单的SVG形状来重新绘制它们。

以下是我们将要处理的图标：

让我们看看我们可以用来制作这些图标的基本形状，这些形状使代码保持小巧和简单。

嘘！ 这是我在holasvg.com上创建的更长的简单图标列表！阅读完本文后，您将知道如何修改它们并使它们成为您自己的。

使用<line></line>元素简化关闭图标

这是从flaticon.com下载并由pixel-perfect构建的“关闭”或“交叉”图标的代码：

在这个例子中，所有事情都发生在<path></path>内部，数据属性（d）中有很多命令和参数。这个SVG所做的是从它的边界追踪形状。

如果您熟悉Illustrator，这相当于绘制两条单独的线，将它们转换为形状，然后使用路径查找器将两者组合以创建一个复合形状。

<path></path>元素允许我们绘制复杂的形状，但在这种情况下，我们可以用两条线创建相同的图形，同时保持相同的外观：

<code><svg height="50" overflow="visible" stroke="black" stroke-linecap="round" stroke-width="10" viewbox="0 0 50 50" width="50" xmlns="http://www.w3.org/2000/svg">
   <line x1="0" x2="50" y1="0" y2="50"></line>
   <line x1="50" x2="0" y1="0" y2="50"></line></svg></code>

我们首先定义一个viewBox，从0,0到50,50。您可以选择任何您喜欢的尺寸；SVG将始终很好地缩放至您定义的任何宽度和高度。为了简化操作，在本例中，我还定义了50个单位的内联宽度和高度，这避免了绘图中的额外计算。

要使用<line></line>元素，我们需要声明线的第一个点的坐标和最后一个点的坐标。在本例中，我们从x=0 y=0开始，结束于x=50 y=50。

这就是代码中的样子：

<code><line x2="50" y2="50"></line></code>

第二条线将从x=50 y=0开始，结束于x=0 y=50：

<code><line x1="50" y2="50"></line></code>

SVG笔划默认没有颜色——这就是为什么我们在stroke属性中添加黑色值的原因。我们还为stroke-width属性提供了10个单位的宽度，并将stroke-linecap设置为圆形值，以复制原始设计的那些圆角。这些属性直接添加到<svg></svg>标签中，因此两条线都将继承它们。

由于笔划比其默认大小1个单位大10个单位，因此viewBox可能会裁剪该线。我们可以将点向viewBox内部移动10个单位，或者将overflow=visible添加到样式中。

等于0的值可以删除，因为0是默认值。这意味着两行最终只有两行非常小的代码：

<code><line x2="50" y2="50"></line><line x1="50" y2="50"></line></code>

仅仅通过将<path></path>更改为<line></line>，我们不仅创建了一个更小的SVG文件，而且创建了一个更具语义和可控的代码块，这使得任何未来的维护都更容易。视觉效果与原图完全相同。

相同的交叉，不同的代码。

使用<circle></circle>和<path></path>元素简化时钟图标

我从The Noun Project的barracuda那里获得了这个时钟图标示例：

此形状也使用<path></path>绘制，但我们还有许多与所用软件和文件许可相关的命名空间和XML指令，我们可以删除这些指令而不会影响SVG。你能说出使用哪个插图编辑器创建图标吗？

让我们使用一个圆圈和一个具有更简单命令的路径从头开始重新创建这个。同样，我们需要从一个viewBox开始，这次是从0,0到100,100，并且宽度和高度与这些单位匹配。

<code><svg fill="none" height="100" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="10" viewbox="0 0 100 100" width="100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="40"></circle><path d="M50 25V50 H75"></path></svg></code>

我们将<svg></svg>标签中的样式保持与之前的图标相同。fill默认为黑色，因此我们需要显式地为其赋予none值才能将其删除。否则，圆圈将具有纯黑色填充，遮挡其他形状。

要绘制<circle></circle>，我们需要指示半径将位于其中的中心点。我们可以通过cx（中心x）和cy（中心y）来实现这一点。然后r（半径）将声明我们的圆圈有多大。在这个例子中，半径略小于viewBox，因此当笔划宽度为10个单位时，它不会被裁剪。

所有这些字母是怎么回事？查看Chris Coyier的插图指南，了解SVG语法的入门知识。

我们可以对时钟指针使用<path></path>，因为它有一些非常有用和简单的绘图命令。在d（数据）中，我们必须以M（移动到）命令开头，后跟我们将开始绘制的坐标，在本例中为50,25（靠近圆的顶部中心）。

在V（垂直）命令之后，我们只需要一个值，因为我们只能使用负数或正数向上或向下移动。正数将向下移动。H（水平）也是如此，后跟一个正数75，这将向右绘制。所有命令都是大写的，因此我们选择的数字将是网格中的点。如果我们决定使用小写字母（相对命令），则数字将是我们在一个方向上移动的单位数量，而不是坐标系中的绝对点。

相同的时钟，不同的代码。

使用<rect></rect>和<polyline></polyline>元素简化信封图标

我在Illustrator中绘制了信封图标，没有扩展原始形状。这是从导出中获得的代码：

Illustrator提供了一些导出图形的SVG选项。我在“CSS属性”下拉菜单中选择了“样式元素”，这样我就可以拥有一个包含类别的标签，我可能希望将其移动到CSS文件中。当然，应用SVG样式的方法有很多种。

我们在这个代码中已经有了一些基本形状！我没有选择Illustrator中的“形状到路径”选项，这在这里帮助很大。我们可以使用SVGOMG进一步优化它，以删除注释、XML指令和不必要的数据，例如空元素。如果需要，我们可以从那里手动删除其他额外内容。

我们已经有了一些更简洁的东西：

<code><svg version="1.1" viewbox="0 0 310 190" x="0" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" y="0">
  .st0{fill:none;stroke:#000;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10}
  <rect height="180" width="300" x="5" y="5"></rect>
  <polyline points="5 5 155 110 305 5"></polyline></svg></code>

我们可以删除更多内容而不会影响信封的视觉外观，包括：

• version="1.1"（自SVG 2以来已弃用）
• （这没有意义或用途）
• x="0"（这是一个默认值）
• y="0"（这是一个默认值）
• xml:space="preserve"（自SVG 2以来已弃用）

<code><svg viewbox="0 0 310 190" xmlns="http://www.w3.org/2000/svg">
  .st0{fill:none;stroke:#000;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10}
  
  <rect height="180" width="300" x="5" y="5"></rect>
  <polyline points="5 5 155 110 305 5"></polyline></svg></code>

如果我们真的想变得非常激进，我们可以将CSS样式移动到单独的样式表中。

<rect></rect>需要一个起点，我们将从那里扩展宽度和高度，因此让我们使用x="5"和y="5"作为我们的左上角点。从那里，我们将创建一个宽度为300个单位，高度为180个单位的矩形。就像时钟图标一样，我们将使用5,5作为起点，因为我们有一个10个单位的笔划，如果坐标位于0,0，则该笔划将被裁剪。

<polyline></polyline>类似于<line></line>，但此元素始终定义一个封闭的形状。这是一个直接来自MDN的示例：

记住我们之前为时钟图标绘制的圆圈？将r（半径）替换为rx和ry。现在您有两个不同的半径值。这是来自MDN的另一个示例：

总结

我们在短时间内涵盖了很多内容！虽然我们使用示例来演示优化SVG的过程，但我希望您从这篇文章中获得以下几点：

• 请记住，压缩始于在插图软件中绘制SVG的方式。
• 使用可用的工具，如SVOMG，来压缩SVG。
• 必要时手动删除不必要的元数据。
• 将复杂的路径替换为基本形状。
• <use></use>是“内联”SVG以及建立您自己的可重用图标库的好方法。

通过组合这些基本形状可以创建多少个图标？

我在holasvg.com/icons上制作我的列表，我将不断在此处上传更多图标和功能，现在您知道如何通过更改几个数字轻松修改它们。继续，让它们成为你自己的吧！

以上是如何使用基本形状简化SVG代码的详细内容。更多信息请关注PHP中文网其他相关文章！