SVG image is not displaying (Broken image)

[Anonymous]

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.

[OwenAuger · Accepted solution]

@Anonymous

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 🙂 ).

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 🙂

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

[mangeshmm]

I have the exact same issue.  I have downloaded a bunch of SVG image data from the web.  Then when I go and convert this data into SVG images - only 1 of all the images converted actually renders (the rest show up as broken images).  I am certain there is nothing wrong with the data being used since testing the image data on html viewer renders the image correctly.  Further, there is nothing wrong in what i am doing to covert the image data into SVG since 1 image is rendering correctly as a  SVG image.  Using the same practice and process inexplicably does not seem to work for the other images.  This is totally frustrating since I have checked and rechecked the code (which includes pasting over from the image measure that actually renders).  Can someone pls pls help out - this is bizarre and frustrating and Ive spent way too much time trying to figure this out than what this seemingly straightforward process deserves

[Markzolotoy]

@mangeshmm How are you actually showing the SVG? Which visual are you using?

[OwenAuger · Accepted solution]

@Anonymous

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 🙂 ).

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 🙂

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

[Anonymous]

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. 

[OwenAuger · Accepted solution]

@Anonymous

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; 🙂

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

[Anonymous]

Hi @OwenAuger,

Thanks a lot, it works! 

I misunderstand the '&colon;' thing.