超越'使用”元素的自动SVG压缩

如果您绘制自己的SVG文件或从Internet下载它们，那么SVG-编辑或SVGOMG之类的工具是您的朋友。使用这些工具压缩文件仅需几秒钟，并且可以大大降低您的文件大小。但是，如果您需要使用SVG内联用来与代码进行动画或互动，那么对于代码可读性，您仍然可以做很多事情。

重复使用SVG的并不总是一个选择，但是当它是时，您将不后悔花几分钟的时间将其付诸实践。

在本文中，我将展示一个示例，我能够利用这一元素的大量优势 - 不仅是为了保持文件大小，而且还可以更清晰地标记，该标记变得更加清晰，易于维护。

这是我需要使用的第一个设计。它最初是在Illustrator中创建的：

查看以下代码，这是直接从软件导出的原始文件，重2.05kb：

这根本不是一个重的文件。但是，打开它，您会发现有很多空的标签，弃用的命名空间，不必要的空白空间，逗号和软件应用的额外信息。这使得代码很难使用，烦人的扫描并为文档中的数百行创建了一个很大的滚动。

您还会注意到该文件确实使用了和元素，但并非以最佳方式使用。那不是软件的错！原始文件中的每个宇航员插图都有一个剪裁面具：一个无形的圆圈，就像一个窗口一样，我们可以看到我们的角色。没有它，宇航员的诉讼将在圆圈外面泛滥成灾。在插画家中，有几种方法可以避免这种情况，例如使用探路者选项裁剪这些额外的零件。这样，我们将获得一些字节，并避免仅使用一个额外的圆圈来剪切我们不会显示的图形信息。文件的压缩从软件开始。尽管如此，如果我们不想编辑原始文件，我们还可以改进代码。

用SVGOMG压缩SVG并保持默认选项不会付出任何努力，您将获得一个重量为1.46kb的文件。与原始大小相比，这是30％的降低，图形看起来完全相同。

重复使用内容

这将需要通过SVG并进行一些调整。我知道此选项需要更多时间来了解上一个示例，但这并不像看起来那样困难。

我们有一个重复的元素，即圆圈内的宇航员。那就是我们将在SVGOMG上压缩的一种。结果看起来像这样：

 <svg xmlns="“" http:> .st3，.st4 {填充：＃ffcb2f; stroke：＃12192c; streose width：1.4891; stroke-miterlimit：10} .st4 {fill：＃69b2b1} 
<circle cx="“" cy="“" r="“" fill="“＃12192C”/">   
<circle cx="“" cy="“" r="“" fill="“＃f6a2a4”/">   
<defs> <circle cx="“" cy="“" r="“"></circle> </defs>   
<clippath>  </clippath>
<g clip-path="“" url _>     
     
<path d="“" m74.3 m31.8 .7-c0 .7-.6 z cx="“" cy="“" r="“"></path>     
<circle cx="“" cy="“" r="“"></circle>     
   
</g> 
</circle></circle></svg>

第一建议：

1. 将内容移动到CSS文件（假设您可以使用SVG内联用户，并且文档中链接了样式表）。
2. 用对您有意义的东西重命名ID。
3. 将这些复杂的数字（例如“卒中）=“ 1.489”）圆形乱七八糟，以触及宽度=“ 1.5”。如果您在Illustrator中调整了向量大小，则可以选择缩放边框，这可能会发生。
4. 由于我们的行程线上的Join是圆形的，因此请删除中风限制=“ 10”，因为我们不需要它。
5. 该代码将是我们的宇航员模板。我们需要将所有内容包装在一个组中，向该组添加ID并将其放置在标签中。请注意，我们已经有一个元素，其中有一个圆。我们可以删除它，因为它将是较大的标签的一部分。

请注意，前两个圆圈的形状具有不同的半径和颜色。我们可以保持较小的速度并添加足够大以达到相同的效果的效果 - 同样，我们可以避免使用Illustrator中带有边框的圆圈。

另一个重要的是，我们当前的视图框太小，无法构建。让我们变得更大，并在X轴上添加一些负空间，以便我们可以开始从中间克隆宇航员。

要了解有关Viewbox的更多信息，请查看Amelia Wattenberger的《 Scaling Svering Svg》的精美指南。

我们将以这样的方式结束：

 <svg xmlns="“" http:>
  <g>
   <circle cx="“" cy="“" r="“" fill="“" currentcolor stroke="“＃12192c”" stroke-width="“"></circle> <clippath> <circle cx="“" cy="”" r="”"></circle> > > > > > > > > > > > > > > > > > > > > > > > > > > > >
   <g clip-path="“" url>  <path d="”" .7-.7-.5></path> <circle cx="“" cy="”" r="“"></circle> <ciripe cy r="“"></ciripe>  <path fill="“" none streoke="“＃12192c”" stroke-width="“" stroke-linecap="”" rond d="“" m76.3>
 
</path></g></clippath></g></svg>

内部的内容不会在任何地方渲染。要开始克隆我们的宇航员，我们需要将其ID链接在元素中：

Xlink：自SVG2以来，HREF被弃用，但最好将其用于兼容目的。您可以在现代浏览器中使用HREF，但是我在Safari上对其进行了测试，并且在撰写本文时也无法使用。如果您使用使用：HREF，请确保在SVG标签中包含此名称空间：XMLNS：XLINK =“ http://www.w3.org/19999/xlink（如果您决定使用HREF，则不需要它）。

现在，我们可以将相应的文本添加到第一个图中，并将其与变换属性对齐。我们最好将这两个元素放在一个小组中，因此将来我们将能够将整个小组转换为我们想要的位置：

 <g transform="“转换（-95">
  
  <text transform="“转换（25">技术领导者</text>
</g>

连接线是可以直接使用直接绘制的简单形状。路径看起来很恐怖，但是对于矩线来说，无需担心。我将解释此代码：

d =“”是用于数据的，这就是我们将命令放置的地方。 M是将我们的手移到我们开始绘画的地方（但这没有绘制任何内容）。 -4 200意味着我们将铅笔放在左侧的四个单元，将200个单元放在视图框的底部（遵循SVG坐标系的方向）。 v是开始绘制垂直线的命令，该垂直线将从此位置转到-25个单位。 H用于水平，因此我们在从那里到200到200的线。感觉就像徽标作家。

我以三个路径分开了线，但是在一系列命令后，我们只能使用一个带有M值的线，以移动我们的手并开始从坐标系中的新点开始绘制。

看看最终文档。现在，该文件重779个字节，并具有12行可读和可扩展的代码：

如果我们在中定义的属性中声明任何值，则由于元素的性质，不可能在其克隆中更改它。这就是为什么在上面的示例中，主圆的填充被用电流彩色的值代替，以控制所有复制的背景。 CurrentColor将继承该元素的CSS颜色值（或上方的任何元素）。在SVG中，我正在为某些复制的宇航员添加一类，并在CSS中添加颜色值。这样，我将能够在该类中更改元素的所有实例。要了解有关以及如何设计其内容的更多信息，Sara Soueidan的这篇文章拥有您需要知道的一切。

准备好此代码后，我们将能够更轻松地将图形扩展到类似的内容：

以下是并排比较可读性和代码量的三个示例，我们从241到10条整齐的行：

以上是超越'使用”元素的自动SVG压缩的详细内容。更多信息请关注PHP中文网其他相关文章！