SVG file is not shown on ionic view

Hi, I seem to not able to see an SVG file in my ionic view app. I tried to place like this: . I also tried to change the path to “./assests/images/etc.”, and tried to make it as a background image in scss. I just see a blank space where the icon should be.

I see the SVG file in ionic serve, and was able to view a JPEG file in ionic view, so my path should be correct.

Does anyone knows something about this issue?

1 Like

Same problem here. SVG images are shown on devices (both ios/android) and emulators (both ios/android) but hidden/not working in Ionic View (latest version ‘Ionic View - test and share apps’)

Ionic info :

cli packages: (/usr/local/lib/node_modules)

@ionic/cli-utils  : 1.9.2
ionic (Ionic CLI) : 3.9.2

global packages:

Cordova CLI : 7.0.1 
Gulp CLI    : CLI version 3.9.1 Local version 3.9.1

local packages:

@ionic/app-scripts : 2.0.2
Cordova Platforms  : android 6.2.3 ios 4.4.0
Ionic Framework    : ionic-angular 3.6.1

System:

Android SDK Tools : 26.0.2
ios-deploy        : 1.9.2 
Node              : v6.11.2
npm               : 5.4.1 
OS                : macOS Sierra
Xcode             : Xcode 8.3.3 Build version 8E3004b

Github issue : https://github.com/ionic-team/ionic-view-issues/issues/231

2 Likes

Excellent! Thank you! :slight_smile:

The link does not work, and I still have this issue

3 Likes

The issue was probably closed. It wasn’t an SVG issue at all. The problem was that in css you need different paths for production (it is good also for development):

On HTML

<img src="./assets/image.svg" alt="" />

On CSS

.image {
  background: url('../assets/image.svg');
}

I’m not sure this is resolved. My paths are as you describe and no SVG images display on iOS in View, but do in Dev App, emulators and ionic serve. Any updates on this would be helpful, particularly as the the github issue link returns 404.

3 Likes

I’m afraid this issue wasn’t resolved.

For me, this IMG element is working in Safari and DevApp, but it fails in Vivaldi or on Android device.

<img src="./assets/img/logo.svg">

This same SVG and path is working fine on all devices/browsers:

<object type="image/svg+xml" data="./assets/img/logo.svg">
  Your browser does not support SVG
</object>
1 Like

thanks, object tag worked for me

These images are working fine on Browser when we use ionic serve however when we push this to the device the image SVG will not show.
I thougth this was a whitlist issue but one error causes the entire app to keep failing on XCode simulator iPhoneX

generate platform Android >= 7.0.0

ionic cordova platform add android@7.0.0