SVG – Basic Choices

So, where to start with SVG? It’s a fantastic tool, which I think is quite underused at the moment. It allows simple implementation of vector graphics in web pages. In fact, it’s possible to build a webpage entirely from SVG. You can make it scale perfectly to any screen size, and it will work on pretty much all modern browsers, including the mobile ones. Internet Explorer 8 and below are the only exceptions – nothing’s perfect! If you can see the orange circle below, then your browser is SVG compatible.

There are a couple of problems with building a 100% SVG webpage. The first is that the way it displays text is not particularly conducive to a website with multi-line prose – so every website really. SVG doesn’t do text wrapping. However, there are ways around this by embedding HTML in the SVG (which is already embedded in HTML!). More on that in a later post.

The other issue is that I’m not sure how well search engines respond to SVG. I’ll be looking into that as I write posts for the blog.

On to the choices. The rest of this post is going to demonstrate a few different approaches to writing in SVG, starting with simply embedding hard-coded SVG straight into HTML. The circle above was created in this way, using the code below. By the way, each of the images is just a simple HTML page in an iframe, so you if you want to see all the source just right-click the image and do what you have to.

<body>
  <svg height="120px" width="120px">
    <circle cx="60" cy="60" r="50" fill="orange" stroke="black" stroke-width="5">
  </svg>
</body>

But what if you want to do something a bit more exciting – user interaction and dynamic manipulation of your SVG elements? Well there are a few options, all of which use Javascript to get things moving. To the left, I’ve embedded two similar looking circles. However, one was rendered by a plugin called jQuery SVG, and the other by Raphael. If you right-click the iframe you should be able to bring up the source for comparison. I don’t have a lot of experience with Raphael yet, but my gut feeling is that it’s trying to do too much for me. It creates a lot of element attributes which I didn’t ask for, while jQuery SVG keeps things very clean. That said, Raphael has some really amazing built in functions, particular in the animation area. A third option is D3, which was built for manipulation and display of data within webpages. I’ll add some more on that in a later post.

Posted in SVG

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>