Book Image

Mastering SVG

By : Rob Larsen
Book Image

Mastering SVG

By: Rob Larsen

Overview of this book

SVG is the most powerful image format in use on the web. In addition to producing resolution-independent images for today's multi-device world, SVG allows you to create animations and visualizations to add to your sites and applications. The simplicity of cross-platform markup, mixed with familiar modern web languages, such as CSS and JavaScript, creates a winning combination for designers and developers alike. In this book, you will learn how to author an SVG document using common SVG features, such as elements and attributes, and serve SVG on the web using simple configuration tips for common web servers. You will also use SVG elements and images in HTML documents. Further, you will use SVG images for a variety of common tasks, such as manipulating SVG elements, adding animations using CSS, mastering the basic JavaScript SVG (API) using Document Object Model (DOM) methods, and interfacing SVG with common libraries and frameworks, such as React, jQuery, and Angular. You will then build an understanding of the Snap.svg and SVG.js APIs, along with the basics of D3, and take a look at how to implement interesting visualizations using the library. By the end of the book, you will have mastered creating animations with SVG.
Table of Contents (17 chapters)
Title Page

Chapter 6. JavaScript and SVG

You've learned quite a bit in this book so far about SVG. You've spent a lot of time looking at the details of the SVG specification and the different ways in which SVG can interact with CSS and HTML. Hopefully, it's been as interesting for you as it is for me. 

As interesting as it has all been, it's this chapter where we'll put all the tools together to really unlock the power of SVG. Adding JavaScript to the mix opens up a huge number of new possibilities.

Granted, there are many web developers and designers who will never do animation, dynamic visualizations, or other interactive work with SVG. For them, getting a full understanding of the way that SVG itself works as markup and how it fits in with other static web technologies is incredibly valuable. This is especially true of the intersection between SVG and CSS that we just learned about in detail.

That said, the most exciting thing about SVG is how easily it works with JavaScript to enhance the interactivity...