Add functionality to a simple embedded, interactive .SVG map with tutorial

I have a SharePoint site which I want to host a world map on. The map will have certain countries color filled, and on mouseover/hover/onclick a pop-up box will appear that has various lines of text held within, and on mouseout/click out the call-out disappears. The built in Sharepoint 2013 event call-out box will work fine, but if you have other, more attractive designs, that would work as well. I also need a step by step tutorial written that can be followed so that in the future, other countries can be color coded, and have the call-out event with embedded text displayed per country. I know JVectorMap and Raphael are options, however I only need: -a tutorial on how to embed an .svg on SharePoint (i.e. call a hosted script, embed via html, or embed via script editor webpart) -how to identify the path id's of the .svg to color fill individual countries -how to code the call-out box event per individual country -how to fill the event with text -this tutorial will walk through the code used and how to replicate it for other countries, and how to properly embed and call the required image/code from my SharePoint Intranet onto a SharePoint page. If you think a step by step JVectorMap or Raphael tutorial would be easier, that will work too. But I need the tutorial step by step with what code to use so that it can be followed by future users who will update the map. If you can find a map that has Europe slightly enlarged for better navigation, or if you can code in some zoom functionality that would be beneficial, though not necessary. I have attached an example map, some countries color coded, and an example of what the SharePoint Call-out box looks like, though the code for it can be found in various places online. Thank you, Steven