How To Create Simple Shapes With Scalable Vector Graphics (SVG)

Posted: 23 Jul 2012 05:30 AM PDT

The last few weeks we’ve been looking at images in the context of responsive design. First I talked about the techniques for serving different images to different devices. Then we looked at using icon fonts to replace images where possible.

This week I want to consider another potential solution to some of our image issues. I want to offer a brief overview of scalable vector graphics (SVG).

Vector Images vs. Bitmap Images

Images present a challenge in web design that’s often tied to bandwidth. We want the highest quality images, but we also want to keep file size to a minimum. These tend to be mutually exclusive. More of one usually means less of the other.

This isn’t necessarily true of all images, though. It’s specifically related to bitmapped images, where the information for rendering the image is in the individual pixels. Scaling up requires more pixels. Scaling down means having more pixels than you need.

Vector images, on the other hand, store their information in mathematical equations. The equation doesn’t change size as the image scales.

Vector images won’t work everywhere. There’s currently a limit to the information they can store. They can’t be used to represent photographs. They typically work best where colors and more importantly color changes are fewer.

However where they work it makes a lot of sense to use them. Like icon fonts, scalable vector graphics are a potential solution to replace some bitmap images.

Scalable Vector Graphics (SVG)

Scalable vector graphics hold a lot of promise, though in some respects it’s still more promise than reality at the moment.

SVG isn’t supported in IE prior to version 9 and in Android prior to version 3, which is still 90+% of Android devices. Depending on the image and what you want to do with it, there can be performance issues. They’re limited to simpler images instead of photographs.

That said there’s a lot of reasons to use scalable vector images.

They scale
SVG text is copyable text
They’re resolution independent
They typically require smaller files than bitmap images
SVG images are accessible and machine readable (including search engines)
They can interact with javascript and be styles with css
They generally have good browser support
They have reduced http requests

SVG renders shapes using XML style markup. XML? Uggh. Don’t worry there are many javascript libraries to help you create and manipulate shapes.

If you have a graphics editor capable of working with graphics, there’s a good chance it can be used to create SVG images. In fact you shouldn’t have to spend much or any time coding SVG images.

Creating Simple SVG Shapes

While you’d probably use a graphics editor to create SVGs let’s see how we can create simple shapes. Having never done this before myself, it took less than 5 minutes to create a circle, a rectangle, and text inside both on the page.

The first is to create a document with an .svg extension along with a proper declaration and doctype. Here’s how it looks.

1  2  3  4  5  6  7  8  9  10  11

<?xml version="1.0" encoding="UTF-8" standalone="no"?>    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">  < svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800" preserveAspectRatio="xMidYMid meet">    <title>Scalable Vector Graphics (SVG) Demo</title>    <!-- drawing elements here -->  </svg>

Each shape we want to draw has it’s own tag along with attributes for rendering it. To draw a circle you would use the following.

<circle cx="100" cy="100" r="50" stroke="#000" stroke-width="1" fill="#ccc" />

cx and cy are the location of the circles’s center from the top and left and r is the circle’s radius. Stroke, stroke-width, and fill should be self explanatory. Drawing a rectangle is similar.

<rect x="200" y="50" width="250" height="100" rx="5" ry="5"  stroke="#000" stroke-width="1" fill="#ccc" />

Here x and y are coordinates of the top left corner of the shape and rx and ry round the corners. Again the rest should be self-explanatory. Let’s put everything together and add some text.

1  2  3  4  5  6  7  8  9  10  11  12  13  14  15  16  17

<?xml version="1.0" encoding="UTF-8" standalone="no"?>    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800" preserveAspectRatio="xMidYMid meet">    <title>Scalable Vector Graphics (SVG) Demo</title>    <circle cx="100" cy="100" r="50" stroke-width="1" stroke="#000" fill="#ccc" />    <rect x="200" y="50" width="250" height="100" rx="5" ry="5"  stroke="#000" stroke-width="1" fill="#ccc" />    <text x="78" y="100" font-family="helvetica, sans-serif" font-size="16" fill="#000">Circle</text>    <text x="260" y="100" font-family="helvetica, sans-serif" font-size="16" fill="#000">Rounded Rectangle</text>  </svg>

If you’ve been following along, the two text elements should be easy to understand. x and y are the same coordinates as seen above and the other attributes should all be familiar font styles.

Save the code above as an .svg file and load it in browser (other than IE8 and below or Android less than 3). You should see a couple of shapes with text inside. Not particularly exciting, but rather easy to create.

Adding SVG to a Web Page

To use SVG in practice you’ll want to include an .svg document you create in an existing web page. This too is relatively simple. You can add your document inside an object tag.

1  2  3  4  5  6  7

<object type="image/svg+xml"       width="" height=""       data="path-to-svg-file">  </object>

Below I’ve done just that. I’ve used the code above to include this .svg document.

You can also include SVG directly inside a document.

1  2  3  4  5  6  7

<svg height="200" xmlns="http://www.w3.org/2000/svg">    <circle cx="100" cy="100" r="50" stroke-width="1" stroke="#000" fill="#cdc" />    <rect x="200" y="50" width="250" height="100" rx="5" ry="5"  stroke="#000" stroke-width="1" fill="#dcc" />  </svg>

The code above will directly embed a circle and rectangle in a document without the need to embed an .svg file.

Note: While the code above does work to create scalable vector graphics inline in a document, it doesn’t work in WordPress. In fact I needed to use a plugin in order to embed the SVG document above. If you know of a way to use inline SVG inside WordPress, please share.

Beyond Simple Shapes

You aren’t limited to circles and rectangles. You can create several basic shapes.

rectangles (rect)
circles
ellipses
lines
polylines (connected line segments)
polygons

You aren’t limited to shapes either. There’s text as you can see from the code above, as well as, paths and links. You can create fills with color, gradients, and patterns. You can add clipping masks and filter effects and you can even animate your graphics.

If you’d to see where this can go and what you might be able to achieve using SVG, Adobe has put forth a css shaders proposal that’s now a W3c draft. Check out some of the videos Adobe created to demonstrate the possibilities.

Because SVG can interact with the DOM, you can inspect and manipulate SVG elements as you would html elements. Change their shape, color, or position with css and javascript. You can even attach event handlers to SVG images.

Again SVG isn’t a perfect solution, but there’s a lot of potential and you can start using SVG today.

Tools and Libraries

Creating simple shapes is easy as you can see above, however you wouldn’t want to work with more complex graphics through code alone. Fortunately you shouldn’t have to.

If you have an image editor capable of producing vector images, it likely allows import and export of SVG files. Illustrator and Inkscape do. Unfortunately Photoshop doesn’t. SVG-edit is a free online editor for scalable vector graphics if you don’t have any other tools available to you.

In addition to image editors you’ll probably want to make use of javascript libraries for SVG manipulation.

The above libraries exist to help you create data driven documents and manipulate SVG objects, like charts and graphs

Tutorials

With just a little bit of searching I found quite a few tutorials. SVG basics are easy to understand, though I didn’t dig too deep into the more advanced aspects. Here are 3 from Sitepoint that had me up and running a couple of minutes.

The above are part of a series of posts on SVG. Click on some of the links at the top of these posts or check the related posts toward the bottom.

Summary

I’ve only scratched the surface of SVG in this overview, but hopefully it’s enough for you to see the potential. Again support isn’t perfect, but it’s as much if not more than for many other things we use in practice.

Scalable vector graphics won’t replace all bitmap images, but they can replace some less complex ones. Because they scale, they fit with responsive design, and because they can interact with javascript and css, they can be made to do interesting things.

Creating basic SVG shapes is quite easy. You likely have at least one editor capable of creating more complex shapes and there are a number of libraries to help you manipulate the graphics you create.