Librería Portfolio

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.



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