内联SVG与SVG文件性能

Question

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

Answer 1

内联的优点:

• 更少的http请求;
• 你可以使用css填充属性并改变颜色;
• Svg是内容的一部分,因此它是可点击的,您可以插入文本;

单独文件的优点:

• 可以缓存Svg文件;
• 您在文件中看不到多行相关代码;
• 如果您以后需要更改它,那么您只需更改一个文件;

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/

我的网络应用程序还可以帮助您轻松地进行这些SVG定义和使用对.

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都比相同数量的附加请求好。

• 小于5k的大量小型SVG-使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用作背景，但这也是一种选择