SVG

What is it?

It’s a variant of XML (eXtensible Markup Language), which is like human readable binary. It describes images geometrically.

This is to be contrasted with Raster Graphics.

Wait, whut?

Most, if not all modern graphics are raster graphics. The images we see are all like a painting made on a giant piece of graph paper–here’s a black square, a yellow square, etc.

Raster graphics don’t scale at all well, the new batch of HiDPI screens make the olden low-dpi images look fuzzy.

Ye Olden Tyme Graphics

Remember the old Asteroids arcade game?

Could give sharp graphics before more modern technologies came to eat its lunch

But still, what is SVG?

I’ll show you some examples. Let’s open up some of the following files in a source view.

Hand made

I had to make a quick and dirty layout diagram for a project I worked on, this is the result:

• truck-double.svg
• truck-full.svg
• Pythagorean Theorem Demo

CSS styling can be used on the elements. Javascript can also interact with the pieces.

Made by a program

• bg-eye.svg From a site that Zeek worked on recently (http://beautycon.com)
• drawing.svg

Tools

• SVG Optimizer

Optimized

• bg-eye.min.svg
• drawing_optimized.svg

Reading List

• CSS-Tricks Chris Coyier is on a mission to get SVG used more widely
• Demosthenes Dudley Storey’s reading list on how to work with SVG to replace things that Flash once did, and how to get Adobe Illustrator to produce efficient output
• SVGeneration SVG backgrounds that can be used in CSS