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.

Amelia Bellamy-Royds is a freelance writer specializing in scientific and technical communication. She helps promote web standards and design through participation in online communities such as Web Platform Docs, Stack Exchange and Codepen. Her interest in SVG stems from work in data visualization, and builds upon the programming fundamentals she learned while earning a B.Sc. in bioinformatics. A policy research job for the Canadian Library of Parliament convinced her that she was more interested in discussing the big-picture applications of scientific research than doing the laboratory work herself, leading to graduate studies in journalism. She currently lives in Edmonton, Alberta. If she isn't at a computer, she's probably digging in her vegetable garden or out enjoying live music.

Kurt Cagle worked as a member of the SVG Working Group, and wrote one of the first SVG books on the market in 2004. After consulting to a number of Fortune 500 media, transportation and publishing companies as well as having worked as an architect with the US National Archives and the Affordable Care Act, Kurt founded Semantical, LLC in 2015 to develop applications for data visualization, virtualization and enrichment.