Kullanmak < muyum;ımg>, <object> veya <embed> SVG dosyaları için?

SORU

18 Aralık 2010, CUMARTESİ

Kullanmak < muyum;ımg>, <object> veya <embed> SVG dosyaları için?

Kullanmalıyım <img>, <object> <embed> yükleme SVG dosyaları içine bir sayfa bir şekilde benzer yükleme jpg, gif png?

Her mümkün olan en iyi şekilde çalıştığından emin olmak için kodu nedir?(Mime tipi de dahil olmak üzere ya da araştırmam içinde geri dönüş SVG render işaret için kaynaklar görmek ve sanat referans iyi bir devlet göremiyorum.

Modernizr ile SVG desteği için kontrol ve geri düşüyor (muhtemelen <img> düz etiketi ile yenilemeye)olmayan SVG uyumlu tarayıcılar olduğumu varsayalım.

CEVAP

19 Aralık 2010, Pazar

Bu konuyu kapsayan SVG Astar (W3C tarafından yayınlandı), tavsiye edebilirim: http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#SVG_in_HTML

Eğer <object> sonra kullanırsanız ücretsiz* raster geri dönüş olsun:

<object data="your.svg" type="image/svg xml">
  <img src="yourfallback.jpg" />
</object>

Bazı tarayıcılar hem kaynakları indir *) tam olarak değil, ücretsiz olarak, aşağıda Larry önerisi bu sorunun üstesinden nasıl bakın.

2014 güncelleme:

Eğer etkileşimli olmayan bir svg istiyorsanız, komut fallbacks ile <img> kullanın png sürümü (eski IE ve android < 3). Bir temiz ve basit işlemi yapmak için:

<img src="your.svg" onerror="this.src='your.png'">.

Bu kadar GİF resim gibi davranır, ve eğer tarayıcınız animasyonlar bildirimsel (İFADE) destekliyorsa, o zaman o oynayacak.
Eğer interaktif bir svg istiyorsanız, <iframe> <object> ya kullanın.
Eğer eski tarayıcılar svg bir eklenti kullanma olanağı sağlamak için gerekiyorsa, o zaman <embed> kullanın.
Css background-image ve benzer özellikleri svg modernizr geri dönüş görüntüleri geçiş için bir seçimdir, başka birden fazla arka planlar üzerinde bunu yapmak için otomatik olarak değişir
```
div {
    background-image: url(fallback.png);
    background-image: url(your.svg), none;
}
```
Not: birden fazla arka plan stratejisi çok kökenli ama svg. çünkü bunu destekleyen Android 2.3 üzerinde çalışmıyor