SVG xlink namespace bug: still in Visio 2007

[Adam]

When exporting SVG files, Visio 2003 omitted a namespace declaration
for 'xlink', which prevents the SVG from being displayed in web
browsers. Visio 2007 *still* doesn't include the xlink namespace
declaration. C'mon, Microsoft: it's just 41 extra characters!

xmlns:xlink="http://www.w3.org/1999/xlink"

Doesn't anyone export SVG from Visio?

-Adam

 

[Chris Roth [Visio MVP]]

I just drew a rectangle on a page and exported it to SVG from Visio 2007.

The file opened painlessly in IE8 and FireFox 3.5 and Google Chrome, so
perhaps you are having another problem?


On a related note:

Skewing Around With Visio & SVG
http://www.visguy.com/2006/09/29/skewing-around-with-visio-svg/

--
Hope this helps,

Chris Roth
Visio MVP


Visio Guy: Smart Graphics for Visual People

Articles: http://www.visguy.com
Shapes: http://www.visguy.com/shapes
Dev: http://www.visguy.com/category/development/
Forum: http://www.viguy.com/vgforum

 

[Adam]

I just drew a rectangle on a page and exported it to SVG from Visio 2007.

Thanks for experimenting, Chris.

The file opened painlessly in IE8 and FireFox 3.5 and Google Chrome, so
perhaps you are having another problem?

Yes, my diagram is more complex than a single rectangle.

Your case is still useful to point out a problem in my initial post,
because a single rectangle doesn't include any use of the xlink:
namespace---if your drawing is complex enough, and Visio decides it
needs to use xlink:, then you'll hit the problem I described. For
example, if you still have Visio open, try duplicating your rectangle
and connecting the two rectangles together with a line. Add an
arrowhead to either end of the line, and save-as SVG. Voila! The
xlink: namespace is used, and Chrome Complains. And so does IE8 with
the Renesis Player installed (IE8 doesn't support SVG out of the box.)

Skewing Around With Visio & SVGhttp://www.visguy.com/2006/09/29/skewing-around-with-visio-svg/

Nice page.

-Adam

 

[Nikolay Belyh]

I just drew a rectangle on a page and exported it to SVG from Visio 2007. The file opened painlessly in IE8 and Firefox 3.5 and Google Chrome, so perhaps you are having another problem?

Hello Chris, Adam,

This is (AFAIK) a known Visio issue; this happens when you export a
diagram that (e.g.) contains hyperlinks (or images?).
The easiest way to reproduce this is:

Create a blank diagram, then draw a rectangle, then add a hyperlink to
that rectangle that points to (e.g.) "visguy.com" ;-). That's it. The
saved SVG file won't be opened by "Firefox & co" due to this bug.
Visio 2003, Visio 2007, and Visio 2010 all have this issue.

Unfortunately the only known workaround (AFAIK) is to add that missing
namespace (by hand or creepy script).

So Microsoft guys, PLEASE, PLEASE, fix this in Visio 2010 at last!

There is one more SVG-related "blocker" issue in Visio, the "font-size:
12" problem, that prevent Visio-generated SVG to be displayed properly
in Firefox/Opera/Chrome. When visio saves svg, it assigns the root
element a style that includes that string, "font-size:12". This is
INVALID string. It shall be actually "font-size:12px". The "px" part
is missing. This issue is also very critical for proper SVG rendering
in Firefox/Opera/Chrome.

So, PLEASE, PLEASE, fix this for Visio 2010 as well

Kind regards, Nikolay.

 

[Adam]

Nikolay,

Many thanks for the corroboration and update.

So Microsoft guys, PLEASE, PLEASE, fix this in Visio 2010 at last!

I'd vote for a patch for earlier versions as well.

Meanwhile, it's time for a creepy script.

-Adam

 

[Nikolay Belyh]

