Reply
Frequent Visitor
Posts: 10
Registered: ‎07-18-2018
Accepted Solution

SVG image is not displaying (Broken image)

Hi,

 

I'm facing an issue of presenting the SVG image. I have set the data category to image URL, but it's still showing the broken image. I'm wondering which action I've missed.  

 

BTW, I have tested the SVG code as shown. 

 

Many Thanks.

 

Snipaste_2018-09-18_11-25-50.pngSnipaste_2018-09-18_11-29-23.png


Accepted Solutions
New Contributor
Posts: 607
Registered: ‎02-29-2016

Re: SVG image is not displaying (Broken image)

[ Edited ]

@lewisgravity

From the SVG examples I have seen for Power BI, I believe that the <svg> element must have an xmlns attribute, which is normally set to 'http://www.w3.org/2000/svg' (I'm sure someone out there can explain why Smiley Happy ).

 

If you add that to the SVG text string, the image should display correctly - see below. (sorry the colon keeps changing to &colon;

Just change that back to a colon Smiley Happy

 

"data&colon;image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='250' height='250'> <circle cx='125' cy='125' r='100' fill='#aeaeae'/> <text x='50%' y='50%' text-anchor='middle' fill='white' font-size='100px' font-family='Arial' dy='.3em'>3 </text> Sorry, your browser does not support inline SVG. </svg>"

 

View solution in original post

New Contributor
Posts: 607
Registered: ‎02-29-2016

Re: SVG image is not displaying (Broken image)

[ Edited ]

@lewisgravity

Sorry the "colon" thing was not my main point - that was just a forum formatting issue. The colon has to be an actual colon character :, not &colon; Smiley Happy

 

Does the PBIX file linked below work? - I have entered you SVG image URL with the xlmns attribute added.

PBIX file link

 

The SVG URL should look like this (space after the colon character is optional - I just put it there so the code displays correctly in the forum):

"data: image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='250' height='250'> <circle cx='125' cy='125' r='100' fill='#aeaeae'/> <text x='50%' y='50%' text-anchor='middle' fill='white' font-size='100px' font-family='Arial' dy='.3em'>3 </text> Sorry, your browser does not support inline SVG. </svg>"

Regards,

Owen

View solution in original post


All Replies
New Contributor
Posts: 607
Registered: ‎02-29-2016

Re: SVG image is not displaying (Broken image)

[ Edited ]

@lewisgravity

From the SVG examples I have seen for Power BI, I believe that the <svg> element must have an xmlns attribute, which is normally set to 'http://www.w3.org/2000/svg' (I'm sure someone out there can explain why Smiley Happy ).

 

If you add that to the SVG text string, the image should display correctly - see below. (sorry the colon keeps changing to &colon;

Just change that back to a colon Smiley Happy

 

"data&colon;image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='250' height='250'> <circle cx='125' cy='125' r='100' fill='#aeaeae'/> <text x='50%' y='50%' text-anchor='middle' fill='white' font-size='100px' font-family='Arial' dy='.3em'>3 </text> Sorry, your browser does not support inline SVG. </svg>"

 

Highlighted
Frequent Visitor
Posts: 10
Registered: ‎07-18-2018

Re: SVG image is not displaying (Broken image)

Hi @OwenAuger

 

Thanks for replying and helping. However, the problem is still here with or without '&colon'. I'm currently using the version of Aug 2018 and it works well with the example in this post, Sparkline

 

Many Thanks. 

 

Snipaste_2018-09-18_14-48-22.png

New Contributor
Posts: 607
Registered: ‎02-29-2016

Re: SVG image is not displaying (Broken image)

[ Edited ]

@lewisgravity

Sorry the "colon" thing was not my main point - that was just a forum formatting issue. The colon has to be an actual colon character :, not &colon; Smiley Happy

 

Does the PBIX file linked below work? - I have entered you SVG image URL with the xlmns attribute added.

PBIX file link

 

The SVG URL should look like this (space after the colon character is optional - I just put it there so the code displays correctly in the forum):

"data: image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='250' height='250'> <circle cx='125' cy='125' r='100' fill='#aeaeae'/> <text x='50%' y='50%' text-anchor='middle' fill='white' font-size='100px' font-family='Arial' dy='.3em'>3 </text> Sorry, your browser does not support inline SVG. </svg>"

Regards,

Owen

Frequent Visitor
Posts: 10
Registered: ‎07-18-2018

Re: SVG image is not displaying (Broken image)

Hi @OwenAuger,

 

Thanks a lot, it works! 

 

I misunderstand the '&colon;' thing.