D3 for the Impatient

Appendix B. An SVG Survival Kit

Introduction

The Scalable Vector Graphics (SVG) format is a vector image format for creating two-dimensional graphics, with support for interactivity and animation. SVG files are XML-based text files that can be manually edited and (at least in principle) searched. SVG produces a DOM tree (not a “flat,” canvas-like image).

SVG images can be standalone documents (which is rare), or included in a web page. Contemporary browsers can handle <svg>...</svg> elements included in HTML documents. SVG files can also be included like other images: <img src="file.svg" />. In this case, it is mandatory that the SVG file declares the appropriate namespaces:

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:svg="http://www.w3.org/2000/svg">

A W3C SVG Working Group was formed in 1998, a first standard (SVG 1.0) was released in 2001. Work is in progress for an all-new version (SVG 2) that will integrate SVG with HTML5. A draft standard for SVG 2 became a W3C Candidate Recommendation in 2016.

General Overview

SVG defines a number of renderable graphics elements, such as basic shapes, text elements, and lines and curves. The appearance of such elements can be controlled through presentational attributes, which control size, position, color, and so on.

SVG further defines several structural elements that are used to organize the information within an SVG document. Using structural elements, it is possible to group other elements together into complex units, which ...