Overview

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. The many examples demonstrate the concepts with stand-alone SVG graphics or inline SVG code in HTML pages; other examples focus on CSS-only effects for comparison.

The authors have made all the example code and screenshots available as a reference repository. These files are covered by the O’Reilly Media policy on the use of example code. Short version: you are free to use the examples in moderation; credit is appreciated but not required. However, please don't integrate a large portion of the example set within a product or documentation. Some image files are public domain or Creative Commons-licenced content owned by others; see the credits in the book.

The chapter links in the following outline will take you to an index of the examples and figures as SVG files you can view live in your browser. Alternatively, you can download the entire collection as a zip archive or fork it as a GitHub repository.

• Chapter 1, Things You Should Already Know, reviews the basic SVG concepts that readers should already be familiar with.

• Chapter 2, The Painter’s Model, discusses the rendering model used to convert SVG code into visual graphics, and introduces the basic properties you can set on your shapes and text to control how they are painted to the screen.

• Chapter 3, Creating Colors, focuses on color: how it works in nature, how it works on the computer, and how it can be specified within your SVG code.

• Chapter 4, Becoming Transparent, discusses transparency, or more specifically, opacity; it introduces the many ways you can control the opacity of your graphics, and how these affect the end result.

• Chapter 5, Serving Paint, introduces the concept of a paint server: complex graphics content that defines how other SVG shapes and text should be painted to the screen. It also introduces the solid color paint server, which is actually more useful than it may seem at first.

• Chapter 6, Simple Gradients, looks at gradients, with a particular focus on the different color transition effects you can achieve by adjusting color stop positions and properties.

• Chapter 7, Gradients in All Shapes and Sizes, explores the ways in which you can manipulate a linear gradient to move it within the shape being painted.

• Chapter 8, And Repeat, covers repeating linear gradients and some of the effects you can create with them. It also includes some practical examples and tips on using gradients (and other paint servers) for inline SVG icons in an HTML page.

• Chapter 9, Radial Gradients, looks at radial gradients, including repeated radial gradients, and concludes with some examples of creating complex effects with multiple gradients.

• Chapter 10, Tiles and Textures, introduces the <pattern> element, which creates repeating tiles and textures.

• Chapter 11, Picture-Perfect Patterns, shows how a pattern can be used to define a single image or graphic that can be used to fill shapes or text.

• Chapter 12, Textured Text, examines in more detail how paint servers are applied to text.

• Chapter 13, Painting Lines, looks at some of the issues that come into play when using paint servers to paint strokes instead of fill regions.

• Chapter 14, Motion Pictures, gives some examples of animated paint servers and discusses the benefits and limitations of the different animation methods available in SVG.