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/
Had a quick poke around at the javascript. Found some browser specific stuff in frameset.js within the sub-directory created for XAML pages.
This doesn’t recognise Chrome at all (some specifics for Firefox for example). Showing its age.
It also appears to run foul of some security restrictions in that the browser has to read a file data.xml in the same directory. Chrome (and indeed other browsers) require various hacks to do this. For example you need to run chrome with flag –allow-file-access-from-files and possibly even the flag –disable-web-security – this doesn’t exactly raise confidence!!
Good points … I’ll pass them on to the Visio development team
Another comment on the XAML vs VML formats – they handle multiple URL links differently.
in VML, if you have multiple links, then when you click on a shape you are prompted with a (dynamic) menu prompting you to be specific. In XAML this does not happen (certainly in IE10 and IIRC in IE9 as well) – you just get the “default” URL (which is the first one).
So basically XAML is broken in this instance…
Be great if Microsoft got their act together and sorted this out a little…
I have previously reported this to Microsoft … I hope they have paid attention too!
For some reason I am unable to see multiple links in either VML or XAML.. It seems pretty straightforward from everything I’ve seen online, but I can’t make it work.. Is there anything I’m missing?
It is now straightforward if you are using the Visio Web Access control in a SharePoint web page … not straightforward in SaveAsWeb.
The Microsoft Visio Viewer control gives you access to multiple hyperlinks.
Hello Experts,
I’m no IT professional.
I create Visio 2010 process models (Product development process) and publish it to webside (Client Intranet). The client company uses IE10 an everything is represented well (graphic, links and the table representing the shapes datasets in the left area.
At my personal computer I’m using firefox and I cannot find a solution to get the representation of the shape data.
If I change to my IE11, there is also wrong representation similar to your crome picture, without shape data
could you give me a instruction to solve the Problem ?
Herbert
Visio 2013 has now been patched to provide the Pan & Zoom; Details and Search panels on the left side in IE11, if you output as XAML format.
I am currently trying to get my Hyper-V with Visio 2010 on it working so that I can test that.
Hello David,
I’ve come to a problem when saving my Visio Document as a Webpage. My boss requested a .html document with hyperlinks and some stuff, but he doesn’t want to use Silverlight. So I’ve just figured to go with VML as output, but here is the thing: Once I save it as web page, my hyperlinks seem to migrate from the shape itself to the borders of the same. How does this come? Do you maybe got some hints what I could’ve done wrong or what has gone wrong?
As additional information, I’m using Visio 2010 and IE9.
Thanks in advance
Luca
If he doesn’t want Silverlight, he probably wants it to be viewed in multiple browser types. VML is only supported by pre-IE 11. I need to update this article to test latest SP to Visio 2010, and Visio 2013.
I am using VML web export in IE11 just fine. I only had to edit the zoom.htm file to handle the pan&zoom drag box correctly. Using Visio 2010 and Visio 2013, IE8 and IE11.
@Martijn Verrijdt: “I only had to edit the zoom.htm file to handle the pan&zoom drag box correctly” – Any chance you could share the changes you made? I had a quick look, but I’m no expert on this stuff and couldn’t work it out. Thanks in advance 🙂
@Sean C: I’ve mailed you my solution.
I export to multiple output formats, such as VML, XAML, SVG and PDF, to serve different browsers. Users can switch format from a modified widgets toolbar.
Therefore, I made the zoom.htm file to auto-detect the format plus browser and handle it correctly, using the necessary fixes.
I guess it is a bit much to publish the solution to this blog as a comment, and I should clean it before sharing on a website.
If you do blog your solution, then please send a link in here too?
Thank you for this article ……… it’s helped me !!
Hello
I am wondering if you could give me a hint why I do not have active hyperlinks in my Visio drawing which I export to HTML.
I use VML Output format and it creates all the HTML files but when I move over the boxes in the drawing there is no hover effect nor a active hyperlink.
I am working with MS IE 9.
I realised that Visio is not creating the map data in one of the HTML file:
MAP NAME=”visImageMap”>
Do you hava an idea?
Thanks
Michael
Michael,
Does the following article from my friend John Goldsmith help ? : http://visualsignals.typepad.co.uk/vislog/2012/09/visio-vml-and-ie10.html#more
Hi David, Did anyone ever notice that the current pagename is not replaced in SVG and XAML. It is “VBackground 1” instead of “Page-1”. Any idea how we can solve this? BR Christian
I forgot to say that I have already pointed this out to Microsoft. The workaround is to have shapes on the foreground page that display the PageName()