Choosing SVG or CSS3 for gradients - css

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

Answer 2

Don't make your design choices based on making IE happy. Use progressive enhancement / graded browser support and push IE to the bottom of your support list.
Choose CSS3: your website will just appear without gradients on IE, which is probably an acceptable compromise to make.

Answer 3

You should use http://www.colorzilla.com/gradient-editor/ to generate CSS and SVG (for IE9) both.
Example :
background: #fefcea; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZlZmNlYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmMWRhMzYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #fefcea 0%, #f1da36 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefcea), color-stop(100%,#f1da36)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #fefcea 0%,#f1da36 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #fefcea 0%,#f1da36 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #fefcea 0%,#f1da36 100%); /* IE10+ */
background: linear-gradient(top, #fefcea 0%,#f1da36 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefcea', endColorstr='#f1da36',GradientType=0 ); /* IE6-8 */
It automatically generate IE9 svg code
Support for full multi-stop gradients with IE9 (using SVG). Add a
"gradient" class to all your elements that have a gradient, and add
the following override to your HTML to complete the IE9 support:
<!--[if gte IE 9]>
<style type="text/css">
.gradient {
filter: none;
}
</style>
<![endif]-->

Answer 4

I have chosen to implement my linear gradients in svg as I can do it once, I am of course only supporting modern browsers.
This is the SVG, I only need to describe it once. I am not sure if there is a way to define the x1y1 and x2 y2 co-ordinates using css. happy to be proven wrong.
So if CSS can not implement a gradient with x1y1 x2y2 co-ordinates I guess this is an advantage of using svg linear gradients.
the following code can be taken straight of out inkscape.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 200 200">
<defs>
<linearGradient id="grad1" x1="26.3" y1="0.2" x2="26.5" y2="3.9" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:#0284a4;stop-opacity:0.9" />
<stop offset="1" style="stop-color:#0284a5;stop-opacity:1" />
</linearGradient>
</defs>
<path id="skylevel10" fill="url(#grad1)" d="m 0 -0 201 0 0 6.7 c 0 0 -29.8 1.2 Z"/>
</svg>