SVG堆栈精灵没有减少发送请求的数量

Posted 2023-03-04

【中文标题】SVG堆栈精灵没有减少发送请求的数量

【英文标题】：SVG stack sprite not reducing number of sent requests

【发布时间】：2021-08-10 21:09:55

【问题描述】：

我有大约 30 个彩色 .SVG 图标，为了简单起见并减少发送到服务器的请求数量，我创建了一个像这样的集成 .SVG：

<?xml version="1.0" encoding="iso-8859-1"?>
<svg
    xmlns="http://www.w3.org/2000/svg" version="1.1"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xmlns:svgjs="http://svgjs.dev/svgjs">
    <defs>
        <style>
            <![CDATA[
      .sprite  display: none; 
      .sprite:target  display: inline; 
    ]]>
        </style>
    </defs>
    <svg class="sprite" id="search" viewBox="0 0 24 24">
        <g  transform="matrix(1,0,0,1,0,0)">
            <path d="M 9 2 C 5.1458514 2 2 5.1458514 2 9 C 2 12.854149 5.1458514 16 9 16 C 10.747998 16 12.345009 15.348024 13.574219 14.28125 L 14 14.707031 L 14 16 L 20 22 L 22 20 L 16 14 L 14.707031 14 L 14.28125 13.574219 C 15.348024 12.345009 16 10.747998 16 9 C 16 5.1458514 12.854149 2 9 2 z M 9 4 C 11.773268 4 14 6.2267316 14 9 C 14 11.773268 11.773268 14 9 14 C 6.2267316 14 4 11.773268 4 9 C 4 6.2267316 6.2267316 4 9 4 z" fill="#616161" class="color000 svgShape"></path>
        </g>
    </svg>
    <svg id="history" class="sprite"  viewBox="0 0 48 48">
        <g transform="matrix(1,0,0,1,0,0)">
            <path fill="none" d="M0 0h48v48h-48z"></path>
            <path d="M25.99 6c-9.95 0-17.99 8.06-17.99 18h-6l7.79 7.79.14.29 8.07-8.08h-6c0-7.73 6.27-14 14-14s14 6.27 14 14-6.27 14-14 14c-3.87 0-7.36-1.58-9.89-4.11l-2.83 2.83c3.25 3.26 7.74 5.28 12.71 5.28 9.95 0 18.01-8.06 18.01-18s-8.06-18-18.01-18zm-1.99 10v10l8.56 5.08 1.44-2.43-7-4.15v-8.5h-3z" opacity=".9" fill="#757575" class="color000 svgShape"></path>
        </g>
    </svg>
    
// more icons here
</svg>

我在我的 html 页面中这样称呼我的图标：

<img class="w3-width-30 w3-height-30 w3-padding-all-4 w3-right" src="~/icons/Sprite.svg#comment" />

并且在某些页面中超过 20 个图标。

问题：在加载页面期间，向服务器发送的请求太多，所以我认为我的精灵不起作用。不知道怎么回事？

【参考方案1】：

我不知道如何加载带有标签的 SVG 精灵，但还有另一种方法可以在您的页面上加载精灵。

遵循 code-sn-p 可以轻松完成您的工作。首先，您必须添加 SVG 文件位置而不是图标的 id。

<svg  >
    <use xlink:href="/sprite.svg#history" />
<svg>

你可以在标签或这样的标签中使用它

<a href="#">
    <svg  >
        <use xlink:href="/sprite.svg#history" />
    <svg>
</a>

这里还有Same origin policy的funda。

如果您在 xlink:href 中使用 URL，则它们需要从同一个域加载。以这种方式加载的 SVG 具有跨域保护。有些人只是直接从他们的静态资产中提供服务。您也可以使用代理。

【讨论】：

感谢您的回复。我删除了<img> 标签并使用了您所说的图标，重新加载页面并仍然向服务器发送许多请求，而不是只发送一个请求！正如您在所附图片中看到的那样。

抱歉。我了解到您在从 sprite 加载 SVG 时遇到问题。实际上，您正在从文件中请求特定组件。因此，第一个浏览器将下载该文件，然后为您提供组件。如果您使用的是 sprite 文件，则浏览器将加载整个文件。最好的选择是使用内联 SVG 代码。这不会影响页面速度，并且您的 HTTP 请求会更少。

您可以使用在线工具清理您的 SVG 代码并缩小代码。

我尝试使用 SVG 图标，作为这样的 CSS 背景：background-image: url('../icons/Sprite.svg#tag'); 并再次加载页面，一个请求一个图标，总共有很多请求！也许svg sprite 过程不适合这个目的，应该使用内联，尽管内联编码不是一种干净且有利于维护编码。

绝对是兄弟！所有资源都将被加载，因为它们位于一个文件中。您应该以某种方式使用内联 SVG 技术来获得最大效率。