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

Conclusion

You've learned about color, gradients, and patterns, and you've seen how adding these elements and attributes to your image can make the difference between blah graphics and exciting graphics. Take Challenge 1 below to test your gradient and pattern savvy.

Challenge 1

To feel comfortable with color in SVG, spend some time experimenting with gradients and patterns.

1.1 Create a well-formed, valid SVG document.

1.2 Define a horizontal gradient with two colors.

1.3 Define a diagonal gradient with three colors.

1.4 Define a radial gradient with three colors.

1.5 Create a shape, path, or text and fill it with one of your gradients. Try stroking it with a different gradient.

1.6 Transform one of your gradients and use it to fill a shape.

1.7 Define a pattern that utilizes one of your gradients within the pattern. (Hint: When you are creating your pattern drawing, just fill or stroke it with one of the gradients you have already defined by using the fill:url(#myGradient) syntax.)

1.8 Fill or stroke a shape, path, or text with your gradient-colored pattern.

1.9 Transform the pattern.



PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


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