svg web_为Web优化SVG

优化SVGs对于Web项目（可缩放矢量图形）具有减少文件大小，使它们更容易与工作的双重好处。 但是很多时候，我打开了一个Web项目，发现通过一些直接的优化，SVG资产可以大大缩小。 在本文中，我将分享优化SVG资产的过程，如果您是不熟悉Web上的SVG的设计师或开发人员，这可能会为您提供帮助。

我假设您已经被出售SVG而不是图标字体或PNG所带来的好处–但是如果您不满意， 这里有一篇很容易说服您的文章 。

许多图标库都提供了已经过优化的SVG资产。 但是，如果您要创建自己的图形，或者它们是由另一位设计师提供的，则可能需要通过一些优化步骤来运行它们。 我主要使用Adobe Illustrator创建和编辑SVG。 这是在Illustrator中创建的一个相当简单的图标（ 图01 ）：

图01

我们可以通过以下方式保存此文件 ：转到文件>另存为，然后选择“ SVG”选项。 但是，如果我们查看已保存的SVG的代码，就会发现它非常膨胀。 该代码包含许多不必要的数据-可能会折叠的组，可能会合并的路径，程序本身创建的元数据等等：

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
< svg
  version=" 1.1 "
  id=" Layer_1 "
  xmlns=" http://www.w3.org/2000/svg "
  xmlns: xlink=" http://www.w3.org/1999/xlink "
  x=" 0px "
  y=" 0px "
  viewBox=" 0 0 800 800 "
  enable-background=" new 0 0 800 800 "
  xml: space=" preserve "
>
  < g>
    < pathd=" M90,675.6L424,97.1l48.5,28l-334,578.5L90,675.6z "/>
    < path
      d=" M547.6,279.3h70.2l-10.1,88.2l80.7-37l21.8,66.7l-87.3,17.6l59.9,65.8l-56.4,40.7l-43.8-76.8l-43.8,76.8l-56.4-40.7
		l59.9-65.8L455,397.2l21.8-66.7l80.7,37L547.6,279.3L547.6,279.3z "
    />
  </ g>
</ svg>

每个图形程序都有其保存SVG的方式，但是不管使用哪种图形程序，如果不进行优化，它们仍然可能包含很多额外的数据。 让我们看看一些删除方法，并为我们的目的提供尽可能少的资产。

运行程序包

SVGO是一个NPM软件包，可在构建时对SVG资产运行优化过程，因此在工作流中进行类似的工作绝对是一个好主意。 但是，可视化工具通常可以更好地删除多余的路径和组，并允许我们根据所需结果调整（和预览）优化设置。

SVGOMG快速获胜

快速删除大量此类无关数据的一种方法是通过Jake Archibald的工具SVGOMG运行该数据（ 图02 ）。 您可以上传SVG文件，也可以直接粘贴到代码中，并且根据选择的选项，您的SVG将大大缩小，而不会产生不利的视觉影响。 您可能需要尝试不同的选项才能获得所需的结果，尤其是在SVG非常复杂的情况下，但是我通常发现对于简单的图标，我可以检查大多数选项而不会不利地影响结果。

图02 SVGOMG界面中的SVG图标

通过SVGOMG运行它之后，代码如下所示：

< svgxmlns=" http://www.w3.org/2000/svg "viewBox=" 0 0 620.2 606.5 ">
  < defs/>
  < pathd=" M0 578.5L334 0l48.5 28-334 578.5-48.5-28zM457.6 182.2h70.2l-10.1 88.2 80.7-37 21.8 66.7-87.3 17.6 59.9 65.8-56.4 40.7-43.8-76.8-43.8 76.8-56.4-40.7 59.9-65.8-87.3-17.6 21.8-66.7 80.7 37-9.9-88.2z "/>
</ svg>

这比使图形保持最佳状态要好得多，但是它确实包含一个多余的<defs/>元素。 而且，如果原始SVG包含组，层和效果，则SVGOMG之类的工具可以对其进行优化的程度是有限的。 如果我们返回图形程序并在通过优化工具运行它之前进行一些编辑，那就更好了。

编辑SVG

如果您知道如何编写SVG代码，那么这可能会产生最干净，最精简的结果。 请查看MDN文档，以获取绘制SVG路径的指南 ，以及如果您有兴趣了解更多有关此视频的内容 ，请访问Heydon Pickering的 视频 。

但是对于我们大多数人来说，只有使用可视工具才能编辑SVG。 对于此示例，我使用的是Adobe Illustrator，但是其他类似Sketch的编辑功能也类似。

您可以通过编辑SVG剥离多少代码，取决于其复杂性和用例。 以下提示通常适用于图标和简单图形。 复杂的插图通常无法在不影响最终结果的情况下进行如此程度的编辑-在某些情况下，最好使用PNG或JPG。

展开群组

