Softonic

SVG Izgara Oluşturucu

Adım 1 / 3
Sonraki

Izgara arka planı; tasarım araçlarının (Figma, Framer), geliştirici odaklı açılış sayfalarının (Linear, Vercel) ve bir plan veya milimetrik kâğıt hissi hedefleyen herhangi bir arayüzün vazgeçilmezidir. Aynı zamanda gönderebileceğiniz en hafif arka planlardan biridir, iki çizgili, genellikle 300 baytın altında, tekrarlayan bir <pattern>. Bu oluşturucu, ızgarayı herhangi bir hücre boyutunda, çizgi kalınlığında ve renkte kurar, böylece onu ince bir Figma tarzı ızgara veya cesur bir plan görünümü için ayarlayabilirsiniz.

Izgara nasıl kurulur

  1. 1

    Tuval boyutlarını ayarlayın

    Genişliği ve yüksekliği 50 ile 3.000 px arasında ayarlayın. Hücre boyutunun katı, kenarlardaki kısmi hücreleri önler.

  2. 2

    Bir hücre boyutu seçin

    5 ile 500 px arasında seçim yapın. İnce arka planlar için 20-40 px, milimetrik kâğıt için 8-12 px, belirgin tel kafesler için 60-80 px deneyin.

  3. 3

    Çizgi kalınlığı ve rengini seçin

    0.5-1 px çizgiler temiz çizgiler olarak okunur; 2+ px üzerine çizilmiş gibi görünmeye başlar.

  4. 4

    Arka planı ayarlayın

    SVG'nin üreteceği düz arka plan rengini seçin. Bir katman için SVG'yi kopyalayın ve kendi kodunuzda arka plan `<rect>` öğesini değiştirin veya kaldırın.

  5. 5

    SVG'yi kopyalayın

    İşaretlemeye yapıştırın veya döşenebilir bir background-image için bir CSS veri URL'sine satır içi alın.

Pattern öğesi

Her hücre, sağ kenarı ve alt kenarı çizen tek bir <path>’tir; bu döşemeyi tekrarlamak, tüm ızgarayı hücre başına dört değil yalnızca iki çizgi parçasıyla kurar:

<defs>
  <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
    <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#cccccc" stroke-width="1"/>
  </pattern>
</defs>
<rect width="100%" height="100%" fill="#ffffff"/>
<rect width="100%" height="100%" fill="url(#grid)"/>

Sihir, M 40 0 L 0 0 0 40 yolundadır: (40, 0)’da başlar, (0, 0)’a çizgi, (0, 40)’a çizgi. Bu, üst çizgiyi yalnızca sol üst köşeye kadar ve sonra sol taraf boyunca aşağı çizer, döşendiğinde, çift çizgiler olmadan eksiksiz bir ızgara oluşturur.

Desen boyutlandırma kılavuzu

Kullanım durumu Hücre boyutu Çizgi Renk hissi
Figma benzeri tuval 20-30 px 1 px #fafafa üzerine #e5e7eb
Milimetrik kâğıt 10-12 px 0.5 px #ffffff üzerine #cbd5e1
Plan (blueprint) 40-60 px 1 px #1e3a8a üzerine #bfdbfe
Tel kafes 80 px 1.5 px #ffffff üzerine #9ca3af
Retro terminal 16 px 1 px #000000 üzerine #22c55e

Ana + alt ızgaralar

İnce bir ızgara ve her N hücrede daha güçlü bir ana ızgaralı bir plan görünümü istiyorsanız, iki SVG arka planını üst üste yığın:

.grid {
  background:
    url("data:image/svg+xml,<svg>... ana ızgara ...</svg>"),
    url("data:image/svg+xml,<svg>... alt ızgara ...</svg>");
}

Tarayıcı her ikisini de tek boyamada birleştirir, performans kaybı yok.

Erişilebilirlik

Izgara tamamen dekoratiftir. Ekran okuyucuların ve içerik ayrıştırıcıların arka planı değil yalnızca asıl içeriği görmesi için onu bir sözde öğeye (::before ile position: absolute; inset: 0; z-index: -1;) uygulayın.

Sık Sorulan Sorular

Alt piksel genişliklerinde işlenen SVG çizgileri kenar yumuşatma yapabilir. Çizgi kalınlığını tam piksellere (1, 2) hizalayın ve piksel ızgarasıyla hizalanması için yolu 0.5 px kaydırın (1 px çizgiler için).

Bu oluşturucuyla değil. Altıgen ızgaralar, yüksekliğinin sqrt(3) katı kadar geniş bir döşeme ve yarım altıgen çizen bir yol gerektirir. Özel bir altıgen ızgara aracı kullanın veya Figma’da çizin.

Bu düzenleyici düz bir arka plan üretir. Bir katman için SVG’yi kopyalayın ve ilk arka plan <rect> öğesini kendi kodunuzda fill="transparent" yapın veya kaldırın.

Evet. SVG ızgaraları 200-500 bayttır, her DPR’ye keskin şekilde ölçeklenir ve rengi CSS değişkenleriyle değiştirmenize izin verir. Bir PNG ızgarası tipik olarak 5-20 KB’dir ve retina ekranlarda pikselleşir.

Düzenleyici SVG’yi oluşturmak için güncel boyutları ve renkleri sunucularımıza gönderir. Üç adımlı akışta bu ayarlar sayfa URL’sinde de bulunur. Gizli değer girmeyin; kaynak dosya yüklemesi veya kaydedilmiş proje yoktur.

İlgili Araçlar

Çizgili Kağıt Oluşturucu

Ücretsiz yazdırılabilir çizgili kağıt oluşturun. Kolej, geniş veya dar çizgi seçin, satır aralığını mm cinsinden ayarlayın, kağıt boyutunu ve bir kenar boşluğu çizgisi belirleyin, ardından yazdırın veya SVG olarak indirin.

Material Design Renk Seçici

Material Design renk paletini gezin. Herhangi bir tonu (50'den A700'e kadar) tek dokunuşla HEX, RGB veya HSL biçiminde kopyalayın.

Kareli kağıt oluşturucu

Çevrimiçi yazdırılabilir kareli kağıt oluşturun: kare veya nokta ızgarası seçin, aralığı mm cinsinden ayarlayın, A4 veya Letter ile özel bir çizgi rengi belirleyin, ardından yazdırın veya net bir SVG indirin.

Kanaviçe Şablonu Oluşturucu

JPEG, PNG veya WebP görselini 10–150 ilmek, 2–40 özel renk, semboller, kesin sayımlar ve kumaş ölçüleri içeren yazdırılabilir kanaviçe şemasına dönüştürün.

Fotoğraflardaki Yüzleri Çevrimiçi Bulanıklaştırın

Yüzlerin veya hassas ayrıntıların üzerine kutular çizin, ardından bulanıklaştırın, pikselleştirin ya da siyah kutuyla kapatın. İşlem tarayıcıda yapılır ve sonuç JPEG olarak indirilir.

Görüntü Formatı Dönüştürücü

Görselleri doğrudan tarayıcıda JPG, PNG veya WebP biçimine dönüştürün; kayıplı biçimlerde kaliteyi siz kontrol edin, PNG ve WebP'de şeffaflık korunur.

Araç diğer dillerde mevcuttur