Choosing SVG or CSS3 for gradients

Question

I would like to use gradients heavily in a new website I'm working on. I've been wondering if it would be better to implement the gradients in CSS3 or SVG.

Typically I only need multi-stop linear gradients so both meet my needs there.

I initially assumed this was best done in CSS3, but started to question my decision and would appreciate other opinions.

My thinking thus far is that SVG (as a CSS background) may be better because:

• It works in IE9
• My CSS is cleaner w/o browser prefixes
• Easy reuse of gradient

CSS3 may be better because:

• Seems like a job for CSS
• Less downloads for the client
• Everything is in one place

An important consideration that I don't know the answer to is which performs better?

Is there a best practice for implementing background gradients?

Answer 1

According to a test performed by Lea Verou (I trust her work), CSS gradients are faster: http://lea.verou.me/2011/08/css-gradients-are-much-faster-than-svg/

UPDATE:

You could also consider using modernizr to serve up SVG to IE9 which supports SVG backgrounds but does not support CSS gradients.

In your CSS you would just do:

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

More info here:

http://modernizr.com