CODEWITHSUNDEEP
htmlsvgbackgroundgradient
Sunny
Sunny

Reputation: 10075

Simple two color gradient background: SVG vs. HTML5?

If I want a simple two color gradient background, would it be accurate to say that SVG would have more cross-browser support than HTML5?

I checked for Gradient support in old browsers in SVG and they all appear to support them. However, some real-world experience can help shed some light on the pros and cons of these two choices? There are some questions asked earlier but they do not address this specific case of a simple two-color gradient to be used as a background and comparison with HTML5 gradient support.

Also, I would like to know if the same SVG or CSS, whichever option is chosen, will work for all the major browsers or is there tweaking required to support different browsers. For emphasis, I repeat: I AM NOT LOOKING FOR ANY FANCY BACKGROUND, JUST A TWO-COLOR GRADIENT. (An auxiliary optional question: Will SVG support eventually die in browsers given its lack of popularity?)

Upvotes: 0

Views: 240

Answers (1)

methodofaction
methodofaction

Reputation: 72405

The only browser version with significant marketshare that supports SVG but not CSS3 gradients is Internet Explorer 9.

Pros of using SVG gradients

  • IE9 support
  • It's cleaner linking to an external SVG file rather than using vendor prefixes for gradients

Cons of using SVG gradients

  • Causes an additional request unless you base64 encode it and embed it in the CSS file.
  • If you embed the base64 version of the gradient then it's difficult to modify.

Your concern for SVG's future is greatly exaggerated. There's plenty of interest in SVG given new high resolution displays ("retina") an it is used by major javascript data-viz and graphing libraries. If anything, the future actually looks brighter for SVG.

I personally use SVG gradients when I need IE9 support. I use Microsoft's SVG Gradient Generator and use the base64 version as to not cause an additional request. I haven't run into any issue at all, SVG gradients behave just like their CSS3 counterparts.

Upvotes: 3

Related Questions