Word Equation to Visio to SVG

I ran across a scenario where I needed to get a Word equation into Visio, and have it export to SVG. This is the story of my investigation.

If you’re looking for a solution in a hurry, just skip to the bottom and read A Very Simple Solution.

If you’ve just got your morning coffee and like to read a bit of a story, then settle in for some nerdy prose…

The Real-world Problem

I have a long-time client whose team uses Visio as part of their extensive documentation processes. A lot of the work involves bringing images, screenshots together on a Visio page, adding notations and other vector-based elements, then exporting the results as SVG and PNG for further manipulation by their content management system.

I’ve developed an add-in for Visio that they use to capture screenshots, import images in bulk, replace images with newer versions, resize images to standard sizes, export multi-page Visio documents as single files, add special footers to pages, sort pages by names, and more! [LINK]Yeah, I know. Hire me! [LINK]

Recently it was brought to my attention that they were having trouble with mathematical equations. While they create the equations with no problems in Microsoft Word, they were having trouble getting those equations into the SVG step of their process. My client described a convoluted process with lots of details I didn’t follow. I remember her emitting a lengthy stream gibberish (which she politely apologized for). However, I did recognize some terms like “import”, “MathML“, “convert”, “Oxygen”.

Yikes, math is hard!

It Can’t Be That Hard…

Of course, I tried the obvious. I copied an equation from Word, then pasted it into Visio. That gave me this:

Yup. Zilch. The grid is just part of the Visio page UI. Paste didn’t even give me some mysterious invisible object! Pure, 100% USRDA nothing. At this point, I’m thinking; “we’ll probably have to paste it as an image…”

But before giving up all hope, I tried something a bit more vector oriented: Paste Special > Picture (Enhanced Metafile):

Unfortunately, that just gave me this lovely mess:

Detour: Not the Solution

Being half-engineer, I immediately started dreaming up a convoluted solution to her problem. Maybe something Rube Goldbergish like:

1. Select the equation in Word
2. Press (another) special Get Equation button on my add-in’s Ribbon
3. The add-in would then import the equation to Visio by:
   1. Capturing a screenshot of the equation (somehow)
   2. Pasting the image into Visio
   3. Adding some behind-the-scenes data to the image shape. This would be OMath XML which Word uses to describe equations.
4. When the user then exported the Visio page to SVG, the add-in would:
   1. Search for image-equation objects
   2. Note their positions or ids
   3. Find the corresponding SVG elements in the exported files
   4. Replace the SVG image with an SVG foreignObject element
   5. Convert the MS Word OMML to MathML
   6. Write the MathML to the foreignObject

No problem, right?

Luckily, I didn’t spend too much time on this Frankenstein process…

Serendipity

… because I noticed something.

When I deleted the ugly [?][?][?][?][?][?][?] shape, I noticed that for a split second, the proper equation appeared. Then the shape was gone.

Weird.

This is what it looked like:

“Hmm”, I thought. “The properly-imported equation seems to be underneath that mess of question marks. You can just see it before the shape vanishes on delete. “Maybe the import isn’t completely munged, it just has extra junk!” This got the gears turning in my head. Let’s try converting the ugly metafile into Visio shapes.

You can do this to metafiles by simply ungrouping the shape. Visio will attempt to convert foreign objects into Visio shapes, wherever possible.

To ungroup an imported metafile, just right-click and choose Group > Ungroup. Super simple:

And VOILA! I got a decent equation, made up of separate Visio text shapes and lines.

This should export to SVG just fine! Don’t mind the blue rectangles, those are just the selection highlighting. They’re not part of the actual graphics, as you can see once we deselect, and turn off the grid:

Well almost. The fraction line is off, and the integral sign and parentheses are missing. This is fairly easily remedied. I fired up Character Map, chose the font Cambria Math, then found the missing characters. I copied them, then pasted them into some of the blank shapes that resulted from the conversion (see the dark-blue, vertical bars amongst the selected shapes).

So it’s not perfect, but it’s better than running through a bunch of conversion applications, I guess.

A Very Simple Solution!

Here are the simple steps to get a Word equation into Visio, so that you can either manipulate the parts, or export it to SVG:

1. Copy equation from Word
2. In Visio: right-click and choose Paste Special
3. Choose Picture (Enhanced Metafile)
   You get an equation-shaped mess of [?][?][?][?] nonsense
4. Right-click that [?][?][?][?] mess
5. Choose Group > Ungroup from the context menu
   Your equation magically appears as Visio text and lines!
6. Use Character Map and the Cambria Math font to replace any characters that didn’t copy over.

The method isn’t 100% effective, as some symbols seem to be ignored. Over time, you could build up a library of missing symbols to have at the ready, since they’re just characters in a special font.

References

While investigating this scenario, I ran across some interesting tidbits regarding equation markup that I’d like to share.

Microsoft Word uses an xml format called OMath XML to describe its equations. But there seems to be another major standard called MathML. See this thread on Office DevCenter.

If you want to programmatically query Word for its equation objects, and extract the OMML from Word, start with this VBA snippet:

 ActiveDocument.OMaths(1).Range.WordOpenXML; 

It is possible to have equation-text within an SVG block, although in the past, it wasn’t possible. The trick seems to be to use a <foreignObject> element within your SVG. Within the foreignObject tag, you will create a <math> tag to hold your equation markup.

<foreignObject xmlns="http://www.w3.org/2000/svg" width="100" height="40">
     <math xmlns="http://www.w3.org/1998/Math/MathML">
          ...
          ...
     </math>
</foreignObject>

This site has some nice explanations and examples: MathML in SVG. Be ready with your finger on F12 so you can inspect the markup!

W3.org has a nice, short introduction page for MathML, check out What is MathML?

Mozilla, of course, has the MathML Reference.

My client referenced an XML editor called Oxygen XML Editor (not free). They use it as part of their workflow. I thought I’d mention it here, as it can apparently be used to work with MathML. I didn’t look into it further.

If you want to go from Word to SVG, then you’ll want to convert OMML to MathML. One place to start is the MathType Software Development Kit. In particular, look for the ConvertEquations sample application.

I found an aging article that contrasts MathML and OMML on Microsoft Developer, have a look at MathML and Ecma Math (OMML).