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 ...

Get SVG for Web Developers now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.