Draw Pictures With Code

(and make them move)

Tutorials and resources for working with Scalable Vector Graphics

On this site you can learn to make delicious images and animations, using SVG and its good buddy CSS.

The words 'DRAW WITH CODE' (formed by simple overlapping squares, circles and rectangles) are animated onto and then off the screen
Draw with Code The words 'DRAW WITH CODE' (formed by simple overlapping squares, circles and rectangles) are animated onto and then off the screen image/svg+xml Draw with Code Sam Muirhead

These two animations... they look the same, right?
At first glance, sure. But there’s few key differences: on the left is a GIF, and on the right, an SVG.

When you get closer in, the difference is very clear:

cropped gif showing pixelization cropped svg showing perfect crispness

The GIF has jagged, blurry edges, with weird lines of inaccurate color. We can start to see the individual pixels that make up the image. The SVG, however, is just as sharp at this zoom level as it is at any other.
That’s because the GIF is just an image, a collection of pixels. If you want more detail in order to zoom in, you’ll need a GIF with more pixels. But the SVG is not made up of pixels, it’s made up of code. It’s a recipe for an image, which is cooked up by the browser or your image viewer, whenever you want to look at it.

One (invisible) difference that you might care about, especially if mobile data is expensive where you are, is the file size of these formats. The GIF weighs in at 2/3 of a megabyte. The SVG is almost 100 times lighter, a mere 7 kilobytes. It can easily be ‘optimized’ to half of that size, but I prefer to optimize for human readability rather than just file size.

What do I mean by readability? Both formats are readable, it says ‘Draw With Code’, doesn’t it?
Sure, you can read the words in the image, but with an SVG you can also read the code. That means you can also change the code. If you're on a modern desktop browser, you don't even need any extra tools to do so - you can Inspect any element on a web page and play around with it. You can do it right now if you like.
If I right-click on the SVG and choose Inspect Element, it opens up Firefox Dev Tools, where I can read the code and make changes:

screenshot of the SVG being inspected in Firefox Dev Tools, revealing its source code
Inspecting the code of the SVG in Firefox Dev Tools
screenshot of the SVG in Firefox Dev Tools, with its red colors changed to yellow
Changing colors of the SVG in Firefox Dev Tools

Want to learn more about SVG and create your own images and animations?