Beginning SVG a practical introduction to SVG using real-world examples
Develop SVG functionality for use within websites quickly and natively, using basic tools such as HTML and CSS. This book is a project-oriented guide to creating and manipulating scalable vector graphics in the browser for websites or online applications, using little more than a text editor or free...
| Main Author: | |
|---|---|
| Format: | eBook |
| Language: | English |
| Published: |
New York, NY
Apress
2018
|
| Subjects: | |
| Online Access: | |
| Collection: | O'Reilly - Collection details see MPG.ReNa |
Table of Contents:
- Includes bibliographical references and index
- Exploring How the Code WorksEmbedding Other Content; Adding Videos; Implementing a Real-World Example; Understanding How It Works; Summary; Chapter 4: Sizing SVG; Understanding Scalability; Understanding the Impact of Scaling; Getting to Grips with SVG Coordinates; Applying Coordinates to an SVG; Introducing the SVG Scaling Toolbox; Setting Height and Width Attributes; Implementing a viewBox; Preserving the Aspect Ratio; Putting the Toolbox to Use; Understanding How It Works; Making SVG Content Responsive; Introducing the Golden Rules; Updating SVG Images; Using Media Queries with SVG Content
- Understanding How the Code WorksDrawing Circles and Ellipses; Exploring How the Code Works; Drawing Lines, Polylines, and Polygons; Exploring How the Code Works; Constructing Paths and Markers; Understanding Our Code in Detail; Adding Markers to SVG Paths; Understanding How Our Code Works; Creating More Advanced Shapes; Dissecting Our Gauge Code; Creating Unusual Shapes with Clip-Paths; Painting Elements; Creating Gradients and Patterns; Constructing Gradients; Using Radial Gradients; Exploring How Our Code Works; Taking It Further; Applying Pattern Effects to CSS Backgrounds
- Exploring the Code in DetailCreating an Alternative Pattern; Setting Advanced Configuration Options; Summary; Part II: In More Detail; Chapter 3: Working with Images and Text; Inserting Images; Understanding the Benefits; Exporting Images; Exporting Images
- an Epilogue; Using SVGs as Data URIs; Optimizing Our Image; Understanding How Our Code Works; Applying Image Masks; Exploring How the Code Works; Working with Icons; Creating Image Sprites with Icons; Using the Element; Automating the Process; Adding Text with the Element; Applying Different Effects to Text
- Understanding the PitfallsMaking SVG images Adaptive or Responsive?; Summary; Chapter 5: Creating Filters; Introduction; The Benefits of Using SVG Filters; Exploring Existing Filters; Introducing SVG Primitives for Filters; Manipulating Content with Filters; Dissecting Our Code; Creating and Applying Filters; Changing Color with Filters; Understanding Our Code; Calculating Colors to Use; Re-creating filters à la Instagram; Understanding How It Works; Blending and Merging SVG Filters; Taking It Further in Watercolors; Creating Our Filter
- an Epilogue; Animating Filter Effects
- Intro; Table of Contents; About the Author; About the Technical Reviewer; Acknowledgments; Introduction; Part I: Getting Started; Chapter 1: Introducing SVG; The Benefits of Using SVG; Comparing Formats; Setting Up a Working Environment; Support for SVG; Creating a Basic Example; Understanding How It Works; Adding Fallback Support; Types of Fallback; Implementing a Fallback Image; Adding SVGs as Background Images; Managing Inline Support; Supporting an Icon System; Summary; Chapter 2: Adding SVG Content to a Page; Implementing SVG Shapes; Creating Squares and Rectangles