You can do the trick by (e.g.) simply loading the SVG file and re-
saving it (using C#):

----
XmlDocument doc = new XmlDocument();

// This does not complain about missing
// xlink namespace declaration (!)

doc.Load("Drawing1.svg");

// This silently adds
// that missing namespace (!)

doc.Save("Drawing1.svg");
-----

Creepy, isn't it? >_<

As for the style "font-size:12", there is no easy way like that to fix
it; you need to find default style name in <svg> element, then parse
styles in <style> section, and fix corresponding style. Not funny at
all... But unless you fix it you get something like that in Opera/
Firefox/Chrome:
http://nbelyh.googlepages.com/wrong-12.png

Instead of a correct variant:
http://nbelyh.googlepages.com/correct-12.png

Kind regards, Nikolay.

 

[Adam]

You can do the trick by (e.g.) simply loading the SVG file and re-
saving it (using C#):

That's a good trick---thanks for sharing. I was going to use an XSL
transform to make the fixes, mostly because that would fit into my
production flow better.

-Adam

 

[Adam]

That's a good trick---thanks for sharing. I was going to use an XSL
transform to make the fixes, mostly because that would fit into my
production flow better.

But now, thanks to your help, I'm fixing up the file in PowerShell. (I
was using PowerShell to export SVG from a set of VSD files, anyway.)
The Load/Save trick fixes the namespace issue, and a little regex
replace fixes the style:

# Fix up use of xlink namespace.
$xmlData = new-object "System.xml.XmlDocument"
$xmlData.Load($svgname)
$root = $xmlData.get_DocumentElement()
$styles = $root.get_Item("style")
$newStyle = [regex]::Replace($styles.get_InnerText(), "(font-size:
[0-9]+);", '$1pt;')
$styles.set_InnerText($newStyle)
$xmlData.Save($svgname)

My connections use Visio arrows, which aren't visible in Firefox or
Chrome. But I'm going to rasterize the SVG anyway (my target is
Eclipse Help), but the rasterizer would choke on the Visio output
before. I think the arrowheads will show up in the rasterized output.

-Adam

 

[Adam]

   # Fix up use of xlink namespace.
   $xmlData = new-object "System.xml.XmlDocument"
   $xmlData.Load($svgname)
   $root = $xmlData.get_DocumentElement()
   $styles = $root.get_Item("style")
   $newStyle = [regex]::Replace($styles.get_InnerText(), "(font-size:
[0-9]+);", '$1pt;')
   $styles.set_InnerText($newStyle)
   $xmlData.Save($svgname)

My bad: that should be get/set InnerXml, not InnerText. Using
InnerText doesn't preserve the CDATA-ness of the style defintions.

Not that it matters much. The incomprehensible use of multiple styles
seems designed to make any Visio-generated SVG look terrible. I don't
see that Visio -> SVG is of any real use at all---time to use some
other tool for this task.

-Adam

 

[Nikolay Belyh]

Not that it matters much. The incomprehensible use of multiple styles

seems designed to make any Visio-generated SVG look terrible. I don't
see that Visio -> SVG is of any real use at all---time to use some
other tool for this task.

You should set the font-size units not to "pt" but to "px" (PIXELS).
Or re-map pixels to points.
With this one and some other tweaks, Visio-generated SVG looks just
fine everywhere! Honestly! ;D

BTW, I believe that Microsoft initially tested the SVG export with ASV
(adobe svg viewer), because with IE + ASV it works just perfectly
without any additional "fixtures"... But unfortunately since ASV has
gone for good (ADOBE discontinued it last year), it would be really
nice to make Visio generate SVG properly...

Kind regards, Nikolay.

 

[Nikolay Belyh]

You should set the font-size units not to "pt" but to "px" (PIXELS).
Or re-map pixels to points.

BTW, this seems to be exactly the issue: Visio SVG export assumes the
default font size units to be "px" (pixels), while Firefox/Opera/
Chrome assume the default font size units to be "pt" (points).
Unfortunately I haven't found in the SVG spec which assumption is the
correct one; but anyways, it would be really nice of Visio to specify
the measurement units explicitly... I mean, since 12pt ~ 16px, we have
this rendering problem! Since this problem requires typling only only
2 extra characters, unlike 41 extra characters for the
"xmlns:xlink='http://www.w3.org/1999/xlink'", probably it has better
chances of being fixed in 2010? ;D

Kind regards, Nikolay.

 

[Adam]

You should set the font-size units not to "pt" but to "px" (PIXELS).
Ok.

BTW, I believe that Microsoft initially tested the SVG export with ASV
(adobe svg viewer), because with IE + ASV it works just perfectly
without any additional "fixtures"... But unfortunately since ASV has
gone for good (ADOBE discontinued it last year), it would be really
nice to make Visio generate SVG properly...

I think you're right. I expect that Adobe FrameMaker uses the Adobe
SVG Viewer to render SVG images, and the output from Visio renders
just fine. And back when the SVG export filter was developed, the
Adobe viewer was probably the best viewer out there (on Windows, at
least).

But the Visio SVG doesn't render perfectly in all cases. For example,
I have a block diagram that has a lot of two-line text, e.g.,

Some
Text

Even though the text has the same font settings in Visio for the top
and bottom lines, Visio insists on applying different styles to each
line in the SVG file, e.g., ".st2" for the top and ".st3" for the
bottom. The styles are defined like this:

.st2 {fill:#000000;font-family:Arial;font-size:0.666664em}
.st3 {font-size:1em}

Adobe SVG Viewer seems to be the only viewer that can render this in
any sort of reasonable way (I've tried several). Any ideas on this new
madness?

-Adam