Been contemplating this. Was talking to a friend this afternoon.
So, I started playing with teh SVG stuffz, using a gradient generator on the Microsoft site. Took a quick look at the generated syntax for a straight linear gradient, and an offset radial gradient, and then quickly figured out how to do my own extra colour stops and custom offsets. The syntax for this level of stuff is quite simple. Not really any more difficult than doing CSS3 gradients.
For the basic gradient on the buttonlist and quickbuttons, the .svg file is about 480bytes with all this spacing and commenting:
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none">
<linearGradient id="g908" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="0%" y2="100%">
<!-- Color code for the top of the gradient -->
<stop stop-color="#FCFCFC" offset="0"/>
<!-- Color code for the bottom of the gradient -->
<stop stop-color="#E5E5E5" offset="1"/>
</linearGradient><rect x="0" y="0" width="1" height="1" fill="url(#g908)" /></svg>
Compressing it down to the bare mimium (no white space or line breaks or comments) only saves about 130bytes, which wouldn't be noticed in practice by the time you do the http stuffz.
Given that IE9 is going to be around as a significant player for quite some time, I tried hooking up some custom SVG images in an ie9 images/folder. Works well. Also works in Safari, which currently doesn't support W3C syntax for CSS3 gradients.
Problems: Every so often, Chrome and Firefox versions seem to have problems with SVG rendering. Chrome had problems a year or so back. Firefox has problems now. These probably wouldn't be an issue with the fairly small number of static elements we'd be talking about, but since FF and Chrome support CSS3 gradients there's no point in forcing them to use SVG.
It's more files for beginers to edit, and another syntax for them to learn.
Also, these are images, and they do need to be called via http, then downloaded and cached, so compared to a CSS3 gradient they're not necessarily best for performance.
So, I'm wondering if just due to sheer market numbers of dumb browsers, we should do our basic gradients for dumb browsers with SVG instead of CSS3, and serve CSS3 to the smart ones.
It's hardly any more trouble for us. The .svg files are easy for me to generate, and we'd just put them in a dumb browser folder and sequence the background-image calls in the CSS:
.buttonlist li a {
display: block;
background: #fcfcfc;
background-image: url(../images/ie9/buttonlist.svg);
background-image: linear-gradient(to bottom, #fcfcfc 0%, #e5e5e5 100%); /* W3C */
}
This is future-proof, because any browser which supports W3C syntax for gradients will just dump the first declaration and use the second.