SVG'nin "defs bloğu" dediğimiz şeyi elde ettiğimizde - daha sonra çizmek istediğimiz her şeyi tanımlayan SVG yığını - onu nereye koyacağız? Şimdiye kadar bunu doğrudan HTML'ye koyduk ve bu kesinlikle işe yarıyor. Sayfanın üst kısmında bırakırsak, açılış etiketinin hemen sonrasına diyelim :
Bu, SVG'yi destekleyen tüm tarayıcılarda harika çalışacaktır.
Bunu aşağı çekmek cazip gelebilir. Belki de simgeler sayfa için çok önemli değiller, sayfalarının sunması gereken gerçek içerik kadar hayati önem taşımıyorlar, bu nedenle simgeleri bunun yerine sayfanın alt kısmına taşıyoruz ve genellikle JavaScript'te yaptığımız gibi yüklenmelerini erteliyoruz. Bunu videoda denedik, ancak Safari'nin daha sonra denediğimiz simgeleri oluştururken sorunları var . Dürüst olmak gerekirse, diğer tarayıcılarda bu şekilde de tutarsız davranışlar veya çeşitli türler gördüm ve görünüşe göre manzara bu konuda biraz değişiyor. Yani şunu duydum: uygulaması zor bir şey. Belgelerinizde kusurları doğru şekilde tutmayı başarırsanız bloğu en üste koymak en güvenli yol.
Bu videoda tüm bunların bazı temel testlerine bakıyoruz ve ardından bu sistemi kullanan bazı gerçek dünya web sitelerine ve svg defs bloğunu nasıl / nereye eklediklerine bakıyoruz.
CodePen'de Chris Coyier (@chriscoyier) tarafından hazırlanan Pen 954e71cb5d5e79fb61d3c89bb3f21b8a'ya bakın.
Not
"SVG defs block" terimini seviyorum - sırf ona belirli bir amacı olan ancak gerçekten resmi bir adı olmayan bir şey diyebilmemiz için. Ancak her zaman gerçekten bir etiket kullanmanız gerekmez . S'yi kullandığınızda , bunlar kendi başlarına oluşturulmazlar ve gerçekten de içeride olmaları gerektiğini düşünmüyorum . SVG'de degradelerin tanımlarının aynı olduğunu ve içinde olsalar bile işe yaramayacağını duydum . Her şeye rağmen, hala "daha sonra kullanmak üzere tanımladığımız bir SVG kodu bloğu", bu nedenle muhtemelen buna "SVG defs bloğu" demeye devam edeceğim.