Using Adobe Illustrator to mark SVG elements for JavaScript targeting

Lately I've been working with complex SVG files, linking JavaScript interaction to various elements within the SVG markup. 
Its not an easy task to locate elements within the markup. Luckily, Adobe Illustrator comes to the rescue: 

1. Within Illustrator, its very easy to use the direct selection tool to select the required element. It is automatically marked in the Layers window.
2. Give the layer a name. This name later becomes the element ID in the SVG markup.
3. Be carefull not to use the same names for multiple layers. While Illustrator doesn't really care, your HTML / JavaScript are much less forgiving...
4. Use the "Save Aa" command to save your file as SVG.
5. If you open your SVG in a text editor - you will notice that layer names are now element IDs within your SVG markup.

All you need to do now is select your element by its ID in order to assign a JavaScript interaction to it.
In this example, I wanted the sun in the picture to be clickable so I gave its layer the name "sun".
After exporting to SVG, all that remain is:

document.getElementById("sun").onclick = function(){
   alert("You clicked the sun!");
};

Give it a try - click the sun:

Angular JS: Manipulating SVG images

While playing around with SVG files, it seems only natural to bind them to an Angular JS controller and see what happens...

The Code:

HTML:
Controller:

SVG Coloring Page

I've been playing around with SVGs lately and was amazed at how easy it is to create a simple
coloring page that runs on almost any browser and device. No Canvas or HTML5 API.

Check it out:



The code is very simple:
I use jQuery to select all SVG elements that have a "fill" style and change the fill color upon click.
You can right-click and select "view frame source" to see the code - I'm sure you will find it simple to understand.