SVG Colors, Patterns & Gradients

Preface

This book takes a deep dive into a specific aspect of SVG: painting. Painting not with oils or watercolors, but with graphical instructions that a computer can transform into colored pixels. The book explores the creative possibilities, and also the potential pitfalls. It describes the basics, but also suggests how you can mix and match the tools at your disposal to generate complex effects.

This book was born from another project, an introduction to using SVG on the Web. In order to keep that book a manageable length—and keep it suitable for introductory audiences—many details and complexities had to be skimmed over. But those details and complexities add up to the full, wonderful potential of SVG as a graphics format. Once you understand the basics of SVG, you can start thinking about creating more intricate drawings and more nuanced effects.

What We’ll Cover

If you’re reading this, hopefully you’re already familiar with the basics of SVG—how to define a graphic as a set of shapes, and how to use that graphic either as a standalone image file or as markup in an HTML page. If you’re not sure if you’re ready, Chapter 1 reviews the basic concepts we’ll expect you to know.

The rest of the book focuses on the Colors, Patterns & Gradients described in the title:

• Chapter 2 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 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 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 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 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 explores the ways in which you can manipulate a linear gradient to move it within the shape being painted.

• Chapter 8 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 looks at radial gradients, including repeated radial gradients, and concludes with some examples of creating complex effects with multiple gradients.

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

• Chapter 11 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 examines in more detail how paint servers are applied to text.

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

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

At the end of the book, two appendixes provide a quick reference for the basic syntax you’ll need in order to put this all to use:

• Appendix A recaps the many ways you can define colors, including all the predefined color keywords.

• Appendix B summarizes all the paint server elements, their attributes, and the related style properties.

About This Book

Whether you’re casually flipping through the book, or reading it meticulously from cover to cover, you can get more from it by understanding the following little extras used to provide additional information.

About the Examples

SVG images are displayed and manipulated with many different types of software, and each program interprets the SVG code slightly differently. This is particularly an issue when graphics files are distributed on the Web; you hope that the person on the other end sees something fairly close to what you thought you created!

The examples in this book have therefore been tested on the latest stable, desktop versions (as of July 2015) of Chrome, Firefox, Internet Explorer, and Safari browsers. Quirks, bugs, and lack of support are noted in the text; in addition, expected changes in support for the Microsoft Edge browser are mentioned.

Nearly every other browser uses a variation of one of the main open source rendering libraries: Gecko (Firefox), WebKit (Safari and iOS devices), or Chromium/Blink (a fork of WebKit, primarily developed for Chrome). You can therefore use the major browsers’ support levels as a guideline, but be aware that not all software updates at the same time. For mobile browsers, there are also often practical performance limitations even if features are technically supported. Certain mobile browsers (e.g., Opera Mini) intentionally limit which web features they support in order to improve performance.

SVG is also used in graphics programs such as Adobe Illustrator and Inkscape. There are a number of tools, such as Apache Batik or libRSVG, that convert SVG code into other vector graphics formats, such as for PDF documents. These all introduce whole new areas of compatibility issues, which have not been detailed in this book. Test carefully in any tool you need to use!

Using Code Examples

Supplemental material (code examples and figures) is available online at the following URLs.

Download from:

https://github.com/oreillymedia/SVG_Colors_Patterns_Gradients

View live at:

http://oreillymedia.github.io/SVG_Colors_Patterns_Gradients/

This book is here to help you get your job done. In general, if example code is offered with this book, you may use it in your programs and documentation. You do not need to contact us for permission unless you’re reproducing a significant portion of the code. For example, writing a program that uses several chunks of code from this book does not require permission. Selling or distributing a CD-ROM of examples from O’Reilly books does require permission. Answering a question by citing this book and quoting example code does not require permission. Incorporating a significant amount of example code from this book into your product’s documentation does require permission.

We appreciate, but do not require, attribution. An attribution usually includes the title, author, publisher, and ISBN. For example: “SVG Colors, Patterns & Gradients by Amelia Bellamy-Royds and Kurt Cagle (O’Reilly). Copyright 2016 Amelia Bellamy-Royds and Kurt Cagle, 978-1-4919-3374-9.”

