Softonic

SVG Çizgi Deseni Oluşturucu

Adım 1 / 4
Sonraki

Düz çizgi desenleri, bir stok fotoğrafa yaslanmadan bir hero bölümünü, ayırıcıyı veya boş kartı doldurmanın en güvenilir yollarından biridir. Bu oluşturucu, iki renk, yapılandırılabilir bir çizgi genişliği ve bir döndürme açısıyla temiz, <pattern> tabanlı bir SVG çıkarır, böylece aynı dosya 320px bir mobil hero'dan 4K bir masaüstü banner'a kadar keskin şekilde ölçeklenir.

SVG çizgi deseni nasıl oluşturulur

  1. 1

    Tuval boyutunu ayarlayın

    İhtiyacınız olan genişlik ve yüksekliği girin: SVG bir viewBox kullanır, böylece sayfada yine de ölçeklenir.

  2. 2

    Çizgi genişliğini seçin

    Daha küçük değerler dar bir ince çizgi verir; daha büyük değerler tente tarzı bantlar verir.

  3. 3

    Açıyı seçin

    Yatay için 0, dikey için 90 veya klasik çaprazlar için 45 kullanın.

  4. 4

    İki renk seçin

    Ön plan ve arka plan hex değerlerini ayarlayın: saydam çizgiler de uygundur.

  5. 5

    SVG'yi kopyalayın

    Satır içine yapıştırın, .svg olarak kaydedin ya da SVG'den CSS'e dönüştürücü ile bir CSS arka planına bırakın.

Desen nasıl kurulur

SVG, iki çizgi boyutunda küçük bir <pattern> tanımlar, sonra tüm viewBox’ı kaplayan bir <rect>’i fill="url(#stripes)" ile doldurur. Desenler otomatik tekrarlandığı için tuval boyutunu değiştirmek çizgi kalınlığını değiştirmez, yalnızca kaç çizginin sığacağını değiştirir.

patternTransform="rotate(angle)", geometriyi yeniden hesaplamak zorunda kalmadan size çaprazları veren şeydir. Desen yine de her açıda kusursuz döşenir.

Çizgi genişliği kopya kâğıdı

Çizgi genişliği Görünüm Yaygın kullanım
2 - 6 px İnce çizgi Form arka planları, ince doku
10 - 20 px Dengeli çapraz Hero bölümleri, kartlar, ayırıcılar
30 - 60 px Cesur tente Açılış sayfası banner’ları, boş durum sanatı
80 px+ Poster ölçeğinde bloklar Uzaktan okunması gereken başlıklar

İpuçları

  • Desen metnin arkasında durduğunda kontrastı düşük tutun (örneğin #ffffff üzerine #f5f5f5).
  • 15, 30 ve 45 derecelik açılar, katı bir 0 veya 90’dan daha “tasarlanmış” hissettirir.
  • Çizgileri canlandırmak için <rect>’i bir <g> ile sarın ve döngüde öteleyin; desen döşendiği için sonsuz kaydırmayı bedavaya alırsınız.
  • Çıktı, harici referanslar olmadan saf SVG’dir, bu yüzden <script> etiketlerini çıkaran HTML veya e-posta şablonlarında satır içine almak güvenlidir.

Sık Sorulan Sorular

Evet. Çıktıyı bir .svg dosyası olarak kaydedin ve background-image: url(...) ve background-repeat: repeat ile referans verin ya da satır içi bir veri URL’si almak için onu SVG’den CSS’e dönüştürücüye besleyin.

Çaprazlar tarayıcı tarafından kenar yumuşatma yapılır. Saçaklanma görürseniz, çizgi genişliğini 1 - 2 piksel artırın ya da daha büyük bir PNG’ye rasterleştirip küçültün.

Renk seçiciler düz renkler üretir; bu yüzden bir şeridi saydam yapmak için çıktı SVG’sini düzenleyin: bir fill değerini none ya da #00000000 gibi alfa kanallı 8 haneli bir hex yapın. SVG’nin arkasındaki her şey böylece görünür.

Çıktı sizindir, bu, ticari markalı şekiller veya üçüncü taraf varlıkları olmadan, girdilerinize göre oluşturulmuş sadece işaretlemedir.

İki renginiz ile genişlik ve yükseklik yalnızca SVG önizlemesini oluşturmak için sunucumuza gönderilir; hiçbir şey saklanmaz veya günlüğe kaydedilmez ve hiçbir dosya yüklenmez.

İ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