CODEWITHSUNDEEP
csssvg
C.J.
C.J.

Reputation: 6869

Choosing SVG or CSS3 for gradients

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:

CSS3 may be better because:

An important consideration that I don't know the answer to is which performs better?

Is there a best practice for implementing background gradients?

Upvotes: 12

Views: 4147

Answers (4)

Derek Ewing
Derek Ewing

Reputation: 233

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>

Upvotes: 1

Jim Jeffers
Jim Jeffers

Reputation: 17930

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

Upvotes: 9

Jitendra Vyas
Jitendra Vyas

Reputation: 152727

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]-->

Upvotes: 3

Ateş G&#246;ral
Ateş G&#246;ral

Reputation: 140080

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.

Upvotes: 3

Related Questions