Publishing Visio Drawings to the Web

Tony Zilles

Why publish a Visio drawing on the Web? If you're reading this, then you'll already know that the Web is a very convenient communications channel. You can use is when it suits you (most of the time anyway), and it allows a reasonable multimedia experience. Certainly text and graphics are handled very well.

If we combine these facilities with Visio's capacity to make clean, good-looking drawings quickly and easily, then we have a way to create illustrated proposals, explanations, instructional documents very easily that can be accessed by anybody with Internet access and a browser. What's more we need only publish a document once. Then anyone who has or can find the URL can read it immediately. But I don't need to evangelize about the Web, you already know about the benefits.

Let's Do It!
Below is a regular Visio Drawing. It comprises a number of shapes dragged and dropped onto an drawing sheet to outline key pages and zones on the Design Drawing website.

Some of the shapes have been assigned with hyperlinks. These shapes have been formatted with drop shadows as a visual clue. When the drawing is published to the Web, these shapes will be hot (hyperlinked) and allow users to jump to remote Websites when clicked.

Assigning hyperlinks
To assign a hyperlink in Visio first select a shape. Then select Insert > Hyperlink which will display this dialog box...

Insert the URL that you want to link to in the "Link to file or URL" text box. Clicking the "Browse" button allows you to either browse for a local file or opens your default Web browser to find the URL you want on the Web.

Any shape can be assigned with a hyperlink, but it makes sense to assign shapes that have a logical connection. A visual clue indicating a hyperlink is also a good idea - otherwise links might well go unnoticed.

Saving in a Web-friendly Format
When your drawing is complete you need to save it in a web friendly format if it is to be accessible by Web surfers with not more than a Web browser. Both GIF and JPG formats are Web-friendly and the resulting files can be readily incorporated in a Web document. To save you drawing as either of these formats select File > Save As... and select GIF or JPG in the File type drop down box. Give the file a name and click OK.

If you're not sure where GIF or JPG is best, a quick rule of thumb is if the image is photo-realistic, then JPG is the go. Otherwise, GIF will give you better quality and smaller filesize. Most technical drawings, charts and screen captures are better off as GIF images.

To include the resulting image in an HTML document use the <img> tag, like this:

<img src="myfile.gif">, or
<img src="/visio/myfile.jpg">

In all likelihood your GIF or JPG file will benefit from optimization with an appropriate utility (I use Ulead SmartSaver) to compress the file and make sure that it is interlaced in the case of a GIF file. Compression will minimize download time and GIF interlacing with progressively display an image during download.

But simply saving as an image file will not preserve your hyperlinks, and your hyperlinks are one of the main attractions of publishing on the Web. To preserve hyperlinks you must save the drawing as HTML and ensure that the option to "Enable Image Maps" is checked. Once again File > Save As... and select HTML. A Save As HTML dialog box will open and you can choose the format of the image you are about to create. Click on the "Options" button and confirm that "Enable Image Maps" is checked. Unless you have a specific reason to select "Server-side" image maps, leave the default "Client side" image map option checked. Click as many OK as it takes to clear the screen and Visio will produce two files.

The first is an image file, either GIF or JPG ( MYFILE.GIF) as selected in the Save As HTML dialog box. The second is an HTML file of the same name (MYFILE.HTML). The HTML file can be copied to a Web server and accessed directly by URL or linked directly from other Web pages...

<a href="myfile.html">Let's see this drawing on the Web</a>

Here is how this link would look in a real HTML document (like this)...

Let's see this drawing on the Web

Alternatively, the drawing can be included in another HTML file by cutting and pasting the <img> and <map> tags from the Visio-generated HTML file into another HTML document. We've done it below...

Example of a drawing saved from Visio as hyperlinked HTML.

The image map that is created is tailored specifically to the image generated. Any changes to the image will result in the image hotspots being mis-aligned with the target shapes.

Whether publishing drawings as images only or as hyperlinked HTML documents, Visio makes it simple to share your drawings in the widest possible way, via the Web.

Tony Zilles