SVG Icons

Scalable Vector Graphics (SVG)

I am a big fan of SVG. SVG is a language for creating vector graphics. The language looks a lot like HTML because SVG is a variant of XML; HTML is also a variant of XML. I like the language because it lets me create small graphics like icons and even logos without using a graphics program. I can just write the code for the vectors.

Example

For example, this graphic is the icon for the project home page. The code for this icon looks like this:

<svg height="24" width="24" xmlns="http://www.w3.org/2000/svg">
  <rect x='0' y='0' width='24' height='24' fill='darkgreen' />
  <polygon points='12 4 20 12 20 20 14 20 14 14 10 14 10 20 4 20 4 12' 
    fill='white' />
<svg>

You can see that the icon contains a dark green rectangle with a white polygon inside. The white polygon is specified by 18 numbers, which are actually 9 coordinate (x,y) pairs. If you look at the little house symbol, you'll see that it has 9 corners.

Compatibility

The rounded corners on the icon are produced by CSS. They are not in the SVG code, but they could have been. Being able to do this in CSS means that the SVG code can be smaller, and the result is more consistent because the CSS can, in one statement, control the rounded corners of all the icons at once.

But this ability to style SVG images with CSS comes at a price. All browsers do not consistently render these SVG images. In particular, there is a problem where Internet Explorer will not properly render SVG images if you use CSS to scale them larger or smaller. This is unfortunate, because, as the name itself suggests, SVG images are supposed to be scalable. If you have a problem with any of the graphics on this site, please try using Safari, Firefox, or Chrome.