Desteklenmeyen Tarayıcıda Ölçeklenebilir Vektör Grafikleri (SVG) Ekleme
Bu dizinin daha önceki bir yayında, SVG'nin eski tarayıcılara sahip olduğu düşkünlüğünden ve grafiğe alternatif bir çözüm olarak sunmak için Raphael.js'nin kullanılmasından biraz bahsettik. Bu yazıda, bu konuya daha sonra bir göz atacağız.
Fikir basit, web sayfamıza grafik sunmak için birincil yöntem olarak SVG öğelerini kullanmaya devam edeceğiz, ancak aynı zamanda bir geri dönüş işlevi de sağlayacağız. böylece desteklenmeyen tarayıcılarda hala görüntülenebilir.
Elbette, atabileceğimiz birçok yol var, ancak daha iyi bir jenerik çözüm olduğunu düşündüğüm sadece iki çözüme bakacağız. Peki, nasıl yapabiliriz bakalım.
Nesne Öğesini Kullanma
Doğrudan bir HTML belgesine koymanın yanı sıra, SVG'yi gömmenin birkaç yolu vardır. Örneğin, grafiği saklarsak .svg dosyayı kullanabiliriz eleman.
Tanıtım amacıyla web sitemize SVG'li bir Apple logosu ekledik. Ancak, desteklenmeyen tarayıcılar boş kalacaktır. Sorunu çözmek için, bir Bitmap grafiğini aşağıdaki gibi sunabiliriz;
Bu şekilde, desteklenen tarayıcılar yine de .svg, süre desteklenmeyen tarayıcılar Bitmap grafiğini taşıyacak. Ekledik “png” hangi grafiğin teslim edildiğini izlemek için Apple logosunun altındaki işaret.
Ancak, diğer yazılarda belirttiğimiz gibi, Bitmap grafikleri SVG kadar esnek ve ölçeklenebilir değil. Öyleyse başka bir çözüme bakalım.
Modernizr Kullanımı
Kullanabileceğimiz diğer bir yöntem ise kullanmaktır. Modernizr. Bu JavaScript kitaplığına aşina olmayanlarınız için endişelenmeyin, bu konuyu ele almak için özel bir görevimiz olacak. Şimdilik, sadece bizi takip et.
Öncelikle gerekli bazı JavaScript kütüphanelerini hazırlayalım., Modernizr.js ve Raphael.js. O zaman, aynı zamanda .svg ReadySetRaphael.js bu aracıyla Raphael tarafından desteklenen bir biçimde dosyalayın ve çıktıyı ayrı bir yere kaydedin. .js dosya; hadi ismini verelim svg.js.
Modernzr.js dosyasını HTML belgesine dahil edin, şöyle yapın:
Ve diğer iki dosya için, Raphaël.js'nin ve svg.js, şartlı olarak yükleyeceğiz, yalnızca desteklenmeyen tarayıcılarda görüntülendiğinde.
Modernizr ile tarayıcı yeteneğini tespit edebiliyoruz, bu durumda tarayıcının SVG'yi gösterip gösteremediğini tespit edeceğiz ve değilse de betiğe hizmet vereceğiz:
if (! Modernizr.inlinesvg) document.write (''
