Adding Dynamic link and represent this as a picture while keeping it dynamic

Started by zymosis, March 11, 2013, 05:36:05 PM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.



Great to have found this site! Now hoping that somebody has an idea what the best practice is for my following question

Let me start of with the final big picture that is working but it is a load of manual work... in visio 2010

I have exported a visio diagram to html svg. I replaced each included picture(png) embedded in the svg file to its appropriate location on our webserver. These images(png files) represent data and this png file is refresehed every 30 seconds.

Now, to my question. I do not want to replace the embedded picture with the locationlink in the svg file every time I make a change in the design... I want visio to store the location link immediatly instead of him embedding the picture itself.... How do I do this?

Some tips are very, very welcome ... as I do not want to change the locationlink 60x per visio change. ... That is quite cumbursome

Best regards



I did not understand the step where you move the pictures to the right location.
Can't you assign the location in Visio?


As far as my knowledge goes, Visio embeds the images ... maybe I am doing the very hard way here ...

quick check is the following

Create an empty visio file, publish it to html using svg. Open the svg_01.svg and run through the file ... it is quite small.

Now add a jpg to your liking, preferably a big one and perform the above steps.

You will see that in the svg file alot of data is added, the added data starts with xlink:href="data:image/png blablabla .... " I replaced all of the data between "" with the xlink href to the file location.

This works, and every time the webpage reloads, it gets the file on the remote location(s). But I need to replace all of my remote links every time I have edited and re-exported the visio.

Is there a quicker way?

I am thinking of changing the embedded png data of the image from within Visio itself but I have got no clue where to find this

Or am I missing something elemental in Visio :)


Hello Jp,

One option might be to data link the hosted image path so that it's carried through in Shape Data.  You can then edit the javascript in svg_1.js to replace the appropriate href attribute with one from the Shape Data in data.xml.  However this is all a bit heavy on the client - my temptation, based on what you've said, would be to just parse the svg file and a post html output step and look up the correct image source based on each shape ID (which you have in the SVG output).  For example, here's a snippet from a page with two shapes (the second is an image):

<g v:mID="0" v:index="1" v:groupContext="foregroundPage">
        <v:pageProperties v:drawingScale="0.0393701" v:pageScale="0.0393701" v:drawingUnits="24" v:shadowOffsetX="8.50394" v:shadowOffsetY="-8.50394"/>
        <g id="shape1-1" v:mID="1" v:groupContext="shape" transform="translate(127.559,-651.969)">
            <rect x="0" y="762.52" width="99.2126" height="79.3701" class="st1"/>
        <g id="shape2-3" v:mID="2" v:groupContext="shape" transform="translate(176.504,-439.37)">
            <rect v:rectContext="foreign" x="0" y="681.449" width="213.921" height="160.441" class="st2"/>
            <image x="0" y="681.449" width="213.921" height="160.441" preserveAspectRatio="none" xlink:href=""/>
            <rect v:rectContext="foreign" x="0" y="681.449" width="213.921" height="160.441" class="st2"/>

If you look at the script in svg_1.js you'll see that it's looking for the 'v:mID' attribute which will give you the respective Visio shape ID, and then how you look up the url is up to you.

Hope that helps

Best regards

John Goldsmith - Visio MVP


Thanks John,

I was hoping I was missing something in my Visio understanding.

I seem to go for my first idea, which is also the one that you proposed.

I will post parse the created svg file to replace the embedded image if a hyperlink is present with the hyperlink itself. This for the entire file.

In a later phase I could decide to correlate the shape unique identifier or some other to replace what I want but I want to keep it simple right now.

Maybe some others have some neat ideas?

Best regards


Another flavour around that would be to save the document as svg directly (ie not via save as web) as that way you can include Shape Data within the svg itself which should make parsing a little easier.   
John Goldsmith - Visio MVP


I have noticed that if you save the page as html output, the parsing has to be done in the svg_01.svg document.

This could make the automated parsing of multiple files in multiple folders easier.

I will do some analyses what is the best method for me :)

gracias to all!