Alex Libby
Beginning SVG A Practical Introduction to SVG using Real-World Examples
Alex Libby
Rugby, Warwickshire, UK
Any source code or other supplementary material referenced by the author in this book is available to readers on GitHub via the book's product page, located at www.apress.com/9781484237595 . For more detailed information, please visit http://www.apress.com/source-code .
ISBN 978-1-4842-3759-5 e-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 orders-ny@springer-sbm.com, 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, Ill 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. Well 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. Its ideal for those in Agile development teams, where time is of the essence, and the pressure is on to deliver results rapidly. Its perfect for those developers who want to focus on producing great effects or content but who dont 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
Part II: In More Detail
Part III: Putting SVG to Use
Index
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
is a web design and developer hybrid. He started teaching himself design and programming 19 years ago and hasnt 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.
Part I Getting Started
Alex Libby 2018
Alex Libby Beginning SVG https://doi.org/10.1007/978-1-4842-3760-1_1
1. Introducing SVG
Alex Libby
(1)
Rugby, Warwickshire, UK
Let me start with a question which image format should I use: bitmap or vector, PNGs, JPEGs?
If you spend any time developing content for the web, then I am sure youve asked yourself this question countless times: there is a whole array of different formats that we can use, all of which have their own particular qualities! There isnt a single image format that is ideally suited to the web, which encompasses the best qualities of all image types, although Google has tried to push this with the WebP format, which hasnt received widespread adoption among other browser providers.
In many cases, I suspect that either JPEG or PNG images would be favored; these are perfect for complex images where detail is essential (such as photographs). However, if you need to display clear line drawings, or 2D images, for example, then these formats arent ideal. There are several reasons why, but one of the key weaknesses is maintaining quality try resizing a schematic saved as a PNG, and the quality soon becomes very poor! There has to be a better way surely?