If you feel your use of code examples falls outside fair use or the permission given above, feel free to contact us at [e-mail].

Conventions Used in This Book

The following typographical conventions are used in this book:

Italic

Indicates new terms, URLs, email addresses, filenames, and file extensions.

Constant width

Used for program listings, as well as within paragraphs to refer to program elements such as variable or function names, databases, data types, environment variables, statements, and keywords.

Constant width bold

Shows commands or other text that should be typed literally by the user.

Constant width italic

Shows text that should be replaced with user-supplied values or by values determined by context.

Tip

Tips like this will be used to highlight particularly tricky aspects of SVG, or simple shortcuts that might not be obvious at first glance.

Note

Notes like this will be used for more general asides and interesting background information.

Warning

Warnings like this will highlight combatibility problems between different web browsers (or other software), or between SVG as an XML file versus SVG in HTML pages.

In addition, sidebars like the following will introduce supplemental information:

A Brief Aside

There are two types of sidebars used in this book. “Future Focus” asides will look at proposed features that aren’t yet standardized, or new standards that aren’t widely implemented. “CSS Versus SVG” asides compare an SVG graphical effect with the CSS styles (if any) that could create a similar appearance.

Although the sidebars are not absolutely essential for understanding SVG colors, patterns, and gradients, they will hopefully add important context when planning a complete web project.

Safari® Books Online

Note

Safari Books Online is an on-demand digital library that delivers expert content in both book and video form from the world’s leading authors in technology and business.

Technology professionals, software developers, web designers, and business and creative professionals use Safari Books Online as their primary resource for research, problem solving, learning, and certification training.

Safari Books Online offers a range of plans and pricing for enterprise, government, education, and individuals.

Members have access to thousands of books, training videos, and prepublication manuscripts in one fully searchable database from publishers like O’Reilly Media, Prentice Hall Professional, Addison-Wesley Professional, Microsoft Press, Sams, Que, Peachpit Press, Focal Press, Cisco Press, John Wiley & Sons, Syngress, Morgan Kaufmann, IBM Redbooks, Packt, Adobe Press, FT Press, Apress, Manning, New Riders, McGraw-Hill, Jones & Bartlett, Course Technology, and hundreds more. For more information about Safari Books Online, please visit us online.

How to Contact Us

Please address comments and questions concerning this book to the publisher:

• O’Reilly Media, Inc.
• 1005 Gravenstein Highway North
• Sebastopol, CA 95472
• 800-998-9938 (in the United States or Canada)
• 707-829-0515 (international or local)
• 707-829-0104 (fax)

We have a web page for this book, where we list errata, examples, and any additional information. You can access this page at http://bit.ly/svg-colors-patterns-and-gradients.

To comment or ask technical questions about this book, send email to [e-mail].

For more information about our books, courses, conferences, and news, see our website at http://www.oreilly.com.

Find us on Facebook: http://facebook.com/oreilly

Follow us on Twitter: http://twitter.com/oreillymedia

Watch us on YouTube: http://www.youtube.com/oreillymedia

Acknowledgments

This book would never have come into being without the patience and persistence of a series of editors at O’Reilly: Simon St. Laurent, Meghan Blanchette, and (last but not least!) Meg Foley. Much appreciation goes to the technical reviewers, who did their best to minimize the number of errors and incomprehensible statements that made it through to the final copy: David Eisenberg, Dudley Storey, Robert Longson, and Sarah Drasner.

Appreciation is also due to the O’Reilly team who do their best to make the final book elegant and professional. In particular, thanks to Sanders Kleinfeld for adapting the Pygmentize syntax highlighters to play nicely with SVG code, and to production editor Colleen Lobner for managing many custom requests.

Thanks also to the wider community of SVG developers, both those of you creating with SVG and those of you building the underlying software. Many of the tips, tricks, and warnings highlighted in this book were collected from discoveries made by others and shared through blog posts, live demos, Q&A forums, and mailing lists.