Slide over to the O'Reilly Radar blog to check out The Once and Future SVG, a post I put together (with input from David Eisenberg) about the history and future of SVG on the web, with some fun before-and-after examples web graphics.


SVG got an indirect boost in 2010, when Steve Jobs announced that Apple would never support Flash player on iOS devices. Also in 2010, Google started taking advantage of the machine-readable text in SVG files, including them in search data. By 2011, when Internet Explorer 9 was released, the latest versions of all major desktop browsers could support the core features of SVG as embedded objects or as inline SVG code, plunked straight into an HTML5 document.

This spurt of SVG support came with plenty of growing pains. The browsers are still working on implementing some of the more complex aspects of the original specifications. Features that were standard when the Adobe SVG viewer was the only game in town, like animations and custom fonts, are now compatibility minefields. At the same time, inline SVG opens up new uses, like small inline icons, that weren’t considered 12 years ago.

What inspired this historical reflection? Why, the publication of the second edition of SVG Essentials, which I helped David update from his original 2002 edition.

Cover image from SVG Essentials, 2nd Edition

I've only been seriously working with SVG for about a year myself, so how did I end up with my name on the cover of an update of the definitive SVG guide book? Early last May, I received the following email from an editor at O'Reilly Media:

Tech review for David Eisenberg's SVG Essentials, 2e?

Hi Amelia,

I hope you don't mind the cold email. My name is Meg Blanchette and I'm working with David on the newest edition of SVG Essentials. It's ready for tech review, and he was impressed with your work on Codepen.

Are you interested in reviewing?

I was indeed. As I said in my reply to Meg, I'm glad to know [this book] exists—much has changed in SVG in ten years, and I've yet to find a good reference on using SVG in web browsers.

I was perhaps a little too eager—given the flat fee tech reviewer contract—to make this the. best. SVG book. available. I didn't just point out errors, I pointed out any section that I felt could use a more effective explanation, often writing full paragraphs of alternate text. And then at the end of it all, I suggested a couple areas that weren't covered in the book that I thought should be. When David started going through my comments, he turned around with a counter-offer: credit as a co-author of the book. How could I say no?

Once that was decided, I figured I should take responsibility for the new content I had suggested should be added. The result was a chapter on how to get an SVG graphic into a webpage (as an HTML image, CSS image, object, or inline code) and two expanded and updated chapters on scripting and the SVG DOM.

All of which was written on a somewhat rushed schedule, since the book was already at final review stage when I got involved.

I'm delighted to see SVG Essentials published, but I'm not done yet. I've recently signed an agreement with O'Reilly to take over work on a separate SVG-related book, which will focus more on how SVG compares to (and interacts with) CSS3 styling in an HTML5 webpage. And there's talk of future web design publications when this one is complete.

But none of this would have happened if CodePen hadn't provided a forum for me to write about SVG (and SVG bugs) somewhere other people would be likely to read it. Thanks are therefore due to Tim, Alex and Chris for establishing this great community, and to everyone who is a part of that community for helping it thrive.

I promise, as soon as I get my first real royalty cheque, $75 will go to a CodePen Pro subscription.