2013-06-11 31 views
5

Bir SVG dosyasını görüntülemek için bir IMG etiketi kullanan bir mobil web sitesi geliştiriyorum. SVG dosyası yaklaşık 500 kB'dir. Görüntü, Firefox ve Chrome'un Android sürümlerinde tamamlar. Ancak, iOS Safari'de, sadece soru işareti olan korkunç küçük mavi kutuyu alıyorum.iOS Safari için SVG dosya boyutu sınırları

iOS'ta görüntü dosyalarının boyutunda bir sınır olduğunu biliyorum. Apple'ın Safari Web Content Guide göre:

kodu çözülmüş GIF, PNG ve TIFF görüntüler için maksimum boyut az 256 MB RAM cihazlar için 3 megapiksel ve büyük veya eşit 256'dan MB RAM cihazlar için 5 megapiksel olduğunu.

Bu, 256 MB RAM'den daha az aygıtlar için genişlik * yükseklik ≤ 3 * 1024 * 1024 olduğundan emin olun. Kod çözülmüş boyutun bir resmin kodlanmış boyutundan çok daha büyük olduğuna dikkat edin.

SVG dosyalarının boyutunda bir sınır olduğunu düşünmüyorum, ancak bunlar vektörlendiklerinden, boyutlarının pikselleri çözülmüş piksel cinsinden tanımlanması gerçekten mantıklı değil. SVG dosyalarındaki sınırın nasıl belirlendiğini bilen var mı?

P.S. Bir HTML sayfası yerine doğrudan SVG dosyasına göz attığımda, resmi görüntüleyebiliyorum. Ayrıca bir IFRAME içindeki SVG dosyasını görüntüleyebiliyorum. Ancak IMG etiketini kullanmıyoruz.

+0

Görsellerin arkasında tarayıcı, vektörleri oluşturmaya ve görüntü etiketiyle bitmap olarak işlem yapmaya devam eder, dolayısıyla aynı kısıtlamalar geçerlidir. SVG'nizin boyutları nedir? SVG'nizde gömülü data-uris var mı? – Duopixel

+0

Durumumda, işlenen SVG dosyasının boyutu, görünümün boyutlarından belirlenir. Bir iPhone'da, 600x600 gibi bir şey olurdu. Bir iPad'de, 1500x1500 gibi daha fazla olurdu. Hesaplarımda, bu boyutlar hala yukarıda yayınladığım sınırlara uyuyor. –

+0

Evet, bu boyutlar sizi belaya sokmamalı, dolayısıyla bunu atabilirsiniz. Ancak, bir vektör görüntüsü için 500 KB çok fazla, gömülü bitmap görüntüleriniz var mı? – Duopixel

cevap

7

Bazı boyutlarda test SVG dosyaları yaptım. Onlar şuna benzer: iPhone 5 ve 3. Nesil iPad taklit BrowserStack kullanma

<?xml version="1.0"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg width="2000" height="2000" xmlns="http://www.w3.org/2000/svg"> 
    <text x="100" y="100" font-size="50">2000x2000</text> 
</svg> 

, ben arıza noktası yerde 2200x2200 ve 2400x2400 piksel arasında olduğunu gördük. 5 megapiksel sınır, 2289x2289 olan bir görüntüye karşılık gelir, bu nedenle görüntülenen boyutun önemli olduğunu belirten Duopixel's comment ile uyumludur.

+0

Sadece genişlik/yükseklik değil toplam alan olması gerektiğine dikkati çekiyor çünkü 400 piksel boyunda bir SVG spritemap vardı ve 12.000 piksellik bir genişliğe sahipti, ancak 12.000 pikselin üzerine çıktığında kırdı. Kare format için yeniden biçimlendirdim ve 400px x 12,000px SVG ile aynı sonucu üreten 2886px x 2405px oldu. – Brian