Svg with image inside is not showing in safari

Question

Inside my website, I am embeding a few svgs. They all seem to work just fine in Chrome, Firefox, IE(9+) and in Safari. Howvere as soon as there is image included in the svg, saf

Answer 1

So Anto Jurković pointed out, there are some known issues with Safari and clipPath. What Safari likes is if you dont define polygon but put it straight in to clippPath. Also you must then group clipPath separately.

But I still could not get svg to render the image if I used img tag for svg - . So at the end I have embeded it like this:

I can confirm that this renders correctly in mobile safari(on ipad and iphone, windows safari and mac safari - latest versions).

So to sum it up...I have this svgs in separate html file and render them when needed.