在 WebKit 上显示大背景 SVG 很慢？答案

【问题标题】：Displaying a large background SVG slow on WebKit?在 WebKit 上显示大背景 SVG 很慢？
【发布时间】：2013-04-27 06:34:57
【问题描述】：

我有一个大的 SVG 图形作为我网站的背景。在此处查看示例： http://jsfiddle.net/aAwgU/4/embedded/result/

body{
    background: url(http://www.thedavidcummings.com/images/html.svg) no-repeat fixed right;
    background-size: auto 100%;
}

它在 Chrome 和 Firefox 中运行良好，但在 Safari 中导航页面和调整浏览器页面的大小非常慢，并且页面在我的 iPhone 上完全崩溃。这是 webkit 中的错误吗？

有没有办法让我的 .svg 对 WebKit 更友好？还是我应该只使用图像？ SVG 非常理想，因为它的文件很小（只有 7k）。我能够制作的最小的 .png 等效文件是 150k。我想保持较大的尺寸，以便图像可以很好地缩放。

【问题讨论】：

【解决方案1】：

您可以使用https://github.com/svg/svgo（节点）之类的方式优化 SVG，它会减小文件大小，有时还会缩短渲染时间。

遗憾的是，Safari 现在使用 SVG 速度非常慢。

【讨论】：