SVG không hiển thị trong thẻ img trong Safari

Question

Nói một cách đơn giản, tôi có một đồ họa SVG được nhúng trong HTML từ chối hiển thị trong Safari (mặc dù nó hoạt động tốt trong Chrome, Firefox và các trình duyệt khác).

Tôi đang sử dụng đánh dấu sau đây để thực hiện điều này:

<img alt="grapefruit logo" src="/assets/better-gf-logo_red.svg" /> 

Dưới đây là một liên kết trực tiếp đến trang nơi SVG không hiển thị. Biểu trưng trái cây ở góc trên cùng bên trái không hiển thị trong Safari: https://grapefruit.cs.rpi.edu/.

Tôi đã xác minh dòng sau cũng có mặt trong nginx tôi mime.types:

image/svg+xml       svg svgz; 

Tuy nhiên, tôi biết rằng vấn đề này có lẽ không liên quan đến kiểu MIME, kể từ SVG không xuất hiện trong Safari trên máy phát triển của tôi (hoặc tôi đã thử nghiệm một số máy chủ web). Tôi cũng đã thử hiển thị SVG file itself trong Safari và có vẻ ổn. Phần tử hình ảnh có kích thước và mô hình hộp phù hợp, nhưng nó không hiển thị bất kỳ nội dung nào.

Answer 1

Chỉ ra rằng <img src="image.svg"> sẽ không hoạt động trong Safari, tôi đã thử sử dụng <object> và hoạt động. Cung cấp cho một thử này: jsBin demo

<object 
    type="image/svg+xml" 
    height="70" 
    width="150" 
    data="/assets/better-gf-logo_red.svg"> 
</object> 

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object

Answer 2

Trước hết hình ảnh của bạn không phải là SVG
bạn có thể mở nó trong một trình soạn thảo văn bản và xem - đó là PNG (không vector) chỉ lưu lại dưới dạng SVG

... width="1640" height="422" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA... 

check here http://jsbin.com/kayiwe/