SVG Colors, Patterns & Gradients: Painting Vector Graphics

by Amelia Bellamy-Royds, Kurt Cagle

Overview

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.

Product Details

ISBN-13:	9781491933749
Publisher:	O'Reilly Media, Incorporated
Publication date:	10/30/2015
Pages:	307
Product dimensions:	5.90(w) x 8.80(h) x 0.70(d)

About the Author

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.

Table of Contents

Preface vii

1 Things You Should Already Know 1

SVG Is Drawing with Code 1

SVG Is Always Open Source 2

SVG Is XML (and Sometimes HTML) 2

SVG Is Squishable 2

Pictures Are a Collection of Shapes 3

Images Can Have Images Inside Them 3

Text Is Art 3

Art Is Math 4

An SVG Is a Limited View of an Infinite Canvas 4

SVG Has Structure 4

SVG Has Style 4

Behind All Good Markup Is a Great DOM 5

SVG Can Move 5

SVG Can Change 6

2 The Painter's Model 7

Fill 'Er Up with the fill Property 8

Stroke It with the stroke Property 12

Stroking the Fill and Filling the Stroke 17

Take a Hint with Rendering Properties 26

3 Creating Colors 31

Misty Rose by Any Other Name 31

A Rainbow in Three Colors 36

Custom Colors 40

Mixing and Matching 48

4 Becoming Transparent 53

See-Through Styles 53

The Net Effect 58

5 Serving Paint 63

Paint and Wallpaper 64

Identifying Your Assets 65

The Solid Gradient 68

6 Simple Gradients 75

Gradiated Gradients 75

Transparency Gradients 78

Controlling the Color Transition 79

7 Gradients in All Shapes and Sizes 85

The Gradient Vector 85

The Object Bounding Box 90

Drawing Outside the Box 94

Gradients, Transformed 100

8 And Repeat 111

How to Spread Your Gradient 111

Reflections on Infinite Gradients 113

Repeating Without Reflecting 114

Using (and Reusing) Gradients in HTML 118

9 Radial Gradients 133

Radial Gradient Basics 134

Filling the Box 135

Scaling the Circle 140

Adjusting the Focus 144

Transforming Radial Gradients 147

Grand Gradients 149

10 Tiles and Textures 163

Building a Building Block 164

Stretching to Fit 171

Laying Tiles 175

Transformed Tiles 181

11 Picture-Perfect Patterns 189

The Layered Look 189

Preserved Patterns 193

Background Images, SVG-Style 197

12 Textured Text 207

Bounding Text 208

Switching Styles Midstream 214

13 Painting Lines 221

Beyond the Edges 221

The Empty Box 224

Using the Coordinate Space 231

Patterned Lines 235

14 Motion Pictures 239

Animation Options 240

Coordinated Animation 247

Animated Interactions 251

A Color Keywords and Syntax 269

B Elements, Attributes, and Style Properties 277

Index 285