John Chamberlain
Developer Diary
 Developer Diary – You Heard It Here First – Sunday, 6 March 2022
Use SVG to Create Scalable Graphics
An underutilized format that is worth learning more about is Scalable Vector Graphics. With SVG you can describe and position geometry, text and images on page with a relatively small file. Since all SVG objects are scalable, it is easy to make all or part of your drawing bigger or smaller. This is great for the web where screen size is unpredictable and users need to shrink or magnify things. I just used SVG to publish my candidate brochure on my web site. I just created a Word file, saved it as SVG, and then embedded the link to the SVG in my website. It was sized perfectly, first time, with no adjustment. Other formats like HTML or PDF would have had all kinds of hassles and would not be scalable. If you are doing graphics, or even just plain web publishing, SVG is a great tool for fast results with small file sizes.

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.

return to John Chamberlain's home · diary index

Developer Diary · about · info@johnchamberlain.com · bio · Revised Sunday, 6 March 2022 · Pure Content