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

Ek iyi bir okuma svg fallbacks this blogpost.

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • TechnoBuffalo

    TechnoBuffal

    8 HAZİRAN 2007
  • TeeMayneTV

    TeeMayneTV

    27 Kasım 2010
  • Utah Valley Online

    Utah Valley

    9 AĞUSTOS 2010