• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint

SVG Gradients

Gradients can produce some lovely visual effects, whether you are seeking subtle graduations of color or startling, vibrant—or even shocking—visual effects. To achieve the precise effect you are looking for, you need to understand how to control SVG gradients.

If you want to study how different stop color and stop opacities affect the visual appearance of SVG elements, one technique I find useful is to create linear (or, to a lesser extent, radial) gradients that encompass the whole screen. Then create a small SVG object—a rectangle or circle, perhaps— and animate it slowly across the gradient and study how the colors and opacities affect the SVG object. The gradient itself is invisible except where it impinges on the object. The slow movement of the object allows you to study how adjusting the parameters of the gradient—whether they are offset, stop-color, or stop-opacity properties—affects the visual appearance. By using that technique, you in effect isolate different parts of the gradient so that you can examine each one. The technique for animating an SVG object along a gradient is described in Chapter 8.


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint