Question

I am somewhat confused about the SVG linear gradient specification. Suppose, I want to fill a 100×100 rectangle with linear gradient which is slanted at 45 deg. The straightforward way is to specify the gradient points like x1 = 0, y1 = 0, x2 = 100 and y2 =100. But, I am not clear about what happens when I provide points like x1 = 86, y1 = 0, x2 = 100 and y2 = 14. Note, the gradient vector is still parallel to the previous one, but the gradient vector length does not cover the entire bounding box. So, I am having the following doubts:

1. Are these two gradient definitions equivalent?
2. In the second case, does svg standard specify about what happens for the points like 100, 100, will it use the extrapolated colors from the gradient vector?
3. I know svg gradient has an attribute spreadMethod, but according to documentation it plays a role only when gradient starts or ends inside the bounds of the target rectangle. Since the second definition is not the same case (the start and end points lie on bounding box edge), will spreadMethod still play a role here?

Answer 1

The sentence from the spec: “Indicates what happens if the gradient starts or ends inside the bounds of the target rectangle” merely emphasizes the fact there is no visible effect if the gradient vector’s endpoints lie outside the target rectangle. The gradient and its attributes behave exactly the same no matter where the gradient vector’s endpoints are: inside, outside, or exactly on the bounding box.

In more detail: There are two gradient attributes that are relevant to this question:

• The gradient vector determines the “size” of the gradient only if spreadMethod is reflect or repeat. Otherwise, gradient “size” is determined by the bounding box when spreadMethod is pad (the default). Of course, the gradient vector always determines the direction of the gradient.
• The spreadMethod attribute determines if the gradient repeats and how it repeats (start again with the first stop or the last stop?). If the gradient vector is “padded” to the size of the bounding box there is no need to repeat.

---

To answer your questions specifically:

1. When spreadMethod is pad: yes, they are equivalent; otherwise: no
2. Yes, as explained above.

3. Yes, setting spreadMethod to something other than pad will have two effects:

   a. The size of the gradient will shrink from the bounding box to the size of the vector

   b. The gradient will repeat based on the value of the spreadMethod attribute

Here is a nice illustration of the difference between pad, repeat, and reflect. The line segment represents the gradient vector:

from: SVG Essentials/Patterns and Gradients