7

The outcome of the gradients should not be the same? Why are they so different... Am I missing something?

DEMOSTRATION

SVG

<radialGradient cx="50%" cy="50%" r="100%" spreadMethod="pad" id="radGrad">
  <stop offset="0" stop-color="#fff"/>
  <stop offset="0.5" stop-color="#00f"/>
</radialGradient>

CSS

background: radial-gradient(ellipse at center, #fff 0%,#00f 50%);
rafaelcastrocouto
  • 11,781
  • 3
  • 38
  • 63
  • interestingly, the browsers I tested (Ch,FF,O,IE) pretty much agree on the differences, so it might be a slight difference in the spec I guess. – Christoph Apr 07 '14 at 15:03
  • The relevant specs to look at are http://www.w3.org/TR/SVG11/pservers.html#RadialGradients and http://www.w3.org/TR/css3-images/#radial-gradients – BoltClock Apr 07 '14 at 16:31

2 Answers2

6

The CSS gradient runs from the center to the side. The SVG gradient runs from the center to the corner. So the SVG gradient radius is 1.414 (√2) times larger than the the CSS gradient radius.

I haven't found a way to make the SVG gradient be sized from the side instead of the corner. So to match the CSS gradient stop at 50%, I calculated the SVG gradient stop manually:

(CSS gradient radius / SVG gradient radius / 2) or (1 / 1.414 / 2).

That means: <stop offset="0.3536" stop-color="#00f"/>

http://codepen.io/anon/pen/emLqy/


… In Google Chrome, there's still a small difference (presumably no dithering) in how the gradients are rendered. In Firefox and Safari both gradients look smooth.

rafaelcastrocouto
  • 11,781
  • 3
  • 38
  • 63
  • This is more of an issue of whether the gradient is sized with respect to sides or to corners, which is why you're finding yourself using the Pythagorean theorem to determine how to adjust the color stops. – BoltClock Apr 07 '14 at 16:32
  • I almost accepted this answer (it does solve half of the issue) but the real problem remains... the css is way smoother here ... – rafaelcastrocouto Apr 07 '14 at 18:02
  • It's a problem with Chrome (presumably no dithering). Unfortunately, there's nothing you can do about that. I edited my answer accordingly. –  Apr 07 '14 at 19:01
  • dithering ... that's the magic word! you got me Sebastian! ;D – rafaelcastrocouto Apr 07 '14 at 19:58
0

When you define your radial gradient radius as "100%', this means 100% in objectBoundingBox units: which are %'s of the square root of the sum of the squares of the height and width of your bounding box. Gradient stops are defined relative to this size.

Michael Mullany
  • 30,283
  • 6
  • 81
  • 105