Is there any difference in the amount of browser resources used by SVG vs CSS for gradients?

I'm jus开发者_JAVA百科t wondering what is the least expensive way to use a lot of gradients in a site's design.

I feel certain that CSS will be less expensive for the browser than SVG, but I could not justify this without tests. I would suggest that you create your page with your many gradients in CSS and if (and only if) you find performance to be a problem should you try SVG or other technologies.

I would lean more towards CSS for this one. Seeing as it is CODE rather than an image.

Also, if you are leaning more towards using CSS, why not make it viewable and or workable in IE 8 and below, via CSS3pie? http://css3pie.com/

This is an interesting question. In my personal experience webkit has been faster with svg, but I could be wrong.

I created a test fiddle with css transitions and they look about the same, perhaps someone with more experience can extend the stress case:

http://jsfiddle.net/KLCEw/

Keep in mind that SVG gradients are best embedded through data-uri's so they don't create new requests to the server.