SVG Colors, Patterns & Gradients. Painting Vector Graphics (e-book) Rybnik

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. Spis treści: PrefaceWhat Well CoverAbout This BookAbout the ExamplesUsing Code ExamplesConventions Used in This BookSafari Books OnlineHow to Contact UsAcknowledgments1. Things You Should Already KnowSVG Is Drawing with CodeSVG Is Always Open SourceSVG Is XML (and Sometimes HTML)SVG Is SquishablePictures Are a Collection of ShapesImages Can Have Images Inside ThemText Is ArtArt Is MathAn SVG Is a Limited View of an Infinite CanvasSVG Has StructureSVG Has StyleBehind All Good Markup Is a Great DOMSVG Can MoveSVG Can Change2. The Painters ModelFill Er Up with the fill PropertyStroke It with the stroke PropertyStroking the Fill and Filling the StrokeTake a Hint with Rendering Properties3. Creating ColorsMisty Rose by Any Other NameA Rainbow in Three ColorsCustom ColorsMixing and Matching4. Becoming TransparentSee-Through StylesThe Net Effect5. Serving PaintPaint and WallpaperIdentifying Your AssetsThe Solid Gradient6. Simple GradientsGradiated GradientsTransparency GradientsControlling the Color Transition7. Gradients in All Shapes and SizesThe Gradient VectorThe Object Bounding BoxDrawing Outside the BoxGradients, Transformed8. And RepeatHow to Spread Your GradientReflections on Infinite GradientsRepeating Without ReflectingUsing (and Reusing) Gradients in HTML9. Radial GradientsRadial Gradient BasicsFilling the BoxScaling the CircleAdjusting the FocusTransforming Radial GradientsGrand Gradients10. Tiles and TexturesBuilding a Building BlockStretching to FitLaying TilesTransformed Tiles11. Picture-Perfect PatternsThe Layered LookPreserved PatternsBackground Images, SVG-Style12. Textured TextBounding TextSwitching Styles Midstream13. Painting LinesBeyond the EdgesThe Empty BoxUsing the Coordinate SpacePatterned Lines14. Motion PicturesAnimation OptionsCoordinated AnimationAnimated InteractionsA. Color Keywords and SyntaxB. Elements, Attributes, and Style PropertiesIndex