用于多个 img 元素的图像/svg 的最佳实践是什么？

Question

我有一个资产asset.svg，我想将它用于多个img 元素。

只有一个svg 文件被其他img 元素引用为src 有什么问题吗？

或者我应该有一个单独的svg 文件来伴随每个img 元素。

这里是代码沙箱的链接，其中一个 svg 用作三个单独的 img 元素的 src。

code sandbox

Answer 1

一个 svg 文件可以根据需要在 src 属性中多次使用。多次使用同一个文件没有任何问题。

例如

<img class="image-1" src="src/chance.svg" />
<img class="image-2" src="src/chance.svg" />

.image-1 {
   // styles here
}
.image-2 {
// styles here
}

Answer 2

好的，事情就是这样，我自己也面临着两难境地。我正在使用一张图片，并想要不同的颜色。显然，我必须制作两个 JPG 或 PNG 来实现这一点，但切喉是加载时间。我想要重用能力。

如果您在 html 中使用原始 SVG，那么您将与页面的其余部分一起获得缓存，但除了放置在代码中之外，它不能重复使用。

<div>
<svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="chance" filter="url(#filter0_d)">
<rect x="4" width="25" height="25" rx="5" fill="#52A5FF"/>
<rect x="4.5" y="0.5" width="24" height="24" rx="4.5" stroke="#1F8BFF"/>
</g>
<defs>
<filter id="filter0_d" x="0" y="0" width="33" height="33" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
</defs>
</svg>

</div>

但是，如果您像使用它一样将其用作图像源，那么它将通过 http 请求获取并与获取它的 html 代码分开缓存。 这种技术的另一个优点是它会单独缓存，您可以在站点上的其余页面中使用缓存的功能，而不仅仅是它自己的父页面

<div>
<img src="https://j199m.csb.app/src/chance.svg" />
    <img src="https://j199m.csb.app/src/chance.svg" />
    <img src="https://j199m.csb.app/src/chance.svg" />
</div>

你甚至可以将它用作背景图片 - 看看它在工作中重复它的自我魔法

div {
background: url(https://j199m.csb.app/src/chance.svg);
}

<div>hehe haha</div>

底线理论

HTTP 缓存基于 URL 工作，它是“全有或全无” - 您可以指示客户端要么从缓存中获取整个资源，要么完全重新加载它，也就是硬刷新。

现在，通过“内联”您的 SVG，您可以让它们成为 HTML 文档的一部分 - 它们不再是外部资源，可以单独检查它们是否可以从缓存中获取或需要重新加载，主题到页面缓存。

因此，如果您有三个 HTML 文档，它们都内联了相同的 SVG 图像，则图像的代码将被加载 3 次 - 因为它是三个 HTML 文档的一部分。

因此，如果您有三个 HTML 文档，它们都具有相同的 SVG 图像作为外部源，则图像将被加载一次，然后在每次请求时从缓存中加载 - 因为它是单个缓存资源的一部分，不与 html 的其余部分耦合.

如果图像作为外部资源嵌入（如 img、background-image、object...），则它只会被加载一次，即在浏览器加载的这三个 HTML 页面中的第一个页面上。在其他页面上，它会识别，“嘿，具有此特定 URL 的外部资源已经在我的缓存中 - 无需再次加载它。

这个答案很好地说明了https://stackoverflow.com/a/37832616/10588650