Publishing Visio drawings as SVG

Anatoly Mironov

svg-004 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:

  1. Show Visio diagrams as pdf files on SharePoint Pages
  2. Embed Visio diagrams as html image maps - Read more in my previous blog post
  3. Embed Visio diagrams as svg pictures - This blog post.
  4. Link to Visio files that are opened using Visio Web Viewer in a new browser tab.

SVG

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.

Visio

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:

  1. It is scalable (not pixelish) - you can show it in a small screen, and a big screen.
  2. Only markup is needed (xml), no need for uploading images
  3. No additional bandwidth is required for downloading images to the browser
  4. No need for updating html structure, easier to explain how to do it.

There are also some disanvantages:

  1. Complex SVG files increase the DOM complexity and it may affect the performance in browser
  2. No support for older browsers: In IE8 it won’t work

svg-000

How to

Use your drawing of choice: svg-001 Save it as an SVG file: svg-002 Add a Script Editor Web Part to a page and paste the content of the svg file (open it in a text editor): svg-003 That’s it: svg-005

Summary

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.

comments from wordpress

Miles Goodchild — 2019-09-05

Is there any way to not have “circle” come up when you hover over the shape but something else that you put in to describe the link? TIA

Anatoly Mironov — 2021-02-01

Thanks!

Jake R S — 2021-02-05

You can edit the object name under the Diagram Navigation