SVG icons doesn't render properly on Safari

[ranmedina]

Hello,

Is it possible that this library does not support Safari?
SVG icons are rendering perfectly on every browser, but when I view it using my iPhone, the SVG icon becomes black & white.

However, using:
<img src="icon.svg">
works.

Example:

Chrome:

Safari:

Any ideas?

[czeckd]

@jayzienS If you open just the SVG file in Safari outside of Angular, does it display the shading? It may be an issue with the SVG for Safari than the library. The library looks like it is displaying the SVG, just not the shading.

Please attach the SVG if you want further help.

[ranmedina]

@jayzienS If you open just the SVG file in Safari outside of Angular, does it display the shading? It may be an issue with the SVG for Safari than the library. The library looks like it is displaying the SVG, just not the shading.

Please attach the SVG if you want further help.

Yeah, I just ran a test on a local server using the <svg> element and it seems like displaying the SVG on a blank page outside the framework works properly.
Any idea what the issue could be?

There is the SVG file -
iostestsvg.zip
or
https://pastebin.com/sihnB0Nk

[czeckd]

I've not been able to reproduce this. I just added use of your icon to the library's demo app for my test. I loaded the SVG using the library without any issue with Safari on a MacOS desktop, iPad, and iPhone. Here it is on Safari on an iPhone:

This is the HTML I used:

<div>
    <svg-icon src="images/testicon1.svg"></svg-icon>
</div>

Maybe there is a style in your app that is interfering with it?

[czeckd]

Ahh, I just noticed you're not using the library in your example. You are loading it with the <img> tag not the <svg-icon> tag that is from the library.

[ranmedina]

I've not been able to reproduce this. I just added use of your icon to the library's demo app for my test. I loaded the SVG using the library without any issue with Safari on a MacOS desktop, iPad, and iPhone. Here it is on Safari on an iPhone:

This is the HTML I used:

<div>
    <svg-icon src="images/testicon1.svg"></svg-icon>
</div>

Maybe there is a style in your app that is interfering with it?

Ahh, I just noticed you're not using the library in your example. You are loading it with the <img> tag not the <svg-icon> tag that is from the library.

I gave the <img> element as a working example, when I use <svg-icon> it doesn't work unfortunately.
However, I ran a test on a fresh angular app using your library and indeed it renders properly, which leads me to the conclusion that something in my app is interfering.

I will do some deep researching into this, thanks for your assistance anyway!