SharePoint 2013 Visio Services provides a great solution for viewing the actual Visio file directly within a SharePoint web page, however you need to be logged into your corporate web to do this. So, how can you view Visio files in a web page if you cannot use Visio Services?
You could build a web page with the Visio Viewer control, but that is ActiveX and will only work in certain controlled conditions. The benchmark has to be allowing the Visio file to be viewed on an iPad, or an Android tablet, or Surface RT. Visio Services in SharePoint 2013 will enable this, and will allow for the Visio document to be zoomed, panned, and the Shape Data and hyperlinks to be viewed and used, but, again, this is not always available.
Firstly, I am making an assumption that providing access to the original Visio file directly is not always desirable, so providing a controlled export to a suitable file format is acceptable, provided that certain features are available. I invariably work with shapes that contain data and hyperlinks, and thus I need the end user to be able to click on a shape to view the data, or to provide access to the hyperlinks. I also need the graphics to be pan and zoomable, and it would be useful if the end user could search the data to identify the shapes they want to see. So, what are the options?
In this article, I compare the output from Visio as web pages in VML, SVG and XAML when viewed in MS IE 10.0.9200, Google Chrome 27.0, Mozilla Firefox 21.0 and Apple Safari 5.1.7.
A Simple Visio Document
I created a two page Visio 2013 document (well, three actually because they both had the same background page), and I put a single shape on each page with the same eight Shape Data rows (one for each data type), and with three hyperlinks on.
I am including some notes on the output to PDF and Xps because I recommend them being available as a download link, if you want your web users to have a printable copy, because printing directly from a browser is less than optimal!
Save as PDF
Built-In PDF
Visio has an option to export or save as a pdf file. This is done using the OpenPDF format, and it created thumbnails and bookmarks for each of the two foreground pages. The first hyperlink is available to follow on the shape.
However, the Adobe Acrobat version does not have bookmarks or hyperlinks … disappointing, but it maybe that Adobe has not caught up with Visio 2013 format yet.
| Built-in PDF | Adobe Acrobat XI |
 |
 |
It is a shame that layers, Shape Data and multiple hyperlinks are not available in either PDF.
Save as XPS
Visio also has the ability to export to XPS quite faithfully with regards to the graphics, but it is a shame that it also does not export the layers, Shape Data, or allow access to multiple hyperlinks per shape.
Save as Web to VML
Viewed in MS Internet Explorer
I have always found the SaveAsWeb feature in Visio compelling when using VML output in Microsoft Internet Explorer, however, now that I have a slight issue now that I am using MSIE 10. The graphics does not display
|
MS IE 10 … oh dear! |
MS IE 10 … after meta tag inserted |
 |
 |
As you can see above, there is an issue when exporting Visio to VML in IE 10 … the graphics disappear … However, my friend John Goldsmith has published a solution at http://visualsignals.typepad.co.uk/vislog/2012/09/visio-vml-and-ie10.html
All that is required is to insert one line into the main html file:
<meta http-equiv=”X-UA-Compatible” content=”IE=7, IE=8″ >
like this:
Then everything magically appears again!
The VML web pages in MS IE do provide the best experience with pan and zoom, search, Shape Data and multiple hyperlinks … but maybe that is because Microsoft wanted it to be the best option.
Viewed in Chrome, Firefox, and Safari
Unfortunately VML is not supported in anything but MS IE, so the graphics are rendered in the fall-back raster format, which was PNG in my case. However note that Firefox displays the widgets, and displays search results, but does not point to the shape like the MS IE display does.
|
Chrome |
Firefox |
Safari |
 |
 |
 |
All of the browsers render the page name correctly.
Save as Web to SVG
The SVG format almost works in MS IE, however, there is no pan and zoom window or multiple hyperlinks support, and the click to display Shape Data does not work, although the data is shown if the search result node is expanded.
The Firefox display is close to the MS IE, except that the search result nodes are not expandable. Chrome displays the SVG graphics, but does not show the widgets for page navigation, search or properties. Safari is the worst because the SVG is not rendered at all, only the fall-back png.
| MS IE | Chrome |
 |
 |
| Firefox | Safari |
 |
 |
Save as Web to XAML
The XAML display n MS IE is almost as good as the VML, except that it does not display the multiple hyperlinks on each shape.
Again, Firefox is almost as good as MS IE, but the result nodes are not expandable, and the Shape Data display does not work on click. Chrome and Safari are as bad as each other, with both of them falling back to the png display.
| MS IE | Chrome |
 |
 |
| Firefox | Safari |
 |
 |
The browsers that do render the XAML fail to render page name correctly.
Conclusion
An examination of the JavaScript that is generated by Visio shows that it is quite old and incomplete. Some of the rendering issues displayed above could be due to poor JavaScript … this is something that I will be exploring.
What is clear is that Visio renders its web export best in MS IE, followed closely by Firefox, then Chrome, and finally Safari. However, the experience in the non-Microsoft browsers is disappointing, but the fault is not those browsers, but out-of-the-box files generated by Visio.
You can view my example outputs at : http://www.visiorules.com/tests/ViewingVisioFiles/