Bu SVG defs bloğunu belgenin en üstüne koymak kesinlikle işe yarar. Herhangi bir HTTP isteğinin yapılmasının gerekmemesi gibi bazı avantajları da vardır, grafikleri çizmek için tüm bilgilerin doğru sayfada olması. Ancak bazı dezavantajları da var. Tüm bu bilgilerin, belgeden her sayfada tarayıcı tarafından ayrıştırılması gerekir. Diğer varlıklar gibi, istemci tarafından önceden önbelleğe alınmış olabilecek ayrı bir belge değildir. Ve önbellekten bahsetmişken, siteniz HTML'yi önbelleğe alıyorsa (genellikle iyi bir fikir), bu "sayfa önbelleği şişkinliğini" düşünebilirsiniz çünkü önbelleğe alınan her bir sayfa, sunucu önbelleğinin çok verimli bir kullanımı olmayan bu büyük tekrarlayan kod bloğunu içerir.
İyi haber şu ki , SVG defs bloğunu harici bir dosyaya taşıyabilir ve onu tıpkı bir resim veya başka bir varlık gibi kullanabiliriz.
O zaman onu kullandığımızda, dosya yolu şu şekilde öznitelikte olacaktır:
Bilmeniz önemli: Alanlar arası kısıtlamalar bu konuda zordur. CORS başlıkları bile benim deneyimimde size yardımcı olmayacak. Yani CDN'ler yok (CodePen'de bile oynatılamıyor ve kesinlikle bir file: // URL'de oynatılamıyor).
Bilmeniz gereken bir diğer önemli şey: Bunun çalışması için kesinlikle xmlns özniteliğine ihtiyacınız var. İçinde olduğu gibi, SVG defs bloğunuz şununla başlamalıdır:
Bir HTML5 belgesinde buna ihtiyacınız olmadığı izlenimine kapılmıştım (aynı şekilde türlerde türlere ihtiyacınız yok ), ancak belki de bu dosya artık bir HTML5 belgesinin sınırları içinde olmadığından ( dışarıdan referans olarak), buna ihtiyacınız var.
Bu nedenle bunun demosu burada.
Bilmek de aynı derecede önemli: IE'nin hiçbir sürümü bunu desteklemiyor (bu yayınlama sırasında 11'e kadar). Ancak, aslında ihtiyaç duyduğunuz SVG parçasına Ajaxing yaparak ve onu olması gereken yere yerleştirerek , onu desteklenen bir tür "normal" satır içi SVG haline getirerek, çalışmasını sağlamanın bir yolu var . Bunun çalışmasını sağlamak ve BrowserStack kullanarak Internet Explorer'da test etmek bizim için sıcak bir dakikamızı alıyor, ancak sonuçta anlıyoruz.
Dosyalar
- 16-svg4everybody.js
- 16-svg-defs-test.svg