HTML (SVG) Export

Started by Nikolay, January 16, 2017, 01:51:54 AM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.


The issue persists on all files opened, including blank new files.

Thanks for the quick update!



Dear Alex,

Could you please check if new build ( works for you:

--- update ---

seems to be fixed in that build


Updated SvgPublish (the add-in for improved export Web/Svg) to version 1.2.11. Fixed multiple-layer and relative links issues in particular.
More details:

Added localization (full UI translation) for German and Russian languages. Now the add-in can change it's UI language to adopt to Visio's UI language. Well, this is the first time I'm adding multi-language support to a Visio extension.  The proof-reading is done (by a native speaker), but still, beware of odd sentences - any feedback is highly appreciated :D


Really cool add-in Nikolay how did you make the layer toggle on/off on the shapes in this html Visio diagram:

The yellow highlight of the last clicked shape also a really cool touch!
Visio 2021 Professional



The yellow "highlight" may actually be resource-consuming, now there is a way to opt-out and do a simple "rectangle selection" instead.

Regarding the diagram - it's basically just the default checkbox. All source code files are available (download the .zipped vsd file)

I don't remember exactly but I think this was done simply by placing each connection on its layer, i.e. no-code solution.

Hiding in general is done by exporting layer information. I.e. each shape has information associated with it, including its layer(s).


In the Suzuki Visio diagram I see the shapes have a shape data field called 'nets' that has one or more names of the layers ;-separated in a string, like:


If I add a 'nets' shape data field to shapes in my diagrams that has a list of layers ;-separated, do I get the same layer-toggling behavior on the shapes when exporting with your html export add-in? That would be awesome!
Visio 2021 Professional


Nikolay I got it working by adding the Layer name to the 'nets' shape data field of a shape, then in the html export diagram when I click the shape with this shape data it toggles the layer on and off. Super!

(I copied over the Javascript in the example Suzuki diagram, and I guess the Show Layers needs to be turned on in the sidebar options?)

When I have the layer off when exporting unfortunately the toggling doesn't work properly. Is it possible to have some layers off by default (I don't mind adding some javascript for a default turn off but let me know what to add).

Many thanks much appreciated hopefully will get it working then we will get a business license for the non-profit project we're currently working on for sure!
Visio 2021 Professional


Hi Nikolay,

This is the Javascript that is in the Suzuki example with the layer toggling on clicking shapes:

$.each(diagram.shapes, function (shapeId, shape) {

    var $shape = $("#" + shapeId);
    $shape.css("cursor", 'pointer');

    if (!shape.Props || !shape.Props.nets)
    $shape.on('click', function (evt) {
        var nets       = shape.Props.nets;
        var allVisible = true;
        $.each(nets.split(";"), function(k,v) {
            var name    = v.trim();
            if (!diagram.isLayerVisible(name))
                allVisible = false;
        $.each(nets.split(";"), function(k,v) {
            var name = v.trim();
            diagram.setLayerVisible(name, !allVisible);

This works well in other diagrams (I add the layers to be toggled on specific shapes to the 'nets' shape data string field on that shape).

What I need is a way to turn off specific layers when the diagram is initially loaded in the browser (most layers I use are turned off by default), how can I achieve that?

I assume this can be achieved by adding some Javascript, if you can send me an example and where to add it please (my VBA/VB.NET is getting better but my Javascript knowledge is minimal).

Thank you!
Visio 2021 Professional