优化SVG时，我要做的第一件事是删除所有隐藏层，并在可能的情况下扩展组。 这将删除SVG代码中的所有<g>标签分组路径。 如果您打算对某些组进行样式设置或设置动画效果，则可能希望使其保持完整。 您可以使用Shift + CMD + G快捷键在Illustrator中展开一个组（ 图03 ）。

图03 Illustrator中的“图层”面板，显示带有两个对象的组

转换为路径

接下来，在可能的情况下，我将所有笔画转换为填充路径（ 图04 ）。 在Illustrator中，我们可以使用Object> Expand来实现 。 可能会有一些例外：如果要对stroke-dasharray或stroke-dashoffset样式或设置其动画stroke-dashoffset ，则需要保持这些样式不变，同样，如果要在缩放SVG时保留笔画宽度。

图04笔划前后显示的图标

您还可以使用Illustrator中的“ 扩展”选项将图像的区域（例如，简单图案）转换为可单独选择的路径。 对于复杂或详细的模式，最好避免这种情况。

将文字转换为轮廓

如果文本纯粹是装饰性的，或者将内容以其他方式传达，例如带有标题，按钮文本或aria-label ，将文本转换为轮廓有时是个好主意。 尽管可以很好地使用SVG <text>元素，但这样做并非总是有意义，特别是如果您需要加载另一种Web字体以显示SVG文本时。 我们可以通过选择文本并选择“ 类型”>“转换为轮廓”将文本转换为Illustrator中的路径。

合并路径

现在，SVG中的所有内容都是一条路径，我们可以合并它们以确保绘制尽可能少的路径。 以“搜索”图标为例：两条相交的路径可以合并为一条，从而形成一条路径（ 图05 ）。

要在Illustrator中合并路径，请选择它们，然后使用“路径查找器”菜单中的合并选项。

这里的例外是，如果我们要分别设置任何路径的样式或动画，在这种情况下，应避免合并它们。

图05路径合并前后的图标

删除任何其他路径或组

合并路径后，我希望对层进行最后检查，并删除可能在此过程中创建的任何空层或重复路径。

适合艺术品范围

当我在HTML中使用SVG图标时，我不想在其周围留有无法摆脱的多余空间。 如果SVG viewBox大于内容，就会是这种情况。 在Illustrator中，我选择“ 对象”>“画板”>“适合图稿边界”，以使viewBox尺寸适合图稿（ 图06 ）。

图06左侧的图标有一个比所需的更大的viewBox。 选择“适合艺术品范围”后，该图标紧贴地放置在viewBox中，没有多余的空间（右）。

要了解有关SVG viewBox更多信息，请查看Sara Soueidan的这篇文章 。

出口

现在，我们准备保存SVG。 在Illustrator中，我们可以选择“ 文件”>“另存为”，然后选择SVG作为格式。 下一个屏幕将为我们提供SVG的一些选项。 我通常检查“ Presentation属性”中的样式选项。

完成这些步骤后，SVG现在可以通过优化工具运行。 对于图标，运行这些手动优化后，通常可以检查SVGOMG中的大多数选项。 您会注意到该代码更加简洁。 但是，即使这样并不能总是删除所有可能删除的内容。 在下面的代码中，我仍然留下一个空的<defs>元素，因此值得进行最后的手动清理，并在我的代码编辑器中将其删除。 现在，SVG可以使用了！

使用SVG

SVG可以在网络上以多种方式使用，包括：

• 在<img>标记中
• 在background-image CSS属性中
• 内联在HTML中

精灵

特别是对于图标，嵌入式SVG在性能和灵活性方面提供了最多的优势，通常使用它们的最佳方法是创建一个sprite 。 如果您不想手动执行此操作，则可以使用NPM软件包来自动生成SVG精灵。 Icomoon是提供类似服务的应用程序。

然后，在使用它们时，我们可以<use>元素引用它们，而不是粘贴整个SVG：

< svgxmlns=" http://www.w3.org/2000/svg ">
  < usehref=" #myIcon "/>
</ svg>

因为我们使用的是路径，所以我们可以使用以下CSS来指示所有SVG继承当前颜色，而不是使用fill属性-对于图标系统，这将有助于我们减少代码编写：在SVG图标中使用按钮将仅继承按钮的文本颜色。

svg{
  fill: currentColor ;
}

我们需要在优化过程中删除SVG本身的fill属性，以便以这种方式使用CSS设置样式。

结论

这听起来似乎需要采取许多步骤，但实际上，如果您了解选择的图形程序的方式，那么整个过程将花费很少的时间。 经过几次尝试，它就变成了肌肉记忆。 在项目开始时，我喜欢批量优化大多数SVG图标，从而使在场景中使用它们更加容易。 值得在前期投入一些时间，以使图形更容易在将来使用。

了解有关SVG的更多信息

Sara Soueidan是与SVG相关的所有事物的知名权威，并且已经发表了许多有关该主题的深入文章，您可以在此处找到。 如果您想增加您的SVG知识，我强烈建议您阅读它们。

翻译自: https://css-irl.info/optimising-svgs-for-the-web/