Forum Discussion
Solved
Display X,Y coordinations on SVG map
Hi all, I am strugling a bit with one case. I have a floor plan in SVG. There are some walls, like a labyrinth and some shortcuts through some rooms. I walked through this labyrinth, recorded X, ...
The visuals library has an (unrated - so proceed at your own risk) HTML5 visual that can also handle SVG. That looks much nicer.
Now all that's left to do is to overlay your walkpaths as needed.
I think that should be possible. Your floor plan SVG code would need to be combined with the codes for each of the walkthrough polylines. Can you share sample data?
I tryed to made a realy simple example of my plan, because mine one is not completed and a bit complicated and as first I need to realize, if it is even possible, what I want to do in future.
So, lets try this one. https://svgur.com/s/NxG
I really appreciate your attitude lbendlin, thanks a lot!
Ok let's do it step by step. The SVG you provided is
<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg"> <g> <title>Example</title> <rect fill="#fff" id="canvas_background" height="602" width="802" y="-1" x="-1"/> <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid"> <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/> </g> </g> <g> <title>Layer 1</title> <line stroke="#000" stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_1" y2="438.45313" x2="131.47619" y1="142.45313" x1="131" stroke-width="3" fill="none"/> <line stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_2" y2="144.36251" x2="438" y1="141.96251" x1="131" fill-opacity="null" stroke-opacity="null" stroke-width="3" stroke="#000" fill="none"/> <line stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_4" y2="442.45775" x2="439.42857" y1="440.05775" x1="131" fill-opacity="null" stroke-opacity="null" stroke-width="3" stroke="#000" fill="none"/> <line stroke="#000" stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_5" y2="332.26266" x2="437.66668" y1="145.31027" x1="438" stroke-width="3" fill="none"/> <line stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_6" y2="384.28571" x2="332.14286" y1="384" x1="436.42857" fill-opacity="null" stroke-opacity="null" stroke-width="3" stroke="#000" fill="none"/> <line stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_8" y2="220.47619" x2="333.09524" y1="383.80952" x1="333.09524" fill-opacity="null" stroke-opacity="null" stroke-width="3" stroke="#000" fill="none"/> <line stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_9" y2="218.57143" x2="334.04762" y1="218.57143" x1="191.19048" fill-opacity="null" stroke-opacity="null" stroke-width="3" stroke="#000" fill="none"/> <line stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_11" y2="277.61905" x2="283.09524" y1="278" x1="130.71429" fill-opacity="null" stroke-opacity="null" stroke-width="3" stroke="#000" fill="none"/> <line stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_12" y2="360.95238" x2="195.95238" y1="361.42857" x1="333.09524" fill-opacity="null" stroke-opacity="null" stroke-width="3" stroke="#000" fill="none"/> <text xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="24" id="svg_13" y="422.38095" x="408.33333" fill-opacity="null" stroke-opacity="null" stroke-width="0" stroke="#000" fill="#000000">Start</text> <text xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="24" id="svg_14" y="368.57143" x="409.28571" fill-opacity="null" stroke-opacity="null" stroke-width="0" stroke="#000" fill="#000000">End</text> </g> </svg>That doesn't work because of the double quotes. Let's replace them with single quotes.
<svg width='800' height='600' xmlns='http://www.w3.org/2000/svg'> <g> <title>Example</title> <rect fill='#fff' id='canvas_background' height='602' width='802' y='-1' x='-1'/> <g display='none' overflow='visible' y='0' x='0' height='100%' width='100%' id='canvasGrid'> <rect fill='url(#gridpattern)' stroke-width='0' y='0' x='0' height='100%' width='100%'/> </g> </g> <g> <title>Layer 1</title> <line stroke='#000' stroke-linecap='undefined' stroke-linejoin='undefined' id='svg_1' y2='438.45313' x2='131.47619' y1='142.45313' x1='131' stroke-width='3' fill='none'/> <line stroke-linecap='undefined' stroke-linejoin='undefined' id='svg_2' y2='144.36251' x2='438' y1='141.96251' x1='131' fill-opacity='null' stroke-opacity='null' stroke-width='3' stroke='#000' fill='none'/> <line stroke-linecap='undefined' stroke-linejoin='undefined' id='svg_4' y2='442.45775' x2='439.42857' y1='440.05775' x1='131' fill-opacity='null' stroke-opacity='null' stroke-width='3' stroke='#000' fill='none'/> <line stroke='#000' stroke-linecap='undefined' stroke-linejoin='undefined' id='svg_5' y2='332.26266' x2='437.66668' y1='145.31027' x1='438' stroke-width='3' fill='none'/> <line stroke-linecap='undefined' stroke-linejoin='undefined' id='svg_6' y2='384.28571' x2='332.14286' y1='384' x1='436.42857' fill-opacity='null' stroke-opacity='null' stroke-width='3' stroke='#000' fill='none'/> <line stroke-linecap='undefined' stroke-linejoin='undefined' id='svg_8' y2='220.47619' x2='333.09524' y1='383.80952' x1='333.09524' fill-opacity='null' stroke-opacity='null' stroke-width='3' stroke='#000' fill='none'/> <line stroke-linecap='undefined' stroke-linejoin='undefined' id='svg_9' y2='218.57143' x2='334.04762' y1='218.57143' x1='191.19048' fill-opacity='null' stroke-opacity='null' stroke-width='3' stroke='#000' fill='none'/> <line stroke-linecap='undefined' stroke-linejoin='undefined' id='svg_11' y2='277.61905' x2='283.09524' y1='278' x1='130.71429' fill-opacity='null' stroke-opacity='null' stroke-width='3' stroke='#000' fill='none'/> <line stroke-linecap='undefined' stroke-linejoin='undefined' id='svg_12' y2='360.95238' x2='195.95238' y1='361.42857' x1='333.09524' fill-opacity='null' stroke-opacity='null' stroke-width='3' stroke='#000' fill='none'/> <text xml:space='preserve' text-anchor='start' font-family='Helvetica, Arial, sans-serif' font-size='24' id='svg_13' y='422.38095' x='408.33333' fill-opacity='null' stroke-opacity='null' stroke-width='0' stroke='#000' fill='#000000'>Start</text> <text xml:space='preserve' text-anchor='start' font-family='Helvetica, Arial, sans-serif' font-size='24' id='svg_14' y='368.57143' x='409.28571' fill-opacity='null' stroke-opacity='null' stroke-width='0' stroke='#000' fill='#000000'>End</text> </g> </svg>Now, this can be assigned to a measure or calculated column, marked as Image URL, and placed into a table or matrix.
However it results in a broken image.
That likely means that some of the more elaborate SVG code is not supported in the Power BI implementation? Let's see if we can modify/simplify the code.
Here's an example of a successful renderer of a sparkline.
Turns out all it needed was the data prefix .
As you can see the viewbox isn't right yet. I am still learning SVG, let's see which other changes are needed.
Oh boy. Looks like there is a hard limit on the image size in table and matrix visuals - 150px height.
You would need to redo your SVG to take that into account and reduce the whitespace around the drawing. Or someone can com up with a way to break out of the 150 px limit.
here's my current svg version. Note: replace ":" with ":"
SVG = "data:image/svg+xml;utf8,<svg height='600' width='800' xmlns='http://www.w3.org/2000/svg'> <line stroke='#000' stroke-linecap='undefined' stroke-linejoin='undefined' id='svg_1' y2='438.45313' x2='131.47619' y1='142.45313' x1='131' stroke-width='3' fill='none'/> <line stroke-linecap='undefined' stroke-linejoin='undefined' id='svg_2' y2='144.36251' x2='438' y1='141.96251' x1='131' fill-opacity='null' stroke-opacity='null' stroke-width='3' stroke='#000' fill='none'/> <line stroke-linecap='undefined' stroke-linejoin='undefined' id='svg_4' y2='442.45775' x2='439.42857' y1='440.05775' x1='131' fill-opacity='null' stroke-opacity='null' stroke-width='3' stroke='#000' fill='none'/> <line stroke='#000' stroke-linecap='undefined' stroke-linejoin='undefined' id='svg_5' y2='332.26266' x2='437.66668' y1='145.31027' x1='438' stroke-width='3' fill='none'/> <line stroke-linecap='undefined' stroke-linejoin='undefined' id='svg_6' y2='384.28571' x2='332.14286' y1='384' x1='436.42857' fill-opacity='null' stroke-opacity='null' stroke-width='3' stroke='#000' fill='none'/> <line stroke-linecap='undefined' stroke-linejoin='undefined' id='svg_8' y2='220.47619' x2='333.09524' y1='383.80952' x1='333.09524' fill-opacity='null' stroke-opacity='null' stroke-width='3' stroke='#000' fill='none'/> <line stroke-linecap='undefined' stroke-linejoin='undefined' id='svg_9' y2='218.57143' x2='334.04762' y1='218.57143' x1='191.19048' fill-opacity='null' stroke-opacity='null' stroke-width='3' stroke='#000' fill='none'/> <line stroke-linecap='undefined' stroke-linejoin='undefined' id='svg_11' y2='277.61905' x2='283.09524' y1='278' x1='130.71429' fill-opacity='null' stroke-opacity='null' stroke-width='3' stroke='#000' fill='none'/> <line stroke-linecap='undefined' stroke-linejoin='undefined' id='svg_12' y2='360.95238' x2='195.95238' y1='361.42857' x1='333.09524' fill-opacity='null' stroke-opacity='null' stroke-width='3' stroke='#000' fill='none'/> <text xml:space='preserve' text-anchor='start' font-family='Helvetica, Arial, sans-serif' font-size='24' id='svg_13' y='422.38095' x='408.33333' fill-opacity='null' stroke-opacity='null' stroke-width='0' stroke='#000' fill='#000000'>Start</text> <text xml:space='preserve' text-anchor='start' font-family='Helvetica, Arial, sans-serif' font-size='24' id='svg_14' y='368.57143' x='409.28571' fill-opacity='null' stroke-opacity='null' stroke-width='0' stroke='#000' fill='#000000'>End</text> </svg>"which still results in lots of wasted space
You want your SVG to be square (for example 600x600) and with little space around the drawing.
The visuals library has an (unrated - so proceed at your own risk) HTML5 visual that can also handle SVG. That looks much nicer.
Now all that's left to do is to overlay your walkpaths as needed.