为渐变选择SVG或CSS3

Question

我想在我正在研究的新网站中大量使用渐变.我一直想知道在CSS3或SVG中实现渐变是否更好.

通常我只需要多站线性渐变,以满足我的需求.

我最初认为这是最好的CSS3,但开始质疑我的决定,并会欣赏其他意见.

到目前为止,我的想法是SVG(作为CSS背景)可能更好,因为:

• 它适用于IE9
• 我的CSS更干净,没有浏览器前缀
• 易于重复使用渐变

CSS3可能更好,因为:

• 看起来像是CSS的工作
• 减少客户端的下载量
• 一切都在一个地方

我不知道答案的一个重要考虑因素是哪个表现更好？

是否有实施背景渐变的最佳实践？

Answer 1

根据Lea Verou的测试(我相信她的工作),CSS渐变速度更快:http: //lea.verou.me/2011/08/css-gradients-are-much-faster-than-svg/

更新:

您还可以考虑使用modernizr向SVG提供支持SVG背景但不支持CSS渐变的IE9.

在你的CSS中你会做:

.cssgradients #someElement { /* Gradient background rule. */ }
.no-cssgradients #someElement { /* SVG background rule. */ }

更多信息:

http://modernizr.com