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 software, and the power of JavaScript. You'll use a starting toolset to incorporate into your existing workflow, develop future projects, and reduce any dependency on graphics applications for simple projects. This book is an excellent resource for getting acquainted with creating and manipulating SVG content. We live in an age where speed and simplicity are of the essence. Beginning SVG provides a perfect alternative when creating web-based projects that challenges the norm and encourages you to expand your resources and not resort to what "everyone else uses" (such as Illustrator). You'll discover that there is indeed a different way to achieve the same result. Stop thinking you must always resort to using graphics packages; there is always another way! What You'll Learn Create powerful, optimized content that can be quickly and easily manipulated within the browser Get up to speed with SVG quickly, with minimal effort and maximum results See how easy it is to apply SVG content and effects, without the need for lots of additional tools. Who This Book Is For Website developers and agile development teams who are keen to learn how to add and manipulate SVG quickly. Table of Contents 5 About the Author 12 About the Technical Reviewer 13 Acknowledgments 14 Introduction 15 Part I: Getting Started 16 Chapter 1: Introducing SVG 17 The Benefits of Using SVG 17 Comparing Formats 20 Setting Up a Working Environment 23 Support for SVG 24 Creating a Basic Example 26 Understanding How It Works 28 Adding Fallback Support 29 Types of Fallback 31 Implementing a Fallback Image 31 Adding SVGs as Background Images 32 Managing Inline Support 32 Supporting an Icon System 34 Summary 35 Chapter 2: Adding SVG Content to a Page 36 Implementing SVG Shapes 37 Creating Squares and Rectangles 37 Understanding How the Code Works 39 Drawing Circles and Ellipses 40 Exploring How the Code Works 42 Drawing Lines, Polylines, and Polygons 43 Exploring How the Code Works 45 Constructing Paths and Markers 45 Understanding Our Code in Detail 47 Adding Markers to SVG Paths 48 Understanding How Our Code Works 50 Creating More Advanced Shapes 51 Dissecting Our Gauge Code 54 Creating Unusual Shapes with Clip-Paths 54 Painting Elements 57 Creating Gradients and Patterns 59 Constructing Gradients 59 Using Radial Gradients 62 Exploring How Our Code Works 63 Taking It Further 64 Applying Pattern Effects to CSS Backgrounds 64 Exploring the Code in Detail 68 Creating an Alternative Pattern 68 Setting Advanced Configuration Options 70 Summary 70 Part II: In More Detail 72 Chapter 3: Working with Images and Text 73 Inserting Images 73 Understanding the Benefits 75 Exporting Images 75 Exporting Images – an Epilogue 77 Using SVGs as Data URIs 78 Optimizing Our Image 79 Understanding How Our Code Works 82 Applying Image Masks 83 Exploring How the Code Works 85 Working with Icons 86 Creating Image Sprites with Icons 86 Using the Element 87 Automating the Process 90 Adding Text with the Element 93 Applying Different Effects to Text 95 Exploring How the Code Works 98 Embedding Other Content 98 Adding Videos 98 Implementing a Real-World Example 101 Understanding How It Works 103 Summary 104 Chapter 4: Sizing SVG 106 Understanding Scalability 106 Understanding the Impact of Scaling 109 Getting to Grips with SVG Coordinates 110 Applying Coordinates to an SVG 111 Introducing the SVG Scaling Toolbox 113 Setting Height and Width Attributes 114 Implementing a viewBox 115 Preserving the Aspect Ratio 117 Putting the Toolbox to Use 119 Understanding How It Works 122 Making SVG Content Responsive 123 Introducing the Golden Rules 125 Updating SVG Images 127 Using Media Queries with SVG Content 129 Understanding the Pitfalls 131 Making SVG images Adaptive or Responsive? 132 Summary 134 Chapter 5: Creating Filters 135 Introduction 135 The Benefits of Using SVG Filters 135 Exploring Existing Filters 137 Introducing SVG Primitives for Filters 138 Manipulating Content with Filters 140 Dissecting Our Code 142 Creating and Applying Filters 143 Changing Color with Filters 145 Understanding Our Code 147 Calculating Colors to Use 147 Re-creating filters à la Instagram 149 Understanding How It Works 152 Blending and Merging SVG Filters 152 Taking It Further in Watercolors 153 Creating Our Filter – an Epilogue 155 Animating Filter Effects 157 Is This the Right Solution? 159 Creating a Practical Example 160 Understanding What Is Happening 162 Summary 163 Chapter 6: Animating Content 165 Animating with CSS 165 Understanding the Different Methods 167 Transforming SVG Elements Using CSS 168 Moving Content with 171 Creating a Clock Using 172 Dissecting Our Code 175 Creating Animated SVG Loaders 175 Understanding How the Code Works 177 Managing Multiple Animations 178 Working with Third-Party Libraries 180 Introducing Snap.svg 181 Applying Easing Effects to Elements 183 Getting Prepared 183 Exploring the Code in Detail 185 Choosing Our Route – an Epilogue 186 Summary 187 Chapter 7: Optimizing SVG 189 Exporting SVG Images for Use 189 Understanding the Importance of Optimization 190 Assessing Performance 191 Taking Care of Accessibility 193 Making Content Accessible 195 Shrinking Images with SVGO 196 Optimizing Manually 196 Understanding How It Works 198 Automating the Optimization Process 199 Exploring the Demo in More Detail 204 Learning How to Micro-optimize Content 205 Paying Attention to Data URIs 208 Optimizing Data URIs 209 Exploring the Code in Detail 210 Summary 212 Part III: Putting SVG to Use 214 Chapter 8: Creating SVG Charts 215 Understanding the Benefits of SVG for Charts 215 Designing Individual Charts Using SVG 216 Creating Donuts 217 Understanding How Our Chart Works 219 Working Through the Formula 219 Putting It into Practice 220 Eating Pie 221 Exploring the Code in Detail 223 Raising the Bar 226 Understanding Our Code 227 Connecting the Dots 229 Dissecting Our Code 230 Sparking Lines to Life 231 Breaking Apart Our Code 232 Making Charts Interactive 233 Animating Chart Content 236 Animating Charts Using CSS 237 Animating Charts with Snap.svg 240 Breaking Down Our Code 242 Making Charts Interactive – a Postscript 243 Exploring Other Library Options 244 Creating Charts Online Using amcharts.js 245 Summary 248 Chapter 9: Incorporating SVG Libraries 249 Why Use a Library? 249 Choosing the Right Library 250 An Overview of Available Libraries 251 Using Vivus to Draw SVG Images 253 Understanding How It Works 255 Creating Bubble Charts with D3 256 Exploring Our Demo in Detail 260 Improving Our Design 260 Getting Creative with Anime.js 261 Dissecting Our Demo 265 Taking a Different Look at Filters 266 Exploring the Code in More Detail 269 Summary 270 Chapter 10: Taking It Further 272 Manipulating SVG with JavaScript 272 Dissecting the Markup Code 274 Dissecting Our Code – the Functions Used 276 Animating Borders Using SVG 278 Dissecting the Demo 281 Creating Menus Using GSAP and SVG 281 Understanding How It Works 284 Lazy Loading with SVG 284 Breaking Apart Our Code 287 Creating Template-Based Charts 288 Dissecting the Code 294 Exploring the Ractive Script Code 295 A Parting Shot 296 Tilting UI Effect 297 Panning and Zooming Images 298 Tracking Progress 299 Summary 300 Index 302 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 software, and the power of JavaScript.You'lluse a starting toolset to incorporate into your existing workflow, develop future projects, and reduce any dependency on graphics applications for simple projects. This book is an excellent resource for getting acquainted with creating and manipulating SVG content.We live in an age where speed and simplicity are of the essence.__Beginning SVG__provides a perfect alternative when creating web-based projects that challenges the norm and encourages you to expand your resources and not resort to what "everyone else uses" (such as Illustrator). You'll discover that there is indeed a different way to achieve the same result. Stop thinking you must always resort to using graphics packages; there is always another way!**What You'll Learn**Create powerful, optimized content that can be quickly and easily manipulated within the browserGet up to speed with SVG quickly, with minimal effort and maximum resultsSee how easy it is to apply SVG content and effects, without the need for lots of additional tools.**Who This Book Is For**Website developers and agile development teams who are keen to learn how to add and manipulate SVG quickly. Front Matter ....Pages i-xix Front Matter ....Pages 1-1 Introducing SVG (Alex Libby)....Pages 3-21 Adding SVG Content to a Page (Alex Libby)....Pages 23-58 Front Matter ....Pages 59-59 Working with Images and Text (Alex Libby)....Pages 61-93 Sizing SVG (Alex Libby)....Pages 95-123 Creating Filters (Alex Libby)....Pages 125-154 Animating Content (Alex Libby)....Pages 155-178 Optimizing SVG (Alex Libby)....Pages 179-203 Front Matter ....Pages 205-205 Creating SVG Charts (Alex Libby)....Pages 207-240 Incorporating SVG Libraries (Alex Libby)....Pages 241-263 Taking It Further (Alex Libby)....Pages 265-294 Back Matter ....Pages 295-298