SVG载荷：与外部SVG一起工作的另一种方式

SVG很棒：它们很小，在任何规模上看起来都很清晰，并且可以在不创建单独文件的情况下自定义。但是，今天的Web标准中我觉得缺少一些东西：将它们包含在外部文件中，该文件也保留了格式的自定义功能。

例如，假设您想将存储的网站徽标存储为Web-logo.svg。您可以做：

 <img  src="%E2%80%9C/images/logo.svg%E2%80%9D/" alt="SVG载荷：与外部SVG一起工作的另一种方式" >

如果您的徽标到处都一样，那很好。但是在许多情况下，同一徽标有2-3个变体。例如，Slack有两个版本。

如果我们有一种自定义上面徽标的填充颜色的方法，则可以传递任何任意颜色来呈现所有变化。

也以图标为例。您不想这样做，对吗？

 <img  src="%E2%80%9C/icons/heart-blue.svg%E2%80%9D/" alt="SVG载荷：与外部SVG一起工作的另一种方式" >
<img  src="%E2%80%9C/iCons/heart-red.svg%E2%80%9D/" alt="SVG载荷：与外部SVG一起工作的另一种方式" >

加载外部SVG作为内联元素

为了解决这个问题，我创建了一个名为SVG-Loader的库。简而言之，它通过XHR获取SVG文件，并将其加载为内联元素，从而使您可以自定义填充和中风等属性，就像内联SVG一样。

例如，我的侧面项目SVGBox上有一个徽标。我可以拥有一个文件并自定义填充颜色：

我使用Data-SRC设置了SVG文件的URL。填充属性覆盖原始SVG文件的填充。

要使用图书馆，我唯一要确保的是要提供的文件具有适当的CORS标题以使XHR成功。库还在本地缓存文件，使后续文件更快。即使对于第一个负载，性能也与使用标签相当。

这个概念并不新鲜。 SVG Injext做类似的事情。但是，SVG-LOADER更易于使用，因为我们只需要在您的代码中包含库（通过<script>标签或JavaScript Bundle中）。不需要额外的代码。</script>

动态增添元素和属性的变化也会自动处理，这确保了它与所有Web框架一起工作。这是React的一个例子：

但为什么？

这种方法可能会感到非正统，因为它引入了JavaScript依赖性，并且已经有多种使用SVG的方法，包括内联和外部来源。但是有一个很好的情况，可以通过这种方式使用SVG。让我们通过回答常见问题来检查它们。

我们可以自己不仅仅是内联SVG吗？

插入是使用SVG的最简单方法。只需在HTML中复制并粘贴SVG代码即可。这就是SVG载荷最终正在做的。那么，为什么还要添加额外的步骤来从其他地方加载SVG文件呢？有两个主要原因：

1. 内联SVG使代码冗长： SVG可以从几行到几百行。如果您需要的只是几个图标，并且它们都很小，则内线SVG可以很好地工作。但是，如果它们很大或很多，这将成为主要的痛苦，因为那样，它们就变成了不是“商业逻辑”的代码中的长文本。代码很难解析。
   
   这与更喜欢外部样式表而不是标签或使用图像而不是数据URIS相同。难怪在React代码库中，首选方法是将SVG用作单独的组件，而不是将其定义为JSX的一部分。

2. 外部SVG更加方便：复制和粘贴通常可以完成工作，但是外部SVG确实很方便。假设您正在尝试在应用程序中使用哪种图标。如果您使用的是Inline SVG，则意味着来回获取SVG代码。但是，使用外部SVG，您只需要知道文件的名称即可。
   
   看看这个示例。 GitHub上最广泛的图标存储库之一是材料设计图标。使用SVG-LOADER和UNPKG，我们可以立即开始使用5,000个图标中的任何一个。

对于每个SVG而不是制作精灵，触发HTTP请求不是效率低吗？

并不真地。使用HTTP2，提出HTTP请求的成本已变得较小。是的，捆绑仍然有好处（例如，更好的压缩），但是对于非阻滞资源和XHR，在现实世界中，专业人士几乎不存在。

这是一支与上面类似的方式加载50个图标的笔。 （默认情况下，以隐身模式打开，因为文件被缓存）：

那标签（SVG符号）呢？

SVG符号将SVG文件的定义与其使用分开。我们可以拥有这样的东西，而不是在任何地方定义SVG：

 <svg>
  
</svg>

问题在于，没有使用第三方域上托管的符号文件的浏览器支持。因此，我们不能做这样的事情：

 <svg>
  
</svg>

Safari甚至不支持托管在同一域上的符号文件。

我们不能使用嵌入SVG的构建工具吗？

我找不到一种明显的方法来从URL获取SVG并将其插入通用捆绑包中，例如WebPack和Grunt，尽管它们存在于本地存储的SVG文件中。即使存在此操作的插件，设置捆绑器也不是完全简单的。实际上，我经常避免使用它们，直到项目达到确定的复杂性水平为止。我们还必须意识到，大多数互联网与诸如WebPack和反应之类的事情都是陌生的。简单的脚本可以具有更大的吸引力。

那标签呢？

标签是包含所有浏览器中工作的外部SVG文件的本机方法。

 <object data="“" https: preected width="”"> </object>

但是，缺点是我们无法自定义SVG的属性，除非它托管在同一域上（并且标签不尊重CORS标题）。即使文件托管在同一域上，我们也需要JavaScript来操纵填充，如以下：

 <object data="“" https:><p>简而言之，使用以这种方式使用外部SVG文件使使用图标和其他SVG资产的超符合意义。如前所述，使用UNPKG，我们可以在GitHub上使用任何图标，而无需额外的代码。我们可以避免在捆绑器中创建管道来处理每个图标的SVG文件或组件，而只是在CDN上托管图标。</p>
<p>以这种方式加载SVG文件可以包装很多好处，成本很少。</p></object>

以上是SVG载荷：与外部SVG一起工作的另一种方式的详细内容。更多信息请关注PHP中文网其他相关文章！