Creating Interactive SVGs in Sharepoint 2013

Background

Currently I am working on a documentation platform in Sharepoint 2013 for our project: we install and set up an ion storage ring which has been in use at another institute before. This machine consists of numerous parts/components, so it would be desirable to use these physical objects as navigable objects on a computer screen. My idea was to create SVGs to incorporate graphics and navigable elements on a web page.

Starting Point

As starting point I created an SVG using Inkscape (well first of all I created the image representation of my machine components). This SVG consisted of the image plus some transparent rectangles over the objects I wanted to make clickable. Here the Image of my SVG with clickable zones highlighted for illustration:

How to get this into Sharepoint?

To make things short, I did not manage to get this graphic into my Sharepoint webpage with the following methods:

• The image web part embedded the SVG only as static image, no interactivity
• Scripting in Script Editor web part did not work for <iframe>, <embed>, <object>. <iframe> offered the option to open the file in a new tab or download the file.

Finally I managed to display the SVG properly with all functionality by:

1. Opening the SVG in a text editor (I use Notepad++)
2. Copy and paste the content of the SVG in text editor to the Script Editor web part
3. Delete anything irrelevant in the SVG code (like references to inkscape)
4. tweak the SVG by adjusting the code in the Script Editor(e.g. linking, etc.)
5. live happily ever after

Note: One can work with the "embed" image in Inkscape and copy as well the content of the bitmap  into the Script Editor. However, it is more elegant to use the "link" option in Inkscape, upload the image to Sharepoint and to change the link in the original SVG to the one to the image in Sharepoint.


I hope this helps in your own geek project, good luck
WolfiG