Mastering SVG: Ace web animations, visualizations, and vector graphics with HTML, CSS, and JavaScript - Softcover

Larsen, Rob

Softcover

ISBN 10: 1788626745 ISBN 13: 9781788626743

Publisher: Packt Publishing, 2018

Synopsis

Master the image format of the modern web

Key Features

• Master the art of creating responsive and interactive graphics with SVG, CSS, and JavaScript
• Combine SVG with popular animation libraries and frameworks for GUI rich applications
• Create an awesome user experience with high performance graphics for your web applications

Book Description

SVG is considered as an important aspect of animating your web applications. It's a cross-platform markup along with the combination of modern web technologies that proves to be the winning combination for web designers and developers. This book will show you the different facets of SVG and the various considerations and prerequisites for animating with SVG.

The book gets started with the basic concepts of SVG and then outlines the different ways that SVG can be used on the modern web.

You will learn how to author an SVG document using the most common features of SVG such as elements and attributes, and also learn how to serve SVG on the web with simple configuration tips for common web servers. Next, you will use SVG elements and SVG images in HTML documents.

Moving on, you will use SVG images confidently for a variety of common tasks and learn how to manipulate SVG elements. You will also see how to add animation with just the power of CSS. Next, you will learn the basic JavaScript SVG (API) by introducing the common Document Object Model (DOM) methods and then how to interface SVG with common libraries and frameworks such as React, JQuery, and Angular.

You will then build an understanding of the APIs of both Snap.svg and SVG.js along with the basics of D3 and see how to implement interesting visualizations using the library.

By the end of the book, you would have mastered creating animation with SVG.

What you will learn

• Basics of SVG production
• How to deliver the elements that make up an SVG image
• Learn how to replace your old CSS Sprites with SVG
• Animation and data visualization with SVG will be explained in both pure JavaScript and using common libraries
• Use SVG for scaling images across multiple devices easily
• Harness the power of CSS Animations and Transformations to manipulate your SVG images in a replicable, remixable way
• Interface SVG with common libraries and frameworks such as jQuery, React, and Angular

Who This Book Is For

This book is for web developers and designers looking to add animation to their projects. Some experience with HTML, CSS, and JavaScript is required.

About this title

About the Author

Rob Larsen is an experienced front end engineer, team lead and manager. Since 1999 (that's Web 1.0, if you're keeping track) been building web sites and applications for some of the world's biggest brands.

Rob is an active writer and speaker on web technology with a special focus on the continuing evolution of HTML, CSS and JavaScript. He is co-author of Professional jQuery, the author of Beginning HTML and CSS and the author of The Uncertain Web, from O'Reilly. He's also an active member of the open source community.

In his career Rob has spent time at Sapient Global Markets, Isobar, The Brand Experience, Cramer and as an independent consultant. Over the course of his career Rob has solved unique problems for clients like Samsung, Motorola, Philips, Gillette, Boston's Museum of Science, and Harvard Kennedy School.

Edition details

• Publisher: Packt Publishing
• Publication date: 2018
• Language: English
• ISBN 10: 1788626745
• ISBN 13: 9781788626743
• Binding: Paperback
• Number of pages: 312