Publishing Visio drawings as SVG
In my post yesterday I showed how to publish Visio files as html image maps. That was one of the alternatives. Today I’ll present how to use SVG to achieve the same goal: publish Visio diagrams in SharePoint without having the Enterprise license. There are some alternatives:
- Show Visio diagrams as pdf files on SharePoint Pages
- Embed Visio diagrams as html image maps – Read more in my previous blog post
- Embed Visio diagrams as svg pictures – This blog post.
- Link to Visio files that are opened using Visio Web Viewer in a new browser tab.
SVG stands for scalable vector graphic, it is a xml-based format for defining images. It is supported in all modern browsers. Because SVG can be part of a page markup, it can be easily embedded into SharePoint.
In Visio you can save a drawing as SVG. Thanks to my smart colleague: Dan Saeden. So the process of exporting and embedding a drawing is almost the same as for an image map. An improvement is that you don’t have to update the html markup and you don’t need to upload or base64-encode any pictures. It’s all in the markup (DOM). See some screenshots below.
Advantages and Disanvantages
Compared to image maps and other methods, we get following advantages:
- It is scalable (not pixelish) – you can show it in a small screen, and a big screen.
- Only markup is needed (xml), no need for uploading images
- No additional bandwidth is required for downloading images to the browser
- No need for updating html structure, easier to explain how to do it.
There are also some disanvantages:
- Complex SVG files increase the DOM complexity and it may affect the performance in browser
- No support for older browsers: In IE8 it won’t work
Use your drawing of choice:
Save it as an SVG file:
Add a Script Editor Web Part to a page and paste the content of the svg file (open it in a text editor):
Visio files can be exported to many different formats. SVG is a great modern html standard for graphics that acts as a part of the DOM. It still requires a manual process of exporting and putting it on a SharePoint page, but it is a good way to make it modern, fast and even responsive (with some additional css). Editors don’t need to adjust the markup, only copy it.