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,