SVG Kalıpları Nasıl Kullanılır

SVG desenleri, şekil ve metinlerin dolgularını ve konturlarını renklendirmek için sahip olduğumuz çeşitli boyama seçeneklerinden biridir. Genel olarak daha karmaşık seçeneklerden biri olarak görülse de, bir temel oluşturmak ve temel sözdizimini anlamak, daha karmaşık görünen kalıpları çok daha elde edilebilir hale getirebilir.

SVG desenleri çok benzersiz tasarım fırsatları sağlar. Esasen, bir hedef şekil veya metin içinde, daha sonra tekrarlanan (veya döşenerek) düz renk dolguları ve konturları dışında daha ayrıntılı tasarım sağlayan bir tuval tanımlıyoruz.

Bu makalede, SVG kalıpları için temel sözdizimi ve öznitelik seçeneklerini tartışacağız ve daha sonra daha iyi anlamak için bazı örnekleri gözden geçireceğiz.

Arkaplan bilgisi

Başlamadan önce, bu makalenin satır içi SVG’nin nasıl çalıştığına dair temel bir bilgi birikimi olduğunu varsaydığını belirtmek önemlidir.

Dolgu Desenleri

Temel bir SVG modelinin sözdizimine bir göz atalım ve ardından belirli öznitelik seçeneklerini gözden geçirelim.

Bu kod, bir dikdörtgen içinde aşağıdaki kalıbı oluşturacaktır:

Daha sonra çağrılacak yeniden kullanılabilir tanımlar oluşturmamıza izin veren <svg>bir <defs>öğe içerir. Bu tanımların, strokeve/veya fill öznitelikleri içinde benzersiz kimlikleri kullanılarak başvurulana kadar görsel çıktıları yoktur.

Dikdörtgen, kalıbımızı tanımladığımız öğenin içinde <svg>, ancak dışında bulunur <defs>. Desen daha sonra “dolgu” özniteliği aracılığıyla dikdörtgene uygulanır:  `fill="url(#basicPattern)”`.

Öznitellikler

Çok sayıda SVG’ye özgü nitelik olmasına rağmen, bu makale temel SVG kalıplarını oluşturmak ve işlemek için gerekli olanlara değinecektir.

Belki de SVG kalıplarıyla ilgili olarak anlaşılması en önemli ve daha zorlu kavramlar, her bir kalıp detayının eşlendiği koordinatlardır, bu nedenle bu nitelikler aşağıdaki açıklamalarda özel olarak ele alınacaktır.

ID

Her desen , SVG şekillerinin veya metninin strokeve/veya fillnitelikleri aracılığıyla referans gösterilebilmesi için benzersiz bir kimlik gerektirir .

x,y, genişlik, yükseklik

<pattern>Öğe içindeki x ve y nitelikleri , desenin şeklin ne kadar ilerisinde başlayacağını tanımlar. <pattern>Öğe içinde kullanılan genişlik ve yükseklik, tahsis edilen desen alanının gerçek genişliğini ve yüksekliğini tanımlar.

Örneğin, <pattern>yukarıda atıfta bulunulan öğe aşağıdaki değerleri içerir: x="10" y="10" width="40" height="40”. Desen, x ekseninin başlangıcından 10 piksel, y ekseninin başlangıcından 10 piksel başlayacak ve esasen 40 piksel genişliğinde ve 40 piksel yüksekliğinde bir “tuval” oluşturacaktır.

Bu değerlerin hangi koordinat sistemi içinde uygulanacağının belirlenmesi patternUnitsve patternContentUnits nitelikleri içindeki değerler tarafından belirlenir.

Desen Birimler

patternUnitsÖzelliği, x, y, en, yükseklik başvurulan olan koordinat tanımlar. Buradaki iki seçenek userSpaceOnUseve  objectBoundingBox.

