SVG file is not shown on ionic view

Ionic Framework ionic-v3
1

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
2

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
3

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

2 Likes
4

Excellent! Thank you! :slight_smile:

5

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

3 Likes
6

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');
}
7

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
8

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
9

thanks, object tag worked for me

10

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

11

generate platform Android >= 7.0.0

ionic cordova platform add android@7.0.0
12

I have an external link which is in SVG format, it’s working on the web but not after generating and using android build.