Unfortunately, SVG is underutilized because a lot of people simply don't know what it is. A good example of failure to use SVG is Google Maps--the mapping system you see when you do a Google search for a place. Google Maps uses a mosaic of static images to create their maps and they have in incredibly complex Javascript library that assembles and renders these squares in the browser. All of this total overkill, bloated and time consuming both for your computer to download and render. If Google had used SVG instead, their pages would be much smaller and faster. Ever notice how there is a delay when you zoom in or out on a Google Map? That would not happen if they used SVG. If they had used SVG, zooming would be instantaneous. There are millions of web sites that make heavy use of graphics which would be far better off if they used SVG instead of images and CSS. C'est la vie!

A Simple Example of SVG

Below I have shown a simple example of an SVG animation. This example uses the built-in automated animation capability of SVG. You can also move graphis around dynamically using Javascript. The code for this example is as follows:

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
	width="250" height="150">
    <rect x="40" y="40" height="80" width="110"
         style="stroke:#ff0000; fill: #0000ff">
        <animateTransform
            attributeName="transform"
            begin="0s"
            dur="20s"
            type="rotate"
            from="0 80 80"
            to="360 80 80"
            repeatCount="indefinite"
        />
    </rect>
</svg>

If you do a web search, you can find plenty of examples of pure SVG animations to get you started with ideas. Also, you can just save a file out of Word, like I did, to create SVG with one button press. You can also use drawing applications like Inkscape or Illustrator to create SVG. Inkscape works both in Windows and Linux.