• Skip to main content
  • Skip to primary sidebar
  • Skip to footer

bVisual

  • Home
  • Services
    • How Visio smartness can help your business
    • Visio visual in Power BI
    • Visio Consulting Services
    • Visio Bureau Services
    • Visio Training and Support Services
  • Products
    • Visio Shape Report Converter
    • SS Plus
    • LayerManager
    • visViewer
    • Metro Icons
    • Rules Tools for Visio
    • The Visio 2010 Sessions App
    • Multi-Language Text for Visio
    • Document Imager for Visio
    • multiSelect for Visio
    • pdSelect for Visio
  • Case Studies
    • Case studies overview
    • Using Visio in Education for GIS
    • Visualizing Construction Project Schedules
    • Visio Online Business Process Mapping
    • Nexans Visio Template
    • CNEE Projects, WorldCom
    • Chase Manhattan Bank
  • News
    • Recent news
    • News archive
  • Resources
    • Articles➡
      • ShapeSheet Functions A-Z
      • Comparing Visio for the Web and Desktop
      • Customising Visio Shapes for the Web App
      • Key differences between the Visio desktop and web apps
      • Using the Visio Data Visualizer in Excel
      • Using Visio in Teams
      • Creating Visio Tabs and Apps for Teams with SharePoint Framework (SPFx)
      • Designing Power Automate Flows with Microsoft Visio
      • Innovative uses of Visio Lists
    • Webcasts ➡
      • Visio in Organizations
      • My session and other Visio sessions at MSIgnite 2019
      • Power up your Visio diagrams
      • Vision up your Visio diagrams
      • The Visio 2010 MVP Sessions
    • Visio Web Learning Resources
    • Books➡
      • Visualize Complex Processes with Microsoft Visio
      • Mastering Data Visualization with Microsoft Visio
      • Microsoft Visio Business Process Diagramming and Validation
      • Visualizing Information with Microsoft Visio
  • Blog
    • Browse blog articles
    • Visio Power BI articles
    • Visio for Web articles
    • A history of messaging and encryption
  • About us
    • About bVisual
    • Testimonials
    • Bio of David Parker
    • Contact Us
    • Website Privacy Policy
    • Website terms and conditions
    • Ariba Network
You are here: Home / Visio / Visio 2013 / Comparison of Visio Save As Web Outputs

Published on June 18, 2013 by David Parker

Comparison of Visio Save As Web Outputs

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.

Visio-Shape

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 PDFAdobe Acrobat XI
PDF-MSPDF-Adobe

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.

XPS

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

VML-MSIE-10VML-MSIE-Edited

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:

VML-HTML

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

VML-Chrome-PNGVML-Firefox-PNGVML-Safari-PNG

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 IEChrome
SVG-MSIESVG-Chrome
FirefoxSafari
SVG-FirefoxSVG-Safari
All of the browsers render the page name incorrectly.

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 IEChrome
XAML-MSIEXAML-Chrome-PNG
FirefoxSafari
XAML-FirefoxXAML-Safari-PNG

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/

Related

Filed Under: Layers, Save As, Visio 2013 Tagged With: Html, Web

About David Parker

David Parker has 25 years' experience of providing data visualization solutions to companies around the globe. He is a Microsoft MVP and Visio expert.

Reader Interactions

Comments

  1. Robert Cowham says

    July 19, 2013 at 5:12 pm

    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!!

    Reply
    • davidjpp says

      July 23, 2013 at 3:29 pm

      Good points … I’ll pass them on to the Visio development team

      Reply
  2. Robert Cowham says

    July 22, 2013 at 11:49 am

    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…

    Reply
    • davidjpp says

      July 23, 2013 at 3:28 pm

      I have previously reported this to Microsoft … I hope they have paid attention too!

      Reply
    • Danielle says

      August 21, 2014 at 9:20 pm

      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?

      Reply
      • davidjpp says

        August 29, 2014 at 4:04 pm

        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.

        Reply
  3. Herbert Leitner says

    April 30, 2014 at 7:36 am

    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

    Reply
    • davidjpp says

      May 6, 2014 at 11:19 am

      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.

      Reply
  4. Luca says

    May 13, 2014 at 8:54 am

    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

    Reply
    • davidjpp says

      May 13, 2014 at 10:08 pm

      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.

      Reply
      • Martijn Verrijdt says

        November 6, 2014 at 1:05 pm

        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.

        Reply
      • Sean C says

        January 15, 2015 at 3:17 am

        @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 🙂

        Reply
      • Martijn Verrijdt says

        February 6, 2015 at 11:54 am

        @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.

        Reply
        • davidjpp says

          February 6, 2015 at 5:15 pm

          If you do blog your solution, then please send a link in here too?

          Reply
  5. Cristian Basáez says

    November 25, 2014 at 7:48 pm

    Thank you for this article ……… it’s helped me !!

    Reply
  6. [email protected] says

    November 17, 2015 at 4:28 pm

    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

    Reply
    • davidjpp says

      November 17, 2015 at 4:37 pm

      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

      Reply
  7. Christian Fillies says

    November 26, 2015 at 11:16 am

    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

    Reply
    • davidjpp says

      July 15, 2016 at 3:50 pm

      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()

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

  • LinkedIn
  • Twitter

Recent Posts

  • Fixing dimensions of 2D shapes
  • Merging Linked Data from Similar Tables
  • Smart Radio Buttons and Check Boxes in Visio
  • Using Button Face Ids in Visio
  • Grid Snapping Revisited

Categories

Tags

Accessibility Add-Ins Connectors Containers Data Export Data Graphics Data Import Data Visualizer Educational Excel GraphDatabase Hyperlinks Icon Sets JavaScript LayerManager Layers Legend Link Data to Shapes Lists MSIgnite MVP Office365 Org Chart PowerApps PowerBI PowerQuery Processes Setup and Deployment Shape Data Shape Design ShapeSheet ShapeSheet Functions SharePoint 2013 SQL Teams Validation VBA Video Visio Visio 2007 Visio for the Web Visio Online Visio Services Visio Viewer Webinar

Footer

bVisual Profile

The UK-based independent Visio consultancy with a worldwide reach. We have over 25 years experience of providing data visualization solutions to companies around the globe.

Learn more about bVisual

  • Amazon
  • E-mail
  • Facebook
  • LinkedIn
  • Twitter
  • YouTube

Search this website

Recent posts

  • Fixing dimensions of 2D shapes
  • Merging Linked Data from Similar Tables
  • Smart Radio Buttons and Check Boxes in Visio
  • Using Button Face Ids in Visio
  • Grid Snapping Revisited

Copyright © 2025 · Executive Pro on Genesis Framework · WordPress · Log in