SVG Colors, Patterns & Gradients: Painting Vector Graphics

As a vector graphics format, SVG uses precisely-defined geometric shapes to build an image. But that doesn’t mean that SVG graphics have to look like technical drawings. SVG graphics can be shaded, textured, built from partially-transparent overlapping layers, or even filled with photographic images.

SVG Colors, Patterns, and Gradients takes an in-depth look at the different ways SVG text and shapes can be painted on the screen or page. You’ll start with an overview of how color is defined, including the various ways you can control the transparency of SVG content. You’ll then dive deep into the concept of an SVG paint server: gradients, patterns, and other complex graphical content that can be used to fill-in or outline other SVG shapes and text.

Table of Contents

Chapter 1. Things You Should Already Know
Chapter 2. The Painter’s Model
Chapter 3. Creating Colors
Chapter 4. Becoming Transparent
Chapter 5. Serving Paint
Chapter 6. Simple Gradients
Chapter 7. Gradients in All Shapes and Sizes
Chapter 8. And Repeat
Chapter 9. Radial Gradients
Chapter 10. Tiles and Textures
Chapter 11. Picture-Perfect Patterns
Chapter 12. Textured Text
Chapter 13. Painting Lines
Chapter 14. Motion Pictures
Appendix A. Color Keywords and Syntax
Appendix B. Elements, Attributes, and Style Properties