Building Web Applications with SVG

Create rich interactivity with Scalable Vector Graphics (SVG)

Dive into SVG—and build striking, interactive visuals for your web applications. Led by three SVG experts, you’ll learn step-by-step how to use SVG techniques for animation, overlays, and dynamic charts and graphs. Then you’ll put it all together by building two graphic-rich applications. Get started creating dynamic visual content using web technologies you’re familiar with—such as JavaScript, CSS, DOM, and AJAX.

Discover how to:

• Build client-side graphics with little impact on your web server
• Create simple user interfaces for mobile and desktop web browsers
• Work with complex shapes and design reusable patterns
• Position, scale, and rotate text elements using SVG transforms
• Create animations using the Synchronized Multimedia Integration Language (SMIL)
• Build more powerful animations by manipulating SVG with JavaScript
• Apply filters to sharpen, blur, warp, reconfigure colors, and more
• Make use of programming libraries such as Pergola, D3, and Polymaps

Online Sample Chapter

Creating and Editing SVG Graphics

Sample Pages

Download the sample content

Table of Contents

• Introduction
• Chapter 1: SVG Basics
• Chapter 2: Creating and Editing SVG Graphics
• Chapter 3: Adding Text, Style, and Transforms
• Chapter 4: Motion and Interactivity
• Chapter 5: SVG Filters
• Chapter 6: SVG Tools and Resources
• Chapter 7: Building a Web Application: Case Studies

Downloads

1. Click the following link: Download the companion content.
2. Click Save.
3. Locate the .zip file on your computer. Right-click the file, click Extract All, and then follow the instructions.

Errata

We've made every effort to ensure the accuracy of this book and its companion content. Any errors that have been confirmed since this book was published can be downloaded below.

Download the errata

If you find an error, you can report it to us through our Submit errata page.