SVG is Really Awesome and Here's How to Use It

Lean SVG

A simple horizontal gradient in SVG, staying at red with subtle opacity. When used as a CSS background image it will stretch to fill any size. (reusable gradient with white or black to give elements shading while allowing simply changing the background-color)

<svg xmlns="http://www.w3.org/2000/svg">
  <style>stop{stop-color:#f00}</style>
  <linearGradient id="g">
    <stop stop-opacity=".4"/>
    <stop stop-opacity="0" offset="1"/>
  </linearGradient>
  <rect width="100%" height="100%" fill="url(#g)"/>
</svg>

Compatability

Every browser that supports gradients supports SVG as a background image, and bonus support for IE9 and Opera prior to 11.

Embedded as a datauri

Moving a bunch of gradients into separate files would be a performance loser for load time so that's not desirable. Using the same code (white space removed) is one version in plain text with escapes for use during development to tweak and the second base64 encoded for a live site.

Compatability

Firefox < 6 will break on any datauri that has a hash (#) in it, even when encoded. SVG gradients can't be done without using an IRI which necessarily requires the hash fill(#g). SVG itself works as long as there's no hash, ruling out a few types of content like gradients.

Prior versions of Firefox can be supported with a few options. Firefox has supported gradients since 3.6 and in most cases you can match the look of the gradients easily.

(This was due to an agonizingly long back and forth in the W3C SVG workgroup about what the spec actually should be with regards to handling nested documents, IRIs, and document fragments. This would be why Firefox is only implementing what every other browser could be long ago. The bug requests and discussions have been going on since 3.6)

CSS3

The CSS is longer than the SVG is. All of these syntaxes will need to be supported for a while yet. No browsers support it without prefix yet, but likely will by early next year. Then at least a 1-2 years after. Old webkit is on a lot of devices and it's hard to tell when it may be safe to drop. (mobile research todo)

Compatability

ms-filter isn't practical outside static background gradients because it doesn't work with the new CSS3 properties like border radius and it performs very poorly if you try to do anything fancy with animations or alpha.

Basically you use SVG in IE9 or you go home, either via providing svg or having javascript like CSS3Pie do it for you. Opera also only began supporting CSS3 gradients recently with SVG as the only option.

The two webkit syntaxes are actually different implementations aside from standard linear gradients. The rendering of radial gradients changed in a non-trivial way and implementing the equivalent of repeating gradients in the old syntax can be very difficult. The differences lie in how they scale and the way to fix it is with background-size and position to normalize. You will neccessarily have to target one of them specifically because fixing one inherently breaks the scale of the other.