SVG ile Yapılan Harika Şeyler

 (fuma-nama.vercel.app)
3 puan yazan GN⁺ 2025-04-13 | 2 yorum | WhatsApp'ta paylaş
  • SVG, web’de vektör grafikleri ifade etmek için güçlü bir araçtır
  • Animasyon, SVG öğelerini daha çekici hale getirebilir
  • Maske kullanarak SVG öğelerinin belirli kısımlarını vurgulamak veya gizlemek mümkündür
  • Sunucu tarafı render ile istemci tarafı JavaScript olmadan TOC uygulanabilir
  • CSS ve SVG birleştirilerek etkileşimli öğeler oluşturulabilir

SVG animasyonu

  • SVG, web’de vektör grafikleri göstermek için kullanılır
  • JSX(React) ile yazılmış örnek kod içerir
  • Çizgi oluşturmak için line veya path kullanılabilir; bunlar maske olarak kullanılıp animasyon eklenebilir
  • @keyframes ile animasyon tanımlanabilir ve transform özelliğiyle öğelerin konumu değiştirilebilir
  • Figma veya diğer SVG düzenleyicilerinde tasarlanan parçalar kullanılarak animasyon blokları maske olarak işlenebilir

Clerk tarzı içindekiler

  • Clerk tarzı içindekiler bölümü Fumadocs içinde uygulanmıştır
  • İçindekiler sunucuda render edilerek istemci tarafı JavaScript olmadan SSR ile uyumlu hale getirilmiştir
  • Öğelerin kesin konumunun bilinmediği sunucu ortamında, mutlak konumlandırma kullanılarak içindekiler render edilir
  • Etkin öğeyi vurgulamak için thumb adlı animasyonlu bir bölüm eklenmiştir
  • İstemcide render edilen konum bilgileri kullanılarak SVG ile bir "maske haritası" oluşturulur
  • mask-image özelliği kullanılarak animasyonlu div blokları maskelenir ve içindekilerin vurgulanan kısmı render edilir

Clerk’ten ilham alınarak belge sitesinin içindekiler bölümü daha ilgi çekici şekilde uygulanmıştır.

İ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 görüşü

  • Sarah Drasner’ın "SVG Can Do That?" sunumu, üzerinden 8 yıl geçmiş olmasına rağmen hâlâ birçok insanı şaşırtıyor. CSS o zamandan beri çok gelişti, ama SVG’nin kendisi konusunda o kadar emin değilim. Yine de şiddetle tavsiye edilir

  • Bir SVG dosyasıyla yapılabilecek eğlenceli şeylerden biri, satır içi DTD’de entity’leri kullanarak dosyanın farklı yerlerinde paylaşılabilecek sabitler tanımlamak. David Ellsworth’ün "Squares in Squares" sayfasında buna güzel bir örnek görülebilir

  • Karmaşık animasyonlu SVG’ler eğlenceli, ancak SMIL’in karmaşıklığı ve Safari’nin kayan noktalı sayıların başında 0 olmadığında sorun çıkarması gibi nedenlerle zorlayıcı olabiliyor

  • Nanda Syahrasyad’ın "A Deep Dive Into SVG Path Commands" yazısı, SVG path’lerinin nasıl oluşturulduğunu anlamak için çok faydalı. Neredeyse 2 yıl önceye ait olsa da, SVG’nin neler yapabileceği ve bunların nasıl yapılacağı konusunda insanın gözünü açıyor

  • JS’yi yaratıcı biçimde kullanarak dinamik SVG üreten biri varsa, bana DM atsın

  • React ile oluşturulmuş bir projede SVG ile eğlenceli işler yaptım. Bir dizi statik illüstrasyon ve bazı animasyonlu öğeler vardı; renkler ise CMS tarafından kontrol ediliyordu

  • SVG+CSS çok güçlü. Sevdiğim basit özelliklerden biri, JavaScript olmadan dark/light mode’a saygı duyan diyagramlar oluşturabilmek. Örnek diyagram: blog.davidv.dev/posts/ipvs-lb/

  • Çizgi yoğunluğunu destekleyen bir SVG uzantısı olup olmadığını merak ediyorum. Kalemi kaldırıp indirebilen, SVG dosyalarından çalışan bir plotter’ım var. Çizgi çizerken kalemi kademeli olarak indirebilmek güzel olurdu

    • Ah, bu Evil Mad Scientist Labs’in Axidraw’ı. Harika bir cihaz ve çok iyi insanlar

  • Harika bir gönderi, sitenin tasarımı da çok hoş. SVG uzun zamandır var, ama potansiyelinin hâlâ tam anlamıyla ortaya çıkmadığı hissi veriyor. HTML, CSS ve JS’yi işlevsel olarak kapsülleyebilen başka bir öğe düşünemiyorum. Temelde tamamen farklı bir HTML belgesi gibi kolayca kullanılabiliyor

  • SVG, çok az keşfedilmiş ve yeterince kullanılmamış bir alan gibi geliyor. Hayal gücüne bağlı olarak çok şey yapılabilir. Ancak birçok şeyi oldukça "hardcore" şekilde yapmak gerekebilir, yani kullanım senaryosuna bağlı