SVG Images Made Easy

Programmer

Well, at least made easier. IMHO, svgs are not easy to understand. svg is a type of image for websites. svg stands for scalable vector graphics, whatever that means.

The important part is that you can manipulate these images in real time. This can also be difficult – it was for me for a long time. It’s possible to alter other types of images in real time. However, svg is what most people use. Canvas is an alternative to svg. But in my opinion, it’s not any easier to understand.

The simplest way to put an svg image on your website is to reference it with the img html tag. But that doesn’t allow you to manipulate it. If instead, you copy the svg image into your html page and make it inline svg, you can manipulate it. Keep reading and I’ll explain how that can be done fairly easily.


An svg image is a text file of commands to draw the image. You can open it with a text editor like Notepad++. This file looks similar to html. It starts with <svg> and ends with </svg>. Actually there may be some code before <svg>. To place your svg image inline, decide where you want it in your html and pasted everything from <svg> to </svg>. Do not include anything before <svg> (or after </svg>). It is not needed or even wanted in some cases in the inline version.

Now that you’ve pasted in those several lines of svg code, save your html file and open it in a browser. Voila, there’s your svg image on the screen. Hint: I find that it helps me immensely if I put comments around the svg. I put <!--SVG--> before the svg and <!--End SVG--> after it.

Now, to the fun part – manipulating the image.


I wanted to take a map of the USA and color each state based on certain criteria. OK, so I wanted to color each state depending on who won during a presidential election. I did this a couple of election cycles ago. It was hard work. Each time, I changed the svg file manually, then I opened it in my picture editor. I made a screen copy and saved that as a png image. Then I referenced that on an img tag in my html page.

Recently, I thought that perhaps I might want to be able to do the same sort of thing at some point in the future. So, I wrote some javascript to simplify that process. I’ve placed that javascript in xg_graph.js and uploaded it to the internet. I tried to make it as simple as possible, so that you don’t need to know much about coding.

You can read about the details of how to use that code at Really Useful Javascript Graphs. I’ll discuss the basics here.

I used the USA svg map from Wikimedia. The particular svg map I used is free to use, no attribution needed. Some svgs are free to use, but require three attributions, plus a brand logo. I think three attributions is asking a little much. But then again, I don’t need that particular svg image yet. Others svg are not free.

You can create your own svg, maybe, using Inkscape or Adobe Illustrator or maybe something else. I can’t draw, so that’s out. And probably the svg will be easier to manipulate if you use one that somebody else has created and gone to the trouble of identifying separate parts of the image.


An svg file consists of the svg or multiple nested svg. Within an svg, you can have a group (g) tag. This groups elements together. If you don’t have <g>…</g> tags, you will probably want to add them, at least one set. Just place <g> at the top at the end of <svg…> and </g> at the bottom before </svg> if you don’t know where to put them. Some of my javascript routines rely on the group tag. There are also shape tags – path, circle, eclipse, line, polyline, polygon, and rect (for rectangle). And that’s pretty much all you need to worry about: svg tag, group tag, and shape tags.


<path class="co" …><title>Colorado</title></path> is the shape for Colorado (CO). It’s identified by both the title and the class. Luckily, the shapes were identified, so that I didn’t have to figure that out.

However, my routines rely on tags being identified by ids. The Wikimedia file doesn’t have ids. But that’s easily resolved. I just add ids to the svg, group, and paths. In this case, I modified the Colorado path to be <path id="svg_co" class="co" …><title>Colorado</title></path>.

Now that my tags have id’s, I can call my xg_svg_modify routine to modify any attribute – class, bgcolor (background color), transparency, title, or text. Text can get complicated, so I manipulate title instead.

You can also modify the size of the svg. And that’s mainly what I use this routine for. It’s more complicated to change the size of an svg than just altering the width and height attributes. It took me a day or two to understand what people on the web were trying to tell me. And even then, I didn’t want to do it manually. So, a routine.


Back to politics. When I find out who won, I can call my x_who_won routine to assign the correct background color to a state shape. Yes, that’s easy enough to do manually when only two people are in the race. But what about a presidential primary when there are 16? And what about election night at 2am, when you’re waiting for the results to come in and you’re way too tired to think straight. When you find out the correct color, you can call xg_svg_modify to update it.


That’s great! But, I want to work with the svg as a whole, rather than one shape at a time. First I need to know the attributes of each shape. So, I call xg_svg_group_init. This gathers the attributes of all shapes in a group. It gathers those attributes into arrays. Arrays can be difficult to work with in javascript. But they were necessary in this case. And, I tried to keep them simple.

You will need to know the index of the array for a certain shape in order to update its attributes: co_index=xg_svg_shape_id_array.indexOf('svg_co'). This returns the index for the Colorado shape in the array. co_bgcolor=xg_svg_shape_bgcolor_array[co_index] returns the background color for Colorado. To update the background color to blue, xg_svg_shape_bgcolor_array_update[co_index]='blue'. You may also want to update the titles by appending the scores. xg_svg_shape_title_array_update[co_index]='CO 55 45'. Then call xg_svg_shapes_update to update the svg.


Maybe you’re not interested in politics. Maybe you just want to randomly color each state. My routine x_color_random_array_init creates the array x_color_random_array. After calling x_color_random_array_init, call xg_svg_shapes_update_bgcolors(x_color_random_array). Then call xg_svg_shapes_update to update the svg.