Modeller bağlamında kullanıldığında userSpaceOnUse, <pattern>(yukarıdaki örnekteki dikdörtgen gibi) “kontur” ve/veya “dolgu”ya atıfta bulunan öğe için koordinat sistemi tarafından belirlenen bir model koordinat sistemindeki sonuçların değeri .

Değeri objectBoundingBox, çoğaltmanın uygulandığı öğenin (desen hedefi) sınırlayıcı kutusu olarak x, y, genişlik ve yüksekliğin eşleme koordinat sistemini oluşturur.

Belirtilmezse varsayılan değer  objectBoundingBox.

Desen İçerik Birimler

patternContentUnitsÖzellik değerleri değerleri ile aynıdır patternUnits, objectBoundingBoxve userSpaceOnUsekoordinat sistemi şimdi örnek içeriklerinin üzere tanımlanan haricinde.

Bunun aksine patternUnits, bu değer belirtilmeden bırakılırsa varsayılan olarak “userSpaceOnUse” olur. Bu, bu niteliklerden biri veya her ikisi belirtilmedikçe, içinde çizilen şekillerin <pattern>, <pattern>elemanın kullandığından farklı bir koordinat sisteminde çizildiği anlamına gelir.

Bunu daha az zorlaştırmaya yönelik bir yaklaşım patternUnits=”userSpaceOnUse”, <pattern>öğe içinde tanımlamak olacaktır. Varsayılan patternContentUnitsolarak olarak ayarlanacak ve userSpaceOnUseher ikisinin de bir sonraki bölümde daha ayrıntılı olarak tartışacağımız aynı koordinat alanı içinde çalıştığından emin olunacaktır.

Ayrıca, öğede viewBox öznitelik koordinatlarını zaten belirttiyseniz, bu değerin hiçbir etkisi olmayacağına da burada dikkat çekmek gerekir <pattern> .

Kalıp Birimlerine Daha Yakından Bir Bakış

Kalıp birimleri , SVG kalıplarının hem en önemli hem de en karmaşık yönüdür. Belirtildiği gibi patternUnitsve patternContentUnitsvarsayılan olarak farklı değerlere sahip olduğundan, tutarlı bir şekilde konumlandırılmış bir desen alanı için birini diğeriyle koordine edecek şekilde ayarlamayı önemli hale getirir.

Ayar patternUnits=”userSpaceOnUse”, aynı koordinat sistemi içinde çalışmasını sağlar patternContentUnitsve çok daha basit bir seçenektir. Bu koordinat sistemi içinde ayarlanan hedef şekli/metni yeniden boyutlandıracak olursak, desen ek boşluğu doldurmak için tekrar edecektir.

Ayar patternContentUnits=”objectBoundingBox”ayrıca tutarlı koordinat alanı sağlayacaktır. Bu koordinat sistemi içinde ayarlanan hedef şekli/metni yeniden boyutlandıracak olsaydık, desen tekrarlamadan ek boşluğu dolduracak şekilde ölçeklenir. Bu sistem içerisinde uygun ölçekleme değerlerinin sağlanabilmesi için yüzde veya ondalık tabanlı sayılar olarak ayarlanmalıdır.

objectBoundingBoxAncak bir sistem içinde çalışmak zor olabilir. Bu alanda çalışırken bir takım hatalar var gibi görünüyor ve genel olarak ölçeklendirme fikri, tekrar eden, döşemeli bir desen kavramı için gerçekten doğru değil.

Referans için burada, objectBoundingBoxkoordinat alanı içinde ayarlanan temel bir modelin ayrıntılarına bir göz atın:

Biz olsaydı genişletmek widthve heightdesen başvuran hedef şeklin, daireler ölçeğe uygun; dikdörtgen içinde her zaman sadece dört daire olacaktır.

Boyutlandırma Üzerine Bir Not

SVG, model ve çok hızlı bir şekilde bunaltıcı hale gelebilecek SVG modellerinin oluşturulmasına dahil olan şekiller içinde belirtilmiş çok sayıda widthve heightdeğer var gibi görünebilir.

widthVe heightiçindeki <pattern>elemanı kendini tekrarlayan başlamadan önce desen gitmeli ne kadar tanımlar. Bu değerler esasen desen alanının tuval boyutunu belirler.

widthVe heightmodel şekilleri boyutlarını belirler, ancak boyutu geçemez içinde widthve heightiçinde bir dizi <pattern>elemanı; tarafından belirlenen sınırlardan daha büyük herhangi bir şeklin fazlalığı <pattern>oluşturulmaz.

Ek Örnek

Artık SVG model öznitelik seçeneklerini daha iyi anladığımıza göre, bu değer seçeneklerini daha fazla kullanan başka bir örneğe daha derinlemesine bakalım:

Boyutlar

SVG şeklimiz 200 piksele 200 pikseldir, “tuval” desenimiz 20 piksele 20 pikseldir ve desen şeklinin kendisi 10 piksele 10 pikseldir. Bu, 10 desen biriminin (20 piksele 20 piksel) şekle (200 piksele 200 piksel) sığmasını sağlar.

Her desen birimi içinde x ve y değeri 5 piksel olan bir dikdörtgen (10 piksele 10 piksel) vardır. Bu, her dikdörtgenin üst ve sol taraflarında <pattern> sınırların kenarlarından 5 piksellik bir dolgu olduğu anlamına gelir.

Şeklin kenarlığının görünmez olmadığından emin olmak için hem SVG şeklinin kendisi hem de desen soldan 2 piksel ve üstten 2 piksel başlar.

x ve y Değerlerini Değiştirme

Bu desen dikdörtgenini “tuval” (20px x 20px) deseniyle aynı boyuta ayarlarsak ve x ve y değerlerini “0” olarak ayarlarsak, SVG şekli düz morla doldurulur. Desenin içindeki şekil için “0”dan büyük x ve y değerleri eklemek, şekli uygun eksen boyunca desene iter ve herhangi bir taşma görünür olmaz.

Boyunca kullanılan değerlere bağlı olarak, desen içindeki dikdörtgende daha büyük bir x ve y değeri, widthve heightaynı olsa bile dikdörtgenin küçülüyormuş gibi görünmesine neden olabilir . Bunun nedeni, şeklin <pattern>öğe içinde ayarlanan sınırların ötesine hareket etmesidir ve daha sonra içindeki genişliği ve yüksekliği genişletirseniz <pattern>, şeklin görünüm dışında kesilen kısımlarını ortaya çıkaracaktır.

Aşağıdaki desen, mor desen şeklindeki farklı x ve y değerleri dışında, yukarıdaki dikdörtgendekiyle aynıdır: x="15" y="15”.

Desen dikdörtgenleri küçülmüş gibi görünüyor, ancak onu biraz daha aşağıya ve fazladan 10 pikselin üzerine ittik ve bir kısmını desen tuvalinden çıkardık.

İç İçe Desenler

Bir kalıbı başka bir kalıpla doldurmak da mümkündür.

Desen Olarak Yollar

Yollar, desenler içinde de kullanılabilir.

Metin Doldurma

Doldurma <text>, bir desenli bir şekil doldurulmadan çok benzerdir.

Tarayıcı Desteği

Satır içi SVG için tarayıcı desteği, Opera Mini’de destek olmamasına rağmen, modern masaüstü ve mobil tarayıcılarda güçlüdür.

Sonuç

Bu makalede, SVG kalıpları için temel sözdizimini inceledik, daha fazla özelleştirme için potansiyel özelliklerin anlamını inceledik ve daha sonra daha iyi anlamak için bazı örneklere daldık.

Umarım bu modellerin nasıl çalıştığına dair temel bir temel oluşturmak, daha karmaşık şekiller ve yollarla yeteneklerinin sınırlarını test etmeniz için size ilham verir.

Son güncelleme yapılmıştır.