SVG as Object works on Desktop, fails on mobile/android

Ionic Framework ionic-v3
1

I have a very simple SVG created using InkScape, just a couple of rectangles. (Using Ionic 2 app based on the sidemenu template, if that’s relevant).

<ion-content padding>
  <h3>Sample SVG</h3>
  <object data="/assets/image/sample.svg" type="image/svg+xml" id="sample-svg" width="100%" height="90%">
    WHY IS THIS NOT SHOWING. 
  </object>
</ion-content>

Works fine on all desktop browsers, but shows the alt-message (“NOT SHOWING”) on emulators and physical devices. Browser Console shows no errors, Chrome Remote Debugger (the chrome://inspect thing) shows no pertinent errors either.

I believe this is not about the browser SVG support because inline SVG like below shows up just fine in android.

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> 
</svg>

I’m using the object tag (instead of inline SVG tag or the IMAGE tag) because i need to manipulate the SVG DOM to add some interactivity, and it works fine on desktop browsers. Any ideas where i should look first?

Thanks in advance,
ts.

3

I have similar problem having img tag for SVG, desktop browser shows ok, but android emulator (for API 23) does not. like this:

<ion-col><a><img src="/assets/img/apartment.svg" alt="apartment"/></a></ion-col>
4

THANK YOU for posting that. Your message led me to try out the img wrapper myself (which i never did, because i need access to the DOM). You are correct, svg inside IMG tag works fine on desktop browsers, but didn’t show up on android devices or emulators. But instead of showing nothing like the OBJECT tag, it showed this small icon that seems to indicate that the image was not found.

Further digging via chrome devtools inspect thing showed this error message on the console:

"Failed to load resource file:///assets/image/map.svg"

Which is a bit weird. On a hunch, i changed the img src format to just

"assets/image/map.svg"

(without the leading slash) and it shows up just fine on android and emulators. Please let me know if this solves your issue. This should be in the docs somewhere with HUGE BOLD LETTERS.

Edit: Confirmed working on devices with the OBJECT tag too. Thanks.

1 Like
5

Cheers, works for me too to change the image path! Great, thanks to you too :slight_smile: