SVG Colors, Patterns & Gradients

Table of contents

1. Preface
   1. What We’ll Cover
   2. About This Book
      1. About the Examples
      2. Using Code Examples
      3. Conventions Used in This Book
   3. Safari® Books Online
   4. How to Contact Us
   5. Acknowledgments
2. 1. Things You Should Already Know
   1. SVG Is Drawing with Code
   2. SVG Is Always Open Source
   3. SVG Is XML (and Sometimes HTML)
   4. SVG Is Squishable
   5. Pictures Are a Collection of Shapes
   6. Images Can Have Images Inside Them
   7. Text Is Art
   8. Art Is Math
   9. An SVG Is a Limited View of an Infinite Canvas
   10. SVG Has Structure
   11. SVG Has Style
   12. Behind All Good Markup Is a Great DOM
   13. SVG Can Move
   14. SVG Can Change
3. 2. The Painter’s Model
   1. Fill ’Er Up with the fill Property
   2. Stroke It with the stroke Property
   3. Stroking the Fill and Filling the Stroke
   4. Take a Hint with Rendering Properties
4. 3. Creating Colors
   1. Misty Rose by Any Other Name
   2. A Rainbow in Three Colors
   3. Custom Colors
   4. Mixing and Matching
5. 4. Becoming Transparent
   1. See-Through Styles
   2. The Net Effect
6. 5. Serving Paint
   1. Paint and Wallpaper
   2. Identifying Your Assets
   3. The Solid Gradient
7. 6. Simple Gradients
   1. Gradiated Gradients
   2. Transparency Gradients
   3. Controlling the Color Transition
8. 7. Gradients in All Shapes and Sizes
   1. The Gradient Vector
   2. The Object Bounding Box
   3. Drawing Outside the Box
   4. Gradients, Transformed
9. 8. And Repeat
   1. How to Spread Your Gradient
   2. Reflections on Infinite Gradients
   3. Repeating Without Reflecting
   4. Using (and Reusing) Gradients in HTML
10. 9. Radial Gradients
    1. Radial Gradient Basics
    2. Filling the Box
    3. Scaling the Circle
    4. Adjusting the Focus
    5. Transforming Radial Gradients
    6. Grand Gradients
11. 10. Tiles and Textures
    1. Building a Building Block
    2. Stretching to Fit
    3. Laying Tiles
    4. Transformed Tiles
12. 11. Picture-Perfect Patterns
    1. The Layered Look
    2. Preserved Patterns
    3. Background Images, SVG-Style
13. 12. Textured Text
    1. Bounding Text
    2. Switching Styles Midstream
14. 13. Painting Lines
    1. Beyond the Edges
    2. The Empty Box
    3. Using the Coordinate Space
    4. Patterned Lines
15. 14. Motion Pictures
    1. Animation Options
    2. Coordinated Animation
    3. Animated Interactions
16. A. Color Keywords and Syntax
17. B. Elements, Attributes, and Style Properties
    1. <linearGradient>
    2. <radialGradient>
    3. <stop>
    4. <pattern>
18. Index