cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
lewisgravity Frequent Visitor
Frequent Visitor

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

2 ACCEPTED SOLUTIONS

Accepted Solutions
Super User
Super User

Re: SVG image is not displaying (Broken image)

@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>"

 



Did I answer your question? Mark my post as a solution!

Proud to be a Datanaut!




Super User
Super User

Re: SVG image is not displaying (Broken image)

@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



Did I answer your question? Mark my post as a solution!

Proud to be a Datanaut!




4 REPLIES 4
Super User
Super User

Re: SVG image is not displaying (Broken image)

@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>"

 



Did I answer your question? Mark my post as a solution!

Proud to be a Datanaut!




Highlighted
lewisgravity Frequent Visitor
Frequent Visitor

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

Super User
Super User

Re: SVG image is not displaying (Broken image)

@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



Did I answer your question? Mark my post as a solution!

Proud to be a Datanaut!




lewisgravity Frequent Visitor
Frequent Visitor

Re: SVG image is not displaying (Broken image)

Hi @OwenAuger,

 

Thanks a lot, it works! 

 

I misunderstand the '&colon;' thing.