SVG ile Yapılan Harika Şeyler

 (fuma-nama.vercel.app)
3 puan yazan GN⁺ 2025-04-13 | 2 yorum | WhatsApp'ta paylaş
  • SVG, basit bir ikon formatının ötesinde mask, path ve CSS animasyonlarını birleştirerek çizgi boyunca akan wire efektleri ve TOC vurguları oluşturabilir
  • Temel uygulama, line veya path ile oluşturulan çizgiyi doğrudan göstermek yerine, animasyon bloğunun görüntülenme alanını sınırlayan bir maske alanı olarak kullanma yöntemidir
  • Animated Wires, rect üzerine mask="url(#...)" uygular ve @keyframes ile translateY hareket ettirir; linearGradient ve CSS değişkenleriyle görsel stili genişletir
  • Fumadocs’un Clerk tarzı TOC’si, SSR uyumluluğu nedeniyle dış çizgiyi sunucuda render eder; aktif konumu gösteren thumb ise tarayıcı konum bilgileri kullanılarak istemcide render edilir
  • SVG <path> öğesinin d niteliği otomatik üretilmiş bir string değil, bir komut listesidir; bu yüzden sunucuda render edilmiş TOC dış çizgisiyle aynı biçimde bir maske görüntüsü istemcide yeniden oluşturulabilir

SVG Maskeleriyle Oluşturulan Animated Wires

  • Örnek kod, düz HTML değil JSX veya React söz dizimini temel alır
  • Temel çizgi SVG’nin line veya path öğesiyle oluşturulabilir
    • Örnekte, viewBox="0 0 50 50" içine dikey bir line yerleştirilir
  • Çizgiyi ekrana doğrudan çizmek yerine, başka bir şeklin görüneceği alanı sınırlamak için mask olarak kullanılır
    • rect üzerine mask="url(#line)" uygulanır ve mask içinde beyaz bir line bulunur
  • Hareket, rect üzerine CSS animation uygulanarak oluşturulur
    • @keyframes to-down, translateY(-10px) konumundan translateY(50px) konumuna hareket eder
  • Görsel stil; arka plan çizgisi, daha kalın maske çizgisi, linearGradient ve CSS değişkeni --height birleştirilerek genişletilir
    • @keyframes to-down-2, calc(var(--height) * -1) değerinden 100% değerine kadar hareket eder
  • Benzer efektlerin çoğu, animasyon bloğunu maskeyle kırpma yöntemini kullanır
    • Bazı tasarımlar Figma veya başka SVG düzenleyicilerinde oluşturulabilir
    • Unkey landing page’i bu yöntemin bir örneğidir

Fumadocs’un Clerk Tarzı TOC’si

  • Fumadocs içinde Clerk tarzı bir içindekiler tablosu (TOC) uygulanmıştır
  • SSR ile uyumlu olması için TOC dış çizgisinin, istemci JavaScript’i olmadan sunucuda render edilmesi gerekir
    • Sunucu, öğelerin kesin konumunu bilemez
    • Uygulama absolute konumlandırma kullanır; dış çizgiyi birden çok bileşen gibi render edip ardından bunları birleştiren bir yöntem izler
  • Aktif öğeye veya viewport içinde görünen heading’e karşılık gelen dış çizginin bir kısmı thumb olarak gösterilir
    • Thumb’ın animasyonlu olması gerektiğinden, yalnızca dış çizgi bileşeninin rengini değiştirmek yeterli değildir
    • Etkileşim hedefi olan thumb istemcide render edilir
  • Tarayıcıdan alınan konum bilgilerine dayanarak istemcide bir maske haritası oluşturulur
    • Bu maske haritasını oluşturmak için SVG kullanılır
    • SVG <path> öğesinin d niteliği bir komut listesidir ve noktaları birleştiren çizgileri render edebilir
    • İlgili belgeler MDN Web Docs’un SVG Paths sayfasında bulunabilir
  • Bu şekilde oluşturulan SVG, sunucuda önceden render edilmiş özgün TOC dış çizgisiyle aynı biçime sahip olur
  • Animated Wires’ta olduğu gibi, CSS mask-image içine SVG bir veri URL’si olarak yerleştirilir ve animasyonlu div bloğu maskelenerek vurgulanan thumb render edilir
    • İçteki div, width: 1, height: thumb.height, transform: translateY(${thumb.top}px), transition: "all 500ms", backgroundColor: "white" gibi değerler kullanır
  • React.js uygulaması toc-clerk.tsx kaynak kodunda görülebilir

İlgili okumalar

2 yorum

 
ndrgrd 2025-04-14

Havalı görünüyor ama mevcut öğelerden sadece birini net bir şekilde vurgulamak göze daha çok çarpıyor.
 
GN⁺ 2025-04-13
Hacker News yorumları

  • 8 yıl önceki bir materyal olsa da Sarah Drasner’ın ünlü “SVG Can Do That?” sunumu hâlâ birçok kişinin gözünü açıyor
    O zamandan bu yana CSS inanılmaz olgunlaştı; SVG’nin kendisi için aynı ölçüde mi emin değilim ama her hâlükârda şiddetle tavsiye ederim
    Slaytlar: https://slides.com/sdrasner/svg-can-do-that
    Video: https://youtu.be/ADXX4fmWHbo?si=6YPZkopyEDc8PSte

    • O kitap da çok iyi ama orada önerilen araçların hâlâ geçerli olup olmadığından pek emin değilim

  • SVG dosyalarıyla yapılabilecek eğlenceli şeylerden biri, inline DTD içindeki entity’leri kullanarak dosyanın çeşitli yerlerinde paylaşılacak sabitler tanımlamak
    Bunun harika bir örneğini David Ellsworth’ün “Squares in Squares” sayfasındaki SVG’de görebilirsiniz
    Başlıca tarayıcılarda sorun yok, ancak Inkscape gibi bazı araçlar DTD’yi parse etmiyor, entity’leri de açmıyor
    [0] https://kingbird.myphotos.cc/packing/squares_in_squares.html

    • Burada bahsedilen “entity” aslında &ref gibi entity referanslarıyla rastgele sözdizimsel içeriği tanımlayıp yeniden kullanmaya yarayan SGML/XML mekanizmasının adı
      SVG’de şekilleri, path’leri vb. defs altına koyup bir id vererek ana SVG içinde tekrar kullanma yöntemi var; bağlantı verilen sayfa da her SVG’nin içinde bu yöntemi kullanıyor gibi görünüyor
      Karelerin birden fazla çizim arasında paylaşılması söz konusu değil; çünkü her biri ayrı bir DOM olarak içeri giriyor
      SVG’nin ilk tasarımcılarının neden entity mekanizmasını geçici olarak yeniden uygulamaları gerektiğini düşündüğünü merak ediyorum
      Bu, kullanım noktasında render özelliklerinin override edilebilmesiyle ilgili olabilir; ayrıca o dönemde SVG, W3C’nin XHTML/XML’e geçiş akışı içindeydi, dolayısıyla tarayıcıların entity tanımlarını ya da belge prologue/DOCTYPE’unu yok sayacağı varsayımı da yerleşmiş olmayabilir
    • Bir şeyi kaçırıyor olabilirim ama o sayfada DTD’yi gösterecek !doctype ya da !element bulamadım
      Sadece SVG’nin defs ve use özelliklerinden bahsediliyorsa bu DTD değil
    • Mevcut bir SVG’nin başka bölümlerini çıkarıp sayfanın başka yerlerinde klonlayarak kullanmak da mümkün
      https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/E...
    • Tarayıcılarda çalışabilir, ancak birçok SVG aracı hizmet engelleme saldırısı riski nedeniyle DTD’yi yok sayar
      Örneğin Billion laughs attack var
      https://en.wikipedia.org/wiki/Billion_laughs_attack
    • O sayfanın 2022 model iPhone SE’de render edilmesi tam 5 saniye kadar sürdü

  • Nanda Syahrasyad’ın “A Deep Dive Into SVG Path Commands” yazısı, SVG path’lerinin nasıl oluşturulduğunu anlamak için gerçekten çok iyi
    Neredeyse 2 yıllık bir yazı ama SVG’nin neler yapabildiği ve bunu tam olarak nasıl yaptığı konusunda gözümü açtı
    [0] https://www.nan.fyi/svg-paths

  • SVG ile böyle eğlenceli işler yapan bir projede çalışmıştım
    React ile yapılmıştı; birkaç statik illüstrasyona animasyon öğeleri eklenmişti ve renkler CMS üzerinden kontrol ediliyordu
    Frontend, API’yi çağırıp doğru renklerin yer aldığı SVG görselini alıyor, animasyon da SVG öğelerini gizleyip göstererek yapılıyordu
    Bir örneği burada görebilirsiniz: https://web.archive.org/web/20221020133516im_/https://uncrow...

  • Macromedia Flash’ı gerçekten özlüyorum
    Flash ve SWF formatı gibi, ayrı indirme gerektirmeden yalnızca Flash Player ile sayısız indie oyun ve animasyon film deneyimlemeyi sağlayan bir teknoloji yoktu
    Giriş bariyeri de çok düşüktü
    SVG’nin de SWF’nin yaptığı her şeyi yapma potansiyeli var, ancak Flash benzeri bir editörü ya da ActionScript gibi sahne/nesne tabanlı bir kodlama yaklaşımı yok
    Tarayıcılar arasında garip farklılıklar da var; yalnızca basit SVG’lerin her yerde düzgün görüneceği garanti edilebiliyor

    • Hâlâ Adobe Animate olarak var ve HTML’ye dışa aktarabiliyor
      Zaten SVG ile Flash’ı karşılaştırmak elma ile portakalı karşılaştırmak gibi görünüyor
      SVG formatının Flash’ın yaptığı her şeyi doğrudan yapması gerekmiyor; tarayıcı içindeki diğer teknolojilere dayanabilir
    • WebAssembly’nin karşılaştırılabilecek taraf olduğunu düşünüyorum
      Örneğin Unity, Unreal ve Godot tarayıcı için oldukça kolay derlenebiliyor
      Sorun, bu uygulamaların epey şişkin olması ve genellikle tek haneli MB’lar yerine onlarca MB aralığına çıkmaya yatkın olması
    • Bunu yeniden yapmak için bir startup fırsatı var gibi görünüyor

  • Karmaşık animasyonlu SVG’lerle uğraşmak eğlenceli ama SMIL’in derinlerine girince Safari’nin kayan noktalı sayının başındaki tek bir 0 eksik diye telefonu kilitlemesi ya da türlü tuhaf şeyler yaşanabiliyor

  • JavaScript ile dinamik ve yaratıcı şekilde SVG üretiyorsanız ve iş arıyorsanız DM atabilirsiniz

  • SVG’de çizginin yoğunluğuna izin veren bir uzantı var mı merak ediyorum
    Kalemi kaldırıp indirebilen bir plotter’ım var ve SVG dosyalarıyla çalışıyor
    El yazısında sıkça yapıldığı gibi çizgi çizerken kalemi indirebilmek güzel olurdu
    Bu arada Evil Mad Scientist Labs’in Axidraw’ı; harika bir cihaz ve yapan insanlar da çok iyi

    • Standart bir SVG dosyası içinde özel yönergeler saklayıp bunları okuyucuda yorumlamak oldukça kolay
      Örneğin çok amaçlı bir lazer kesici/plotter kullanıyorum; opaklığı lazer gücü, çizgi kalınlığını hareket hızı, yeşil kanalı tekrar sayısı, mavi kanalı Z ekseni yüksekliği, kırmızı kanalı ise kalemi indirme ya da lazeri kapatma vb. için kullanıyorum
    • Muhtemelen bu tür şeyleri G-code ile yapmak daha iyi olur
      Bu tür işleri burada yapıyorum
      https://github.com/WillAdams/gcodepreview

  • Kendi ikonlarımı veya logolarımı yapmayı denemeden önce SVG’de transform bulunmasını hep garip bulurdum
    Eğrileri düzgün hizalamak zor
    İkinci logoyu bitirdiğimde fazla düz göründüğünü fark ettim ve 10° eğmek istedim; tüm o çizgileri ve eğrileri yeniden yazmayı düşününce döndürme çok daha iyi bir seçenek gibi göründü
    Neyse ki metnin yanına koyunca tuhaf durdu; bu yüzden kerning doğru görünsün diye açıyı birkaç kez daha değiştirdim

  • Yakın zamanda eğlence için küçük bir oyun yaptım; render için çoğunlukla CSS animasyonlu SVG tile’ları kullandım: https://pipeline-panic.vercel.app/