SVG Izgara Desenli Arka Plan

Bir desen arka planı neyden oluşur

Üretilen dosya, desen olarak bir kez tanımlanan küçük bir kare ve tuvali bu desenle dolduran bir dikdörtgen içerir. Tarayıcı kareyi tekrar ettiği için dosya, ızgarada 20 ya da 2.000 hücre olsa da birkaç yüz bayt kalır. İlk dikdörtgen arka plan rengini boyar, ikincisi çizgileri üstüne çizer.

Her kare yalnızca üst ve sol kenarını çizer. Komşu kareler geri kalanı sağlar, bu yüzden hiçbir çizgi iki kez çizilmez. Bilmeye değer bir sonuç var: ilk sütun ve ilk satırdaki çizgi tuvalin tam kenarına denk gelir, bu yüzden çizgi kalınlığının yarısı tuvalin dışında kalır. 1 px’lik bir çizgi bu nedenle üstte ve solda ince bir yarım piksel kenarlık gibi görünür. Tuval genişliği hücre boyutunun tam katıysa, sağ ve alt kenarlar kapanış çizgisi olmadan biter.

Arka plan olarak işe yarayan değerleri seçin

Arka plan, üzerindeki metni desteklemelidir. Bu başlangıç değerleri güvenlidir:

Çizgiler ile arka plan arasındaki kontrastı düşük tutun. Üstünde gövde metni varsa, metne neredeyse yakın koyulukta bir çizgi okumayı yorucu hale getirir.

Çalışılmış bir örnek

1200 px genişliğinde ve 800 px yüksekliğinde bir kahraman bölümü için 40 px hücre 30 sütun ve 20 satır, yani 600 hücre verir. 1200 ve 800 ikisi de 40’ın katı olduğu için ızgara her iki kenarda da temiz biter. 50 px hücreyle 24 x 16 hücre elde edersiniz, o da temizdir. 45 px hücre sağda ve altta yarım bir hücre bırakır, çünkü 1200’ün 45’e bölümü 26,67’dir.

Sonucu kullanma

SVG’yi doğrudan işaretlemenize yapıştırın, dosya olarak kaydedin ve bir görsel gibi referans verin ya da içeriğinizin arkasına dekoratif bir katman olarak yerleştirin. Arka plan rengin SVG’nin bir parçası olduğunu unutmayın. Izgarayı farklı bir renk üzerinde istiyorsanız, kopyalanan kodda ilk dikdörtgeni düzenleyin.

Arka planı düzenle ile hizalama

İçerik sütununuz 960 px genişliğindeyse, 32 px ya da 40 px bir hücre hem ızgarayı hem sütun kenarlarını uyumlu tutar, çünkü 960 ikisine de tam bölünür. Izgarayı düzenle hizalamak, çizgilerin rastgele değil tasarlanmış görünmesini sağlar.