How To Apply SVG Radial Gradients To A Fill Or Stroke - Vanseo Design |
| How To Apply SVG Radial Gradients To A Fill Or Stroke Posted: 01 Jun 2015 05:30 AM PDT Like patterns, gradients can add depth and interest to a composition. Despite the current trend toward a flatter design aesthetic, gradients are still highly useful.
Last week I walked you through working with linear gradients in SVG. I promised I'd talk about radial gradients today. As you probably expect, radial gradients are similar to linear gradients in a number of ways. They mainly differ in how the gradient itself is defined. SVG Radial GradientsAs I mentioned last week, if you understood how linear gradients work, I don't think you'll have any difficulty understanding radial gradients. You define a radial gradient with the
If you followed last week's linear gradients examples this example should look familiar. The gradient is defined inside Inside the
Let's take a look at the resulting graphic and then I'll talk about the attributes on the The gradient radiates from blue at the center of the rectangle to green at its edges, which I'm guessing is what you expected. Let's consider how it was created. In addition to an id of radial, I added five attributes , fx, fy, cx, cy, and r, to the
I'm sure you understand how the radius works, but I think some examples will help make cx, cy, and fx, fy easier to see and give you a better idea of the effects of changing any of the values. Here I changed the radius from the previous example to 75% and left everything else the same.
You can see the blue spreads further before becoming green. Next I set the radius back to 50% and changed cx to 20%.
You can see the amount of blue is the same as the first example, but the center of the gradient has moved to the left so it's 20% from the left edge. Notice though, the highest concentration of blue is still at the center of the rectangle. Finally, here both radius and cx are back at 50% and I changed fx to 20%.
At first glance this example might look the same as the previous one, with the blue of the gradient shifted left. However notice where the highest concentration of blue is now located. It's no longer in the center and is now 20% from the left edge of the rectangle. The focal point of the gradient has moved. The attributes cx and cy define where the center of the gradient is located. The attributes fx and fy define where the focus of the gradient is located. By default all are at 50% so they appear to be the same, but cx and cy control different aspects of the gradient than fx and fy do. While I've only changed the x components of c and f, the y component works the same way other than shifting things vertically as opposed to horizontally. Attributes of the <radialGradient> ElementLike linear gradients there are more attributes you can add to radial gradients. In fact, the remaining attributes you can add are the exact same attributes you can add to linear gradients. The xlink:href attribute provides a way to reference one gradient inside another. The attributes of the referenced gradient are inherited, but can be overwritten. The gradientUnits attribute determines whether or not the cx, cy, fx, fy, and r values of the gradient scale with the shape that references them and it takes one of two values that are probably familiar to you by this point in the series.
You can also transform radial gradients using the gradientTransform attribute. In the following example I added gradientUnits="userSpaceOnline" to the first gradient (radial–1), which will cause the gradient to scale. I also added a second
Hopefully that isn't too many changes at once. The second gradient just shifts the focal point of the original gradient and then rotates it. Here's the result. Again some of these changes can be hard to see with radial gradients, but hopefully you can tell that the focal point has shifted to the left and that the entire gradient has been rotated. The last attribute, spreadMethod also works the same as it did for linear gradients. It can take any of three values, pad, reflect, and repeat, and it defines how the gradient starts and ends when the values cx, and cy are inside 0% and 100%.
As with linear gradients, I think all three values are easier to see with examples. Also like linear gradients the reflect and repeat values don't work in all browsers. I'm including screenshots of them working along with the inline SVG in case the code doesn't work in your browser. Here's the original example in this post again with a couple of changes. First I set the radius to 20%, because a smaller radius will make the three values of spreadMethod easier to see. Second I added the spreadMethod attribute.
Here's the resulting gradient when the spreadMethod is set to pad. When the gradient reached 20% in any direction, it becomes entirely green until it reaches the edges of the rectangle Here's the graphic again with spreadMethod set to reflect. The gradient transitions from the blue to the green that are set on the color stops and it's then reflected back from green to blue. Then it's reflected again from blue to green. This pattern continues until the gradient reaches the edges of the rectangle. SVG Screenshot Finally here's the result when spreadMethod is set to repeat. This time the pattern repeats from blue to green. When it reaches green it changes abruptly to blue and then transitions to green again. The pattern repeats continuously until it reaches the edges of the rectangle. SVG Screenshot Despite reflect and repeat being very similar, notice how different the results are for each value. Again this should all be familiar if you read last week's article about linear gradients, though I think reflect and repeat look more interesting on radial gradients than linear gradients, though again you may not want to use them given the lack of full browser support. Closing ThoughtsGradients are the third type of fill or stroke (solid colors and patterns being the first two) we've seen that you can add to SVG elements. You can create either linear ( With radial gradients you set a radius and locations for the center and focus of the gradient. Once you've played around with the values and understand what each controls, radial gradients, like linear gradients, are fairly easy to work with. As I often suggest, the best way to learn to work with both linear and radial gradients is to copy the examples I've provided or any other you find and then play around with the different values, isolating one at a time for change. The difference between cx, cy and fx, fy will probably cause the most confusion, if you have any. You'll also find smaller values for the radius of the gradient make it easier to see the differences in the spreadMethod values. We've now been looking at SVG for two and a half months so I think it's time to move on to another topic. If you want more SVG don't worry. I have plenty more topics to cover and I'll get to them later in the year. Download a free sample from my book Design Fundamentals. The post How To Apply SVG Radial Gradients To A Fill Or Stroke appeared first on Vanseo Design.      This posting includes an audio/video/photo media file: Download Now |
| You are subscribed to email updates from Vanseo Design To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
| Google Inc., 1600 Amphitheatre Parkway, Mountain View, CA 94043, United States | |