Alex Libby
Beginning SVGA Practical Introduction to SVG using Real-World Examples
Alex Libby
Rugby, Warwickshire, UK
ISBN 978-1-4842-3759-5e-ISBN 978-1-4842-3760-1
https://doi.org/10.1007/978-1-4842-3760-1
Library of Congress Control Number: 2018955493
© Alex Libby 2018
This work is subject to copyright. All rights are reserved by the Publisher, whether the whole or part of the material is concerned, specifically the rights of translation, reprinting, reuse of illustrations, recitation, broadcasting, reproduction on microfilms or in any other physical way, and transmission or information storage and retrieval, electronic adaptation, computer software, or by similar or dissimilar methodology now known or hereafter developed.
Trademarked names, logos, and images may appear in this book. Rather than use a trademark symbol with every occurrence of a trademarked name, logo, or image we use the names, logos, and images only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark. The use in this publication of trade names, trademarks, service marks, and similar terms, even if they are not identified as such, is not to be taken as an expression of opinion as to whether or not they are subject to proprietary rights.
While the advice and information in this book are believed to be true and accurate at the date of publication, neither the authors nor the editors nor the publisher can accept any legal responsibility for any errors or omissions that may be made. The publisher makes no warranty, express or implied, with respect to the material contained herein.
Distributed to the book trade worldwide by Springer Science+Business Media New York, 233 Spring Street, 6th Floor, New York, NY 10013. Phone 1-800-SPRINGER, fax (201) 348-4505, e-mail [email protected], or visit www.springeronline.com. Apress Media, LLC is a California LLC and the sole member (owner) is Springer Science + Business Media Finance Inc (SSBM Finance Inc). SSBM Finance Inc is a Delaware corporation.

This is dedicated to my family, with thanks for their love and support whilst writing this book.

Introduction

Beginning SVG is for people who want to learn how to create and manipulate SVG content in the browser quickly, natively, or by using third-party tools such as Snap.js.

Originally released back in 2001, it has only gained real-world acceptance within the last few years, as an easy-to-edit, convenient format for displaying scalable content without loss of quality. Over the course of this book, I’ll take you on a journey through using the format, showing you how easy it is to create and edit reusable shapes and text, using the format. We’ll cover such diverse topics as animating content, creating custom filters, optimizing it for efficiency – right through to some real-world examples that you can use as a basis for future projects. This book will provide you will a solid grounding in using SVG as a format, with lots of simple exercises to help you develop your skills using SVG as a format.

Beginning SVG is for the website developer who is keen to learn how to use SVG to quickly produce dynamic visual effects in the browser, without the need to use or learn packages such as Adobe Illustrator. It’s ideal for those in Agile development teams, where time is of the essence, and the pressure is on to deliver results rapidly. It’s perfect for those developers who want to focus on producing great effects or content but who don’t want to have to rely on using lots of external resources, or others to style content such as images when it can easily be done in the browser.

Acknowledgments

Writing a book can be a long but rewarding process; it is not possible to complete it without the help of other people. I would like to offer a huge vote of thanks to my editors, but in particular Nancy Chen and Louise Corrigan, and with Zach Inglis as technical reviewer – all three have made writing this book for Apress a painless and enjoyable process, even with all of the edits!

My thanks also to my family for being so understanding and supporting me while writing – it requires a lot of late nights alone, so their words of encouragement (and also from Nancy and Louise) have been a real help in getting to the end and producing the finished result that you now have in your hands.

Table of Contents

Part I: Getting Started
Chapter 1:​ Introducing SVG 3
The Benefits of Using SVG 3
Comparing Formats 6
Setting Up a Working Environment 9
Support for SVG 10
Creating a Basic Example 12
Understanding How It Works 14
Adding Fallback Support 15
Types of Fallback 17
Implementing a Fallback Image 17
Adding SVGs as Background Images 18
Managing Inline Support 18
Supporting an Icon System 20
Summary 21
Chapter 2:​ Adding SVG Content to a Page 23
Implementing SVG Shapes 24
Creating Squares and Rectangles 24
Drawing Circles and Ellipses 27
Drawing Lines, Polylines, and Polygons 30
Constructing Paths and Markers 32
Creating More Advanced Shapes 38
Dissecting Our Gauge Code 41
Creating Unusual Shapes with Clip-Paths 41
Painting Elements 44
Creating Gradients and Patterns 46
Constructing Gradients 46
Using Radial Gradients 49
Taking It Further 51
Applying Pattern Effects to CSS Backgrounds 51
Setting Advanced Configuration Options 57
Summary 57
Part II: In More Detail
Chapter 3:​ Working with Images and Text 61
Inserting Images 61
Understanding the Benefits 63
Exporting Images 63
Exporting Images – an Epilogue 65
Using SVGs as Data URIs 66
Optimizing Our Image 67
Understanding How Our Code Works 70
Applying Image Masks 71
Exploring How the Code Works 73
Working with Icons 74
Creating Image Sprites with Icons 74
Using the <symbol> Element 75
Automating the Process 78
Adding Text with the <text> Element 81
Applying Different Effects to Text 83
Exploring How the Code Works 86
Embedding Other Content 86
Adding Videos 86
Implementing a Real-World Example 89
Understanding How It Works 91
Summary 92
Chapter 4:​ Sizing SVG 95
Understanding Scalability 95
Understanding the Impact of Scaling 98
Getting to Grips with SVG Coordinates 99
Applying Coordinates to an SVG 100
Introducing the SVG Scaling Toolbox 102
Setting Height and Width Attributes 103
Implementing a viewBox 104
Preserving the Aspect Ratio 106
Putting the Toolbox to Use 108
Understanding How It Works 111
Making SVG Content Responsive 112
Introducing the Golden Rules 114
Updating SVG Images 116
Using Media Queries with SVG Content 118
Understanding the Pitfalls 120
Making SVG images Adaptive or Responsive?​ 121
Summary 123
Chapter 5:​ Creating Filters 125
Introduction 125
The Benefits of Using SVG Filters 125
Exploring Existing Filters 127
Introducing SVG Primitives for Filters 128
Manipulating Content with Filters 130
Dissecting Our Code 132
Creating and Applying Filters 133
Changing Color with Filters 135
Understanding Our Code 137
Calculating Colors to Use 137
Re-creating filters à la Instagram 139
Understanding How It Works 142
Blending and Merging SVG Filters 142
Taking It Further in Watercolors 143
Creating Our Filter – an Epilogue 145
Animating Filter Effects 147
Is This the Right Solution?​ 149
Creating a Practical Example 150
Understanding What Is Happening 152
Summary 153
Chapter 6:​ Animating Content 155
Animating with CSS 155
Understanding the Different Methods 157
Transforming SVG Elements Using CSS 158
Moving Content with <animate> 161
Creating a Clock Using <animate> 162
Dissecting Our Code 165
Creating Animated SVG Loaders 165
Understanding How the Code Works 167
Managing Multiple Animations 168
Working with Third-Party Libraries 170
Introducing Snap.​svg 171
Applying Easing Effects to Elements 173
Getting Prepared 173
Exploring the Code in Detail 175
Choosing Our Route – an Epilogue 176
Summary 177
Chapter 7:​ Optimizing SVG 179
Exporting SVG Images for Use 179
Understanding the Importance of Optimization 180
Assessing Performance 181
Taking Care of Accessibility 183
Making Content Accessible 185
Shrinking Images with SVGO 186
Optimizing Manually 186
Automating the Optimization Process 189
Learning How to Micro-optimize Content 195
Paying Attention to Data URIs 198
Optimizing Data URIs 199
Exploring the Code in Detail 200
Summary 202
Part III: Putting SVG to Use
Chapter 8:​ Creating SVG Charts 207
Understanding the Benefits of SVG for Charts 207
Designing Individual Charts Using SVG 208
Creating Donuts 209
Eating Pie 213
Raising the Bar 218
Connecting the Dots 221
Sparking Lines to Life 223
Making Charts Interactive 225
Animating Chart Content 228
Animating Charts Using CSS 229
Animating Charts with Snap.​svg 232
Breaking Down Our Code 234
Making Charts Interactive – a Postscript 235
Exploring Other Library Options 236
Creating Charts Online Using amcharts.​js 237
Summary 240
Chapter 9:​ Incorporating SVG Libraries 241
Why Use a Library?​ 241
Choosing the Right Library 242
An Overview of Available Libraries 243
Using Vivus to Draw SVG Images 245
Understanding How It Works 247
Creating Bubble Charts with D3 248
Exploring Our Demo in Detail 252
Improving Our Design 252
Getting Creative with Anime.​js 253
Dissecting Our Demo 257
Taking a Different Look at Filters 258
Exploring the Code in More Detail 261
Summary 262
Chapter 10:​ Taking It Further 265
Manipulating SVG with JavaScript 265
Dissecting the Markup Code 267
Dissecting Our Code – the Functions Used 269
Animating Borders Using SVG 271
Dissecting the Demo 274
Creating Menus Using GSAP and SVG 274
Understanding How It Works 277
Lazy Loading with SVG 277
Breaking Apart Our Code 280
Creating Template-Based Charts 281
Dissecting the Code 287
A Parting Shot 289
Tilting UI Effect 290
Panning and Zooming Images 291
Tracking Progress 292
Summary 293
Index295

About the Author and About the Technical Reviewer

About the Author

Alex Libby

is a Digital Ops / MVT developer, working for a global distributor based in the United Kingdom. Although Alex gets to play with different technologies in his day job, his first true love has always been with the open source movement, and in particular experimenting with front-end frameworks and libraries. To date, Alex has written a host of books on subjects such as jQuery, HTML5 Video, SASS, and PostCSS. In his spare time, Alex can often be found putting on shows at his local theater, or out and about on his bike (and with his camera).

 

About the Technical Reviewer

Zach Inglis
../images/461821_1_En_BookFrontmatter_Figb_HTML.jpg

is a web design and developer hybrid. He started teaching himself design and programming 19 years ago and hasn’t looked back since. As one-half of design agency Superhero Studios ( http://www.superhero-studios.com ), Zach takes care of web and print design, branding, and business strategy for a wide range of large and small clients. Zach was also co-organizer of HybridConf, an inclusive conference dedicated to bridging the gap between design and development.

 
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.129.42.134