SVG Colors, Patterns & Gradients

Example code for the O’Reilly Media book

by Amelia Bellamy-Royds & Kurt Cagle

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.