SVG Based Code Map

[Rob Bedeaux]

In another post, I mentioned that you can use SVG images in the code element. This is a great way to create an interactive element that has multiple embedded links. If you feel like tinkering in the internals of an SVG file you can since it is text-based. However, I prefer to make my life easier and use Illustrator.

Here is a quick tutorial on making a US Map with clickable links by state.

1. Download a US Map SVG image. You can use this one or there are many others available online.
2. Open the image in Adobe Illustrator.
3. Click on the state you want to add a link.
4. Open the attributes palette [Command-F11]
5. In the palette, you should see an option called 'Image Map.' The default value is set to none.
6. Click on the drop down and select polygon.
7. This will open up a box which allows you to now input a URL
8. Type in your URL including protocol (http:// or https://)
9. Save.
10. Open your SVG file in a text editor. I like TextWrangler and it's free.
11. Copy the code and paste it into the SportsEngine code element.
12. Click on the User/Edit button and see the resulting image map!

You can also make any other edits you need to your SVG like changing the color of a block and adding additional text (see example).

NOTE: the code element is limited to 64,000 characters so make sure your SVG is smaller than that size (you can see this in the bottom corner of the TextWrangler window)

 

Sample US Map.svg.zip