Softonic

SVG Dalga Oluşturucu

Adım 1 / 2
Sonraki

Kavisli dalgalar, her açılış sayfasının er ya da geç başvurduğu bölüm ayırıcılarıdır. Bu oluşturucu, pürüzsüz bir sinüs eğrisini örnekleyerek tek bir dolu <path> haline getirir, genliği, frekansı ve dikey konumu ayarlamanıza izin verir ve onu herhangi bir düz renkle boyar, sıfır ekstra CSS ile iki bölüm arasına yerleştirmeye hazırdır. Satır içi SVG kodunu kopyalayın ve doğrudan sayfanıza yapıştırın.

Bir SVG dalgası nasıl oluşturulur

  1. 1

    Rengi ayarlayın

    Renk seçiciyle dalga için herhangi bir düz dolgu rengi seçin.

  2. 2

    Genliği ayarlayın

    Daha derin bir kavis için genliği artırın (0 ila 150) ya da hafif bir dalgalanma için azaltın.

  3. 3

    Frekansı ayarlayın

    Genişlik boyunca 1 ila 8 döngü seçin. Daha fazla döngü, daha yoğun ve daha dalgalı bir desen demektir.

  4. 4

    Üst ya da alt seçin

    Altbilgi dalgası için dolguyu alt kenara, başlık dalgası için üst kenara sabitleyin.

  5. 5

    SVG'yi kopyalayın

    Satır içi SVG kodunu kopyalayın ve HTML'inize ya da bir CSS arka planına yapıştırın.

Dalgaların gerçekten işe yaradığı yerler

  • Renkli bir hero ile beyaz bir gövde arasındaki bölüm geçişleri, böylece göz sert bir çizgiye çarpmak yerine akar.
  • Kavisli bir üst kenarın bağlantıların koyu bloğunu yumuşattığı altbilgiler.
  • Tam bir arka plan görseli olmadan ince bir boyalı köşe isteyen fiyatlandırma kartları.
  • Alt kenardaki bir dalganın okuru içeriğe doğru yönlendirdiği hero banner’ları.

Yol anatomisi

Oluşturucu, bir sinüs eğrisini örnekleyerek 1440 x 320 viewBox içinde tek bir dolu <path> haline getirir:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none" width="100%" height="320"><path d="M 0,160 L 24,180 L 48,199 ... L 1440,320 L 0,320 Z" fill="#6366F1"/></svg>

Yol, sinüs dalgasını izleyen kısa düz segmentlerle genişlik boyunca ilerler, ardından düz dolguyu oluşturmak için alt kenara (ya da üst kenara) kapanır. Genliği artırmak tepe ve çukurları genişletir; döngü eklemek genişlik boyunca daha fazlasını sıkıştırır.

Duyarlı (responsive) yapma

  • SVG zaten preserveAspectRatio="none" ayarını içerir, bu yüzden dalga herhangi bir genişliği dolduracak şekilde esner.
  • width="100%" ile gelir; yüksekliği CSS ile (height: auto ya da sabit bir değer) zevkinize göre ayarlayın.
  • Derinlik için dalgaları üst üste yığmak isterseniz, kendi CSS’inize iki kopya koyun, mutlak konumlandırın ve her birine farklı bir renk ve saydamlık verin.

Erişilebilirlik

Dalgalar dekoratiftir. Ekran okuyucuların öğeyi atlaması için aria-hidden="true" ve role="img" ekleyin ve tüm anlamlı içeriği gerçek, komşu HTML öğelerinde tutun.

Sık Sorulan Sorular

Dolgunun CSS değişkenlerine tepki vermesini istediğinizde (koyu mod, temalandırma) SVG’yi HTML’inizde satır içine alın. Dalga tamamen dekoratifse ve tarayıcının onu ayrı önbelleğe almasını istiyorsanız background-image kullanın.

Evet. Bu, preserveAspectRatio="none" içeren vektörel bir <path> öğesidir, bu yüzden herhangi bir genişliğe tırtıklanmadan ölçeklenir, büyütüldüğünde bulanıklaşan bir raster görselin aksine.

Evet. Yolu bir SVG ile sarın ve d özniteliğini ya da CSS keyframe’leri aracılığıyla bir transform: translateX() değerini canlandırın. Hareketi ince tutun; otomatik oynatılan dalga animasyonları hızlı eskir.

Genellikle 1 KB’nin epey altında, çünkü tek bir dolgu rengine sahip tek bir yoldur. Bu, herhangi bir PNG eşdeğerinin çok küçük bir kısmıdır.

İlgili Araçlar

ASCII Tablosu Referansı

NUL, LF ve DEL dahil her kod için ondalık, onaltılık, sekizlik ve ikili değerlerle HTML sayısal karakter başvurusu gösterimini sunan tam ASCII tablosu.

HTML Karakter Referansı

HTML varlıklarının aranabilir listesi; adlandırılmış ve sayısal kodlarıyla birlikte özel karakter ve semboller için tek tıkla kopyalama.

FPS Sayacı

requestAnimationFrame ile tarayıcı FPS değerini ölçün: yumuşatma, en düşük ve en yüksek kare hızı, uyarı eşiği ve isteğe bağlı grafik. Yerel çalışır, yükleme ve API yoktur.

Klavye kısayolları başvurusu

macOS, Windows ve Linux’ta VS Code, Chrome ve GNU Readline kullanan Bash için belgelenmiş varsayılan kısayolları arayın.

Dosya Boyutu Dönüştürücü

Bayt, KB, MB, GB, TB ve ikili IEC birimleri (KiB, MiB, GiB, TiB) arasında, ondalık ve ikiliyi dilediğiniz gibi birleştirerek dönüşüm yapın.

E-posta Doğrulayıcı

Bir e-posta adresini doğrulayın: RFC 5322 sözdizimi kontrolü, canlı MX kaydı sorgulama, ayrıca yerel kısım, alan adı ve uzunluk bilgileri. Hiçbir e-posta gönderilmez.

Araç diğer dillerde mevcuttur