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 1. Introducing Scalable Vector Graphics

Scalable Vector Graphics (SVG) is one of the most powerful components of modern web development. If used properly, it can solve common problems relating to the design, development, and delivery of imagery and user interfaces

SVG is an XML-based markup language used to define images. What HTML is to text, SVG is to images.

SVG is very flexible. It can be implemented as a standalone image and used as the src of an image or as a background image in CSS such as a PNG, GIF, or JPG. It can also be embedded directly into an HTML page and manipulated with CSS or JavaScript to create animations, visualizations, and interactive charts.

So, if SVG is that important and can do so much, why isn't it even more widely used? Why does it feel like we're only scratching the surface of what's possible with it? Why does it still feel like a newthing? 

The problem is, not everyone knows everything that SVG is capable of and not everyone who knows what it's capable of is able to implement SVG solutions in an optimal manner. This book aims to help everyone interested in using SVG to get over those hurdles and master this vital technology.

SVG has had a circuitous route to its place in the pantheon of modern web development technologies. Released in 1999 (it's older than XHTML), SVG languished for a decade because of lack of support in the then dominant Internet Explorer browsers. The technology started to gain favor several years ago with JavaScript libraries, such as Raphaël, which added programmatic fallback support for older versions of IE and the trend has only grown stronger since. Thankfully, the tide has fully turned. All modern versions of Internet Explorer and Edge have support for SVG and there's strong support for the technology from all browser manufacturers, including, of course, Chrome and Firefox.

By the end of this chapter, you will understand the basics of SVG in its many guises. You will be able to take existing SVG images and use them in web pages and CSS with confidence and you'll be well on your way to the promised land of SVG mastery.

This chapter will cover the following topics:

  • An introduction to fundamental SVG grammar and vector graphics in general
  • The whys and hows of using SVG as thesrc file of an image
  • Basic usage of SVG as a CSS background image
  • The benefits and differences of using SVG embedded directly in a document
  • A brief introduction to Modernizr and feature detection