Softonic

SVG Ayırıcı Oluşturucu

Adım 1 / 3
Sonraki

Açılış sayfaları artık renkli bölümler arasında nadiren keskin yatay dikişlere sahiptir, birbirlerine kavisli bir dalga, açılı bir eğim, bir sıra üçgenle karışırlar. Bunların hepsi basit SVG şekilleridir: sayfa genişliğine göre boyutlandırılmış bir viewBox, sonraki bölümün arka plan rengiyle doldurulmuş bir çokgen veya yol, çıkan bölümün altına sabitlenmiş. Bu oluşturucu, bu şekli ihtiyacınız olan herhangi bir genişlik, yükseklik, renk ve dikey çevirme ile beş stilde (dalga, kavis, eğim, üçgenler, basamaklar) kurar.

Bölüm ayırıcı nasıl kurulur

  1. 1

    Bir stil seçin

    Dalga (S-eğrisi), kavis (tek kemer), eğim (çapraz), üçgenler (zikzak), basamaklar (kademeli).

  2. 2

    Genişlik ve yüksekliği ayarlayın

    Genişlik = sayfa genişliği (1200-1920). Yükseklik = ayırıcının ne kadar uzun olduğu (tipik olarak 50-200 px).

  3. 3

    Dolguyu seçin

    Ayırıcının ona kusursuzca karışması için sonraki bölümün arka plan rengini seçin.

  4. 4

    Dikey çevirin

    Aşağı yerine yukarı bakmasını istiyorsanız şekli ters çevirmek için flipY'yi açıp kapatın.

  5. 5

    SVG'yi kopyalayın

    Çıkan bölümün altına veya gelen bölümün üstüne yapıştırın. Şeklin görünüm alanıyla esnemesi için `preserveAspectRatio="none"` kullanın (zaten dahildir).

Beş stil ve ne zaman kullanılır

Stil Atmosfer Şunların arasında iyi
Dalga Yumuşak, dostça Hero → referanslar, pastel paletler
Kavis Temiz, zarif Özellik ızgarası → CTA, minimal tasarım
Eğim Modern, cesur Koyu hero → açık içerik, yüksek kontrastlı temalar
Üçgenler Keskin, teknik Geliştirici araçları, SaaS panoları
Basamaklar Yapılandırılmış, retro Fiyatlandırma tabloları, editöryel düzenler

İşaretlemenize bir ayırıcı bırakma

Bir bölümün altına tipik yerleştirme:

<section class="hero">
  <!-- hero içeriği -->
  <div class="divider" aria-hidden="true">
    <!-- SVG'yi buraya yapıştırın -->
  </div>
</section>
<section class="next">…</section>

.hero { position: relative; }
.divider {
  position: absolute; bottom: 0; left: 0; width: 100%; line-height: 0;
}
.divider svg { width: 100%; height: auto; display: block; }

Neden preserveAspectRatio="none"

Varsayılan olarak bir SVG düzgün şekilde ölçeklenir. Görünüm alanını kaplayan bir ayırıcı için şeklin yatay olarak esnemesini istersiniz, sayfada ortalanmış küçük bir dalga değil, kenardan kenara tek bir dalga. preserveAspectRatio="none", oluşturucuya en boy oranını serbestçe bozmasını söyler ki ayırıcıların tam ihtiyacı budur.

Erişilebilirlik ve SEO

  • Ekran okuyucuların dekoratif şekli atlaması için sarıcıyı aria-hidden="true" olarak işaretleyin.
  • SVG’yi birkaç kilobaytın altında tutun, büyük satır içi SVG’ler DOM ayrıştırmasını geciktirir. Buradaki çıktılar 1 KB’nin epeyce altındadır.
  • Ayırıcılar için raster görsellerden kaçının; ultra geniş monitörlerde ve retina ekranlarda pikselleşirler.

Sık Sorulan Sorular

Tam olarak değil. SVG’nin width özniteliği içsel boyutu belirler, ama preserveAspectRatio="none" ve CSS width: 100% ile şekil herhangi bir kapsayıcıyı doldurur. Genişliği 1200 gibi yuvarlak bir sayıya ayarlamak, yoldaki sayıları okunaklı tutar.

Bu genellikle SVG öğesinin varsayılan satır içi taban çizgisidir. Boşluğu kaldırmak için SVG’ye display: block (veya vertical-align: bottom) ekleyin.

Evet. Farklı renk ve saydamlıklarda iki ya da üç ayırıcı oluşturup üst üste yığın. Paralaks hissi için her birini margin-top ya da CSS transform ile birkaç piksel kaydırın.

Oluşturulan SVG statiktir. Animasyonlu dalgalar için sarıcıya bir CSS transform: translateX() keyframe’i uygulayın ya da yan yana iki kopya kullanıp kaydırın.

Hayır. Hiçbir şey saklanmaz, SVG her seferinde mevcut form değerlerinden yeniden oluşturulur.

İ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