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>