SVG Mechanics and Mysteries

Why an entire section on Scalable Vector Graphics, or SVG? Like a lot of people, I never really dug deeply into SVG itself. I might use an SVG file as the source for an image tag from time to time, but the idea of authoring them myself seemed like a hassle. If I needed to do so, there were libraries like D3 that would abstract away the details. And since (unlike a lot of newsroom devs) I didn't really care for D3, I never ended up with even the incidental contact that would have entailed. Support on mobile was not particularly good for a long time, which gave me another easy out.

In the last year or so, however, I've really come around on SVG. As a standard part of the HTML5 parser, it's well-supported across the browser landscape. It's relatively tiny, compared to raster formats like JPG or PNG, and also much more accessible. As a DOM-based renderer, you can easily add event triggers and update parts of the image, at the cost of some raw performance compared to canvas.

Most importantly, it has the tremendous advantage of easy interoperation with the rest of the newsroom's graphics department. With a little forethought, the same assets that a designer prepares in Illustrator for print can be used to create beautiful digital experiences. That efficiency is good for them, good for you, and ultimately good for traditional newsrooms undergoing the painful transition toward digital-only publishing.