« IronPython: Stealing Colors with System.Drawing.Bitmap (and yes Visio) | Main | Visio – Creating Tapered Lines »
Thursday
Apr012010

Natively viewing Visio Diagrams in your web browser – a practical use of Embedding SVG in XHTML

You noticed, I hope my latest two posts on SVG - this one and this one – and for my third I’m going to give you a preview of a small tool I’m working on. It will be a part of my Visio Power Tools add in (which is found in my VisioAutomation project on CodePlex).

The new release of the tool is coming soon, and here’s what you’ll be able to do:

Load a nice Visio Diagram …

image

Select Power Tools > Import / Export > Export Selection as SVG + XHTML

image

A form will let you pick a filename (.XHTML) to save the drawing. (Yes, I know the form isn’t very nice – that’s why I’m calling this a preview)

image

Click OK and that XHTML file will be created .

You can then right-click on that file and open in FireFox 3.6 or Google Chrome (and eventually IE9)

image

And you will see them render your diagram …

This is what FireFox 3.6 shows

image

This is what Chrome shows  …

 image

HOW IT WORKS

This is pretty simple. My code exports the Selection as SVG (you can see the temporary svg file in one of the screenshots above) and then wraps that SVG in some XHTML tags. The code is very, very simple.

WHERE TO GET THE POWER TOOLS

I plan on publishing version 2.5 of my VisioAutomation library in a week or two. You can get the latest version of my Visio Power Tools then.

If you are super-curious you can visit the VisioAutomation project on CodePlex and then download the latest source code and build it with Visio Studio 2008.

PrintView Printer Friendly Version

EmailEmail Article to Friend

Reader Comments

There are no comments for this journal entry. To create a new comment, use the form below.

PostPost a New Comment

Enter your information below to add a new comment.
Author Email (optional):
Author URL (optional):
Post:
 
Some HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>