Question

我在SVG中存储图标（因为质量）。我想知道哪种方式更好：

将SVG设为图像<img src="icon.svg">
放入html <svg>... </svg>

有时它的形状很复杂。例如Android图标：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="40" height="40" viewBox="0 0 32 32">
<path d="M5,8.978c-1.104,0-2,0.896-2,2v8c0,1.104,0.896,2,2,2s2-0.896,2-2v-8C7,9.873,6.104,8.978,5,8.978z" fill="#85C808"/>
<path d="M27,8.978c-1.104,0-2,0.896-2,2v8c0,1.104,0.896,2,2,2s2-0.896,2-2v-8C29,9.873,28.104,8.978,27,8.978z" fill="#85C808"/>
<path d="M8,24.978h2v5c0,1.104,0.896,2,2,2s2-0.896,2-2v-5h4v5c0,1.104,0.896,2,2,2s2-0.896,2-2v-5h2v-15H8V24.978z" fill="#85C808"/>
<path d="M20.723,2.53l1.027-1.779c0.139-0.24,0.057-0.545-0.184-0.684c-0.238-0.139-0.545-0.057-0.683,0.184 l-1.001,1.734C18.732,1.345,17.41,0.978,16,0.978c-1.409,0-2.731,0.367-3.882,1.008L11.116,0.25   c-0.139-0.239-0.443-0.321-0.684-0.183c-0.238,0.138-0.32,0.443-0.183,0.683l1.028,1.78C9.294,3.986,8,6.328,8,8.978h16   C24,6.328,22.706,3.986,20.723,2.53z M13,5.978c-0.553,0-1-0.447-1-1s0.447-1,1-1s1,0.447,1,1S13.553,5.978,13,5.978z M19,5.978   c-0.553,0-1-0.447-1-1s0.447-1,1-1s1,0.447,1,1S19.553,5.978,19,5.978z" fill="#85C808"/>
</svg>

在第一种情况下，我们减少了http请求的数量。在第二种情况下，浏览器呈现相对复杂的svg。或者浏览器是否在第一种情况下呈现它？或者浏览器可以在下次缓存它吗？

有什么想法吗？

Answer 1

如果图像很复杂，我建议不要嵌入它，就像我们通常不嵌入CSS样式表一样。这样浏览器就可以缓存图像，以便以后使用。

如果图像非常简单，我的建议是嵌入它，因为HTTP请求开销会比下载图像更大。

SVG图像与SVG嵌入

1 个答案: