为什么很小的 svg 图片非常影响网站速度？

[xiaodaigou]

首页有一个 svg 做的 logo ，很次打开网站都是 logo 显示很慢或者显示不出来（这种情况很少），我看了下体积最大 7.3K ，为什么显示的那么慢呢？

[litpen]

svg 在浏览器上跑就会不停的计算大小改变清晰度，对比位图肯定耗性能，这不是大小决定的

[imn1]

7K 不小了，还带有 Script ？
最好 SVG 内设一个宽高预置值

[libook]

SVG 貌似是像人一样把图一笔一划画出来，性能消耗和图的大小无关，只和图的复杂度有关，如果你的图小但很复杂还是用 png 呗~就算 PC 浏览器上解决了这个问题， Android 上也会有坑，别问我是怎么知道的。。。

[xiaodaigou]

@litpen 有什么好的解决方案吗

[xiaodaigou]

@imn1 首页没有设定，副页那个有设定

[abelyao]

话说 GitHub 首页的 LOGO 就是 SVG 绘制的，包括页脚的小圆也是，都是瞬间出来的，所以觉得楼上几个答案并不是原因…

[xiaodaigou]

@abelyao 你是否晓得如何做到的，这位兄台

[techyan]

7.3k 不算小也不算大吧。。有些小图标只有数百字节，中国国旗 600 多字节， Google logo 3KB 。但是大一点的，比如 https://upload.wikimedia.org/wikipedia/commons/7/78/People%27s_Republic_of_China_%28orthographic_projection%29.svg ，再大一点的 600 多 KB （这张图是我从英文翻译的）： https://upload.wikimedia.org/wikipedia/commons/f/f4/%E5%A4%A9%E6%B4%A5%E6%B8%AF%E5%9C%B0%E5%9B%BE%EF%BC%88%E5%90%AB%E7%88%86%E7%82%B8%E4%BD%8D%E7%BD%AE%EF%BC%89.svg

反正我的电脑加载上面这张图就明显需要一段时间了。

再大一点的 1.xMB ， https://upload.wikimedia.org/wikipedia/commons/0/0a/Four_color_world_map.svg 相信大部分电脑加载都需要时间。


所以实际上 7.3K 的 svg 应该不算大。打不开可能跟浏览器有关吧。不是所有的浏览器都能够很好地支持 svg 。如果要优化的话可以参考 MediaWiki ，默认所有的 svg 文件在条目中显示的时候都会转换成 png 格式。 https://zh.wikipedia.org/wiki/File:People%27s_Republic_of_China_(orthographic_projection).svg

[kalintw]

打开开发者工具，切换到 Network ， 然后访问你的页面，观察 svg logo 那个 HTTP 请求。
看看到底是 HTTP 请求耗时、卡住了， 还是图片已经请求到本地，卡在了渲染显示上。

[Andy1999]

@techyan 我都秒开怎么办……

[ynyounuo]

@techyan
还好呀 - -

[XianZaiZhuCe]

@techyan 1.xM 这个，手机基本就是秒开…

[techyan]

@Andy1999
@XianZaiZhuCe
@ynyounuo
请原谅我的电脑太渣。。

[ynyounuo]

@techyan
我不觉得是电脑的问题…

[xiaodaigou]

@techyan 我怎么也是秒开....

[XianZaiZhuCe]

@techyan 应该不是电脑问题吧，我这就是 850 元魅族而已

[yuetsh]

看看是不是耗内存的问题。我之前就遇到过一个 svg 的问题，一个图占用内存 100M......

[xiaodaigou]

@yuetsh 不晓得哈，我还单独让他跑一个 cdn

[Dannytmp]

为什么就不能用 png

[Khlieb]

@Dannytmp MediaWiki 都把 avg 图片解析成 png 再在页面上显示