SVG Producing an icon instead of trendline

[ramfan07]

I have looked at a number of posts on SVG's and been unable to determine what my error is.  If it already out there I apologize. 

I originally started creating the SVG graphic in my table based on the sparkline code created by Brian Grant.  Which was a great tutorial.  However, I cannot find the error that I am getting when Power BI goes to display the svg.  One of the values that is being sent to the column in the table in power BI desktop is:

data:image/svg+xml;utf8,
   <svg xmlns='http://www.w3.org/2000/svg' width="320" height = "200">
    <polyline points = "0,200,  29,23,  58,23,  87,178,  116,134,  145,0,  174,200,  203,45,  232,134,  261,200,  290,200,  320,200"
    style = "fill:none; stroke: black; stroke-width:3">
</svg>

When set to image URL it displays an icon rather then a polyline.  When I put the value into an SVG to image generator on line the polyline is viable the way I imagine it should look.  Does anyone see what my error might be.  I am very much a novice at Power BI and may be doing something really simple as a mistake.  Also in preview I notice that the browser is displaying &colon in the above string.  It is truly displaying a colon in Power BI.

[dm-p · Accepted solution]

Hi @ramfan07,

Your SVG polyline tag is not closed properly. The SVG generator you're using to test is somehow managing to handle it and forgiving the missing closure, whereas Power BI doesn't and displays your error icon.

You just need to add a closing '/' to the tag, as shown at the end of line 3 below:

<svg xmlns='http://www.w3.org/2000/svg' width="320" height = "200">
    <polyline points = "0,200,  29,23,  58,23,  87,178,  116,134,  145,0,  174,200,  203,45,  232,134,  261,200,  290,200,  320,200"
    style = "fill:none; stroke: black; stroke-width:3"/>
</svg>

This looks consistent to me in an SVG generator and Power BI (with the exception that Power BI can only render SVGs as equal width x height), e.g.:

Editor

Power BI

 

That's pretty much it 🙂

Regards,

Daniel

---

If my post solves your challenge, then please consider accepting as a solution to help other forum members find the answer more quickly 🙂

[ramfan07]

Thank you so much.  That solved it.