Issue 6 of Web Design Readings — SVG and Canvas

Hi there,

The essay “State of Animation 2014” from Smashing Magazine is no doubt the hot topic this week. All my subscribed newsletters mentioned it. I happened to talk about the Canvas and SVG in this week’s newsletter.

SVG, vector graphics on the web

The pocket guide to writing SVG provides a quick getting started guide on putting your vector graphics on the web. Displaying SVG is just the first step, animating the graphics is what truly matters.

Adobe created a library called Snap.svg which makes drawing and animating with SVG easier.

Snap.svg is described as being to SVG what jQuery is to HTML, and it makes dealing with SVGs and its quirks a lot easier.

Vivus is another library that animates the SVG like drawing lines. It’s a good tool for drawing line-art icons in your website.

Smashing Magazine published a 5-page-long essay on “Styling And Animating SVGs With CSS”. Also make sure to check the experiments CSS-tricks did in the essay “SVG Animation and CSS Transforms: A Complicated Love Story”.

Icon fonts vs. SVG

One practical SVG usage is to replace icon fonts with inline SVG. CSS-Tricks had a comparison on the benefits between using icon fonts and SVG.

It all comes down to browser support. If you can go IE 9+ / Android 3+, inline SVG is better at pretty much everything than icon fonts.

Net magazine — which is my favorite magazine — also discussed which is the best option between icon fonts and SVG in the issue 256.

Icon fonts work well when using a large number of icons with basic styling requirements. SVG allows for more versatility, but typically adds more overhead and requires fallbacks for older browsers.

Canvas, the dynamic image tag

The canvas tag shines when drawing dynamic bitmap graphics and animation. Canvas is popular for making HTML5 games, which I published 2 books and 1 video course. Besides the games, canvas has a useful role in making web apps and interactive websites.

In 2010, Google published a web-based ebook with flipping effects. HTML5Rocks presented how to archive a similar effect in the tutorial “Case Study: Page Flip Effect from 20thingsilearned.com

Another post from HTML5Rocks showed an example of using canvas as an image editor and drawing board.

I’m writing a book named Practical CreateJS to show how canvas can be integrated into the workflow of web app development. The book is still in the very early stage and it is free for the first 40 readers.

Shall we use SVG or Canvas?

In my opinions, SVG and Canvas are not mutually exclusive. SVG is for vector drawing and Canvas is for bitmap. For graphics that act as animated image tags, canvas works better. For displaying vector graphics, SVG is the go-to technology.


P.S. I had several classes in Weekend, so this is actually my most busy time during the week. I’m trying to shift this newsletter from weekend distribution to Wednesday. Let’s see if this works better. Your feedbacks are always appreciated.

If you are new to my newsletter, you can find my past issues in the archive.

Best Regards,
Thomas Seng Hin Mak