Larsen - Mastering SVG ace web animations, visualizations, and vector graphics with HTML, CSS, and JavaScript

Copyright 2018 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

Commissioning Editor: Kunal Chaudhari
Acquisition Editor: Karan Gupta
Content Development Editor: Arun Nadar
Technical Editor: Surabhi Kulkarni
Copy Editor: Safis Editing
Project Coordinator: Sheejal Shah
Proofreader: Safis Editing
Indexer: Mariammal Chettiyar
Graphics: Alishon Mendonsa
Production Coordinator: Deepika Naik

First published: September 2018

Production reference: 1190918

Published by Packt Publishing Ltd.
Livery Place
35 Livery Street
Birmingham
B3 2PB, UK.

ISBN 978-1-78862-674-3

www.packtpub.com

Mapt is an online digital library that gives you full access to over 5,000 books and videos, as well as industry leading tools to help you plan your personal development and advance your career. For more information, please visit our website.

• Spend less time learning and more time coding with practical eBooks and Videos from over 4,000 industry professionals

• Improve your learning with Skill Plans built especially for you

• Get a free eBook or video every month

• Mapt is fully searchable

• Copy and paste, print, and bookmark content

Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at service@packtpub.com for more details.

At www.PacktPub.com , you can also read a collection of free technical articles, sign up for a range of free newsletters, and receive exclusive discounts and offers on Packt books and eBooks.

Rob Larsen is an experienced frontend engineer, team lead, and manager. He is an active writer and speaker on web technology with a special focus on the continuing evolution of HTML, CSS, and JavaScript. He is a co-author of Professional jQuery, the author of Beginning HTML and CSS, and the author of The Uncertain Web. He's also an active member of the open source community as a maintainer of several popular projects.

Danny Allen is a full-stack web developer who focuses on user experience design and implementation as founder of the international consultancy Wonderscore Ltd (wonderscore[dot]co[dot]uk).

He is passionate about building high-quality, accessible, and usable experiences on the web.

Danny currently lives and works in the United Kingdom.

His portfolio and contact details can be found at dannya[dot]com.

If you're interested in becoming an author for Packt, please visit authors.packtpub.com
and apply today. We have worked with thousands of developers and tech professionals,
just like you, to help them share their insight with the global tech community. You can
make a general application, apply for a specific hot topic that we are recruiting an author
for, or submit your own idea.

This book is for web developers and designers looking to add scalable, device-independent animation, images, and visualizations to their projects. Scalable Vector Graphics is an image file format introduced in 1998 by the World Wide Web Consortium (W3C). For many years, it languished behind poor browser compatibility and an unfriendly API. Over the past few years, it has become a vital part of the modern web development toolkit. SVG offers many important features for the modern web. For example, in a world of multiple device resolutions, it offers a simple path to high-quality image scaling without having to produce multiple resolutions for your image and without having to jump through complicated markup patterns. Also, being built in XML-based markup, it also allows easy access to common JavaScript patterns for creating highly interactive interfaces.

This book will teach you the fundamentals of working with SVG as static images, in CSS, inline as elements in an HTML document, and as a scripted part of animations or visualizations.

This book is for web developers interested in exploring Scalable Vector Graphics. It is written from the perspective of a frontend web developer, but anyone with experience with JavaScript, CSS, and XML-based grammars should find this book accessible.

Prior experience with SVG is not required.

, Introducing Scalable Vector Graphics , introduces the basics of SVG and will show you some fundamental examples of working with the format.

, Getting Started with Authoring SVG, introduces the fundamental concepts for authoring SVG in detail.

, Digging Deeper with SVG Authoring, introduces more advanced concepts for authoring SVG, including transformations, clipping and masking, and importing SVG elements into a document.

, Using SVG in HTML, adds further details about using SVG elements and SVG images in HTML documents.

, Working with SVG and CSS, introduces the reader to using SVG images in CSS, replacing PNGs and Gifs in the modern web development toolkit. This chapter also introduces the many ways you can use CSS to modify SVG elements.

, JavaScript and SVG, teaches the reader the basic JavaScript SVG Application Programming Interface by introducing the common Document Object Model methods that allow a developer to access and manipulate SVG properties.

, Common JavaScript Libraries and SVG, teaches the basics of interfacing with SVG from common libraries and frameworks includding jQuery, AngularJS, Angular, and ReactJS.