2014-10-07 25 views
7

Basitçe söylemek gerekirse, HTML'de gömülü (Chrome, Firefox ve diğer tarayıcılarda iyi çalışıyor olmasına rağmen) Safari'de görüntülenmeyi reddeden bir SVG grafiği var.SVG, Safari'de img etiketinde görüntülenmiyor

Bunu gerçekleştirmek için şu işaretlemeyi kullanıyorum:

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

İşte SVG göstermiyor sayfaya canlı bağlantıdır. Sol üst köşedeki meyve logosu Safari'de görüntülenmiyor: https://grapefruit.cs.rpi.edu/. Ben aşağıdaki satırı doğruladıktan

Ayrıca benim nginx mime.types mevcuttur: Ancak

image/svg+xml       svg svgz; 

, ben SVG Safari'de görünmüyor çünkü bu konunun muhtemelen, mim türleriyle ilgili olmadığını biliyoruz geliştirme makinem de (birkaç web sunucusunu test ettim). Ayrıca Safari'de SVG file itself görüntülemeye çalıştım ve iyi görünüyor. Resim öğesi doğru boyut ve kutu modeline sahip, ancak herhangi bir içerik göstermiyor.

cevap

14

<img src="image.svg">'un Safari'de çalışmaz duruma geldiğinden, <object> kullanmayı denedim ve işe yaradı. o PNG (değil vektör) olan tek olarak kaydedilir - jsBin demo

<object 
    type="image/svg+xml" 
    height="70" 
    width="150" 
    data="/assets/better-gf-logo_red.svg"> 
</object> 
tüm görüntünün

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

+1

Çok teşekkürler! Safari'nin SVG'ler için kullanılmakta olan 'etiketi ile ilgili sorunları olduğunu bilmiyordum. – element119

+0

@autibyte Meuwka'nın cevabına bir göz atın –

+1

svg'nin PNG içeriğinin Safari'deki sorunun gerçek sebebi olup olmadığını merak ediyorum. Diğer svg resminde @meuwka http://jsbin.com/kayiwe/ tarafından Safari'de çalışıyor mu? –

2

Önce bir metin editörü açın ve görebileceğiniz SVG
değil: Bu Bir deneyin SVG

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

onay burada http://jsbin.com/kayiwe/

+1

+1 İnanılmaz Ben fark etmedim :) –