Question

我目前正在建立一个针对现代浏览器和移动设备的网站。就性能而言，使用<svg>直接在HTML中内嵌SVG是否更好，或者使用<img>和/或背景图片更好。我在服务器上运行gzip以进一步压缩我的内容，而不是依赖于Javascript。

Answer 1

内联的优点：

单独文件的优点：

Answer 2

内联SVG会减少HTTP请求的数量，因此它应该在用户第一次访问时加快页面加载速度。但缺点是您的SVG不会被缓存在浏览器中，因此每次都必须加载它。我要说你是否只使用了一些SVG（比如10个左右），内联它们;但如果你有很多，请使用img + background-image。

您可能还需要考虑使用SVG定义并使用SVG use标记来引用SVG定义。这个方法很不错;特别是如果您需要在页面中多次重复SVG。有关此技术的更多信息：http://css-tricks.com/svg-sprites-use-better-icon-fonts/

My web app还可以帮助您轻松制作这些SVG定义＆amp;使用对。

Answer 3

Claudiu Creanga，你最正确，但不是最后一个：）

关于文件SRC：“如果您以后需要更改它，那么您只需更改一个文件;”

该文件也可以是单独的SVG，也可以是Inline。只需通过PHP包含XML /文本源，例如：

<?php include_once($_SERVER['DOCUMENT_ROOT'] . '/img/icon-home.svg'); ?>

我正在使用这种策略，因为我在我的图标上做了CSS3动画。这样您就可以在矢量程序中使用原始参考文件进行修改，简单上传将修复所有内联代码。如果您只是重新排列或操作它们，SVG内的对象和路径ID将不会改变。

Answer 4

没有通用的方法。它确实取决于很多事情，但是这里有一些基本策略可以单独使用或组合使用。

如果有：

少量的SVG，每个文件大小<5k –用HTML内联。压缩后的gzip / brotli大小约为1k。不论是否缓存，任何小数乘以1k都比相同数量的附加请求好。
数量众多的小型SVG <5k-使SVG精灵
任何数量大于5k的大型SVG，我们不需要通过CSS或JS访问SVG属性。然后<img src="name.svg">
任何数量的SVG，但是我们确实需要使用CSS来更改SVG属性，或者说为某些SVG属性设置动画。唯一可行的选择是内联svg。
如果我们需要SVG作为背景，但每个SVG小于5k：

.bg { background: url('data:image/svg+xml;utf8,<svg ...> ... </svg>'); }
如果我们需要SVG作为背景，但它们均大于5k：

.bg { background: url('images/file.svg'); }
我从来没有机会尝试将SVG sprite作为背景，但这也是一个选择

Answer 5

能够缓存 SVG 是将它们包含为图像的一个重要原因。我喜欢做的是使用 CSS 掩码将它们包含在内 - 对我来说，这是真实图像和更改图标颜色的能力之间的完美结合，就像我如果是内联 SVG 一样。这导致图标可以通过 CSS 类轻松控制，可以自定义，并且根本不会膨胀代码。