GIF Gibi Hissedilen SVG

 (koaning.io)
33 puan yazan GN⁺ 2025-07-09 | 1 yorum | WhatsApp'ta paylaş
  • Hareketli SVG görselleri, yüksek çözünürlüğü korurken çok küçük dosya boyutlarına sahip olur (49KB)
  • Geleneksel GIF’e benzer bir görsel etki sunar, ancak aslında SVG animasyonu özelliklerinden yararlanır
  • GitHub README.md dosyalarında da doğrudan kullanılabilir
  • asciinema ve svg-term-cli araçları kullanılarak terminal oturumu kaydedilip SVG animasyonuna dönüştürülebilir
  • SVG’nin animasyon öğeleri (<animate>, <animateTransform>, <animateMotion>) kullanılır

Hareketli SVG’lerin özellikleri

  • SVG ile oluşturulan hareketli görseller, klasik GIF’ler gibi görünür; ancak gerçekte SVG’nin vektör tabanlı animasyon yeteneklerini kullanır
  • Bu yöntemle dosya boyutu çok küçük kalır ve kalite kaybı olmadan yeniden boyutlandırma ile yakınlaştırma/uzaklaştırma yapılabilir
  • GitHub README.md gibi yerlerde doğrudan kullanılabilmesi büyük bir avantajdır
  • Örnek olarak, 49KB boyutunda yüksek çözünürlüklü hareketli bir parrot SVG tanıtılıyor

Nasıl yapılır

  • Terminal oturumu asciinema ile kaydedilir
  • Kaydedilen asciinema dosyası svg-term-cli aracıyla dönüştürülerek bir SVG animasyon dosyası oluşturulur
  • Oluşturulan SVG dosyası README.md’ye kolayca eklenebilir
  • Yazar, bu yöntemi bespoken dahil çeşitli projelerde aktif olarak kullanıyor

SVG animasyonunun çalışma mantığı

  • SVG spesifikasyonunda animasyon özellikleri zaten yerleşik olarak bulunur
    • <animate>: tek tek öznitelikleri zaman içinde animasyona dönüştürür
    • <animateTransform>: döndürme, ölçekleme, taşıma gibi dönüşüm animasyonları uygulanabilir
    • <animateMotion>: nesneyi bir yol boyunca hareket ettirir
  • svg-term-cli, SVG’nin bu yerleşik animasyon özelliklerinden yararlanarak çalışır

İlgili okumalar

1 yorum

 
GN⁺ 2025-07-09
Hacker News görüşleri

  • Sadece SVG ile gerçekten çok çeşitli ve etkileyici işler yapılabilmesine hayran kalmış durumda. Vikipedi'de bulunan örnekler arasında Missile Command klonu animasyonu, Londra metro haritası, rolling shutter animasyonu özellikle dikkat çekiyor

    • SVG'nin tarihsel olarak Shockwave/Flash Player'a açık bir rakip ve PDA'ler için bir uygulama formatı olarak başladığı belirtiliyor. Hatta ağ desteği eklenmesi de gerçekten düşünülmüş

    • Londra metro haritası'nın çok etkileyici olmasının sebebi, tekerlekli sandalye kullanıcıları gibi hareket kısıtlılığı olan yolcular için "merdivensiz istasyon" işaretlerinin bulunması. İlk füze örneğini görünce hemen programlayarak savaş başlıklarına tıklama fikrini düşünüp dünyayı kurtarmış gibi hissettiğini paylaşıyor

    • İlk Missile Command bağlantısının Safari'de neden düzgün çalışmadığını merak ediyor. Düğmelere tıklanabiliyor ama savaş başlıklarına tıklama tepki vermiyor. Firefox'ta artı nişangâh imleci bile görünürken Safari'de bir şeyler çalışmıyor

    • Metro haritasındaki checkbox işlevi çok hoş bir detay. SVG becerilerini daha da geliştirmesi için motive etmiş. Yer imlerine eklemiş

    • Başlığı görünce bunu README dosyasının hash'ini görselleştiren bir araç sanmış, ama böyle bir görselleştirme özelliğinin TOS ve EULA belgeleri sessizce değiştiğinde kullanıcıların bunu kolay fark etmesini sağlamasını umuyor

  • README'ye animasyonlu SVG gömüp bu SVG'nin hava durumu ve haftanın günü bilgisini günde bir kez güncellemesini sağlayan bir çalışma geliştirme deneyimini paylaşıyor. Referans. Aslında bu proje birkaç yıl önce jüri çağrısı döneminde yapılmış

  • Hedef Github README ise videoyu doğrudan gömmek de mümkün. Örnek olarak git-recent README bağlantısını paylaşıyor. Ancak sadece terminal kaydıysa, OP'nin SVG yaklaşımını kullanmak daha akıllıca bir seçim olabilir

    • Video kullanmanın iyi tarafı oynat/duraklat/kaydırıcı arayüzünün olması. Bazı platformlar GIF'lere de JavaScript ile kontrol arayüzü ekliyor ama tarayıcıda yerleşik destek olmadığı için bunun sınırları var. Bu yüzden sık sık videoyu tercih ettiğini söylüyor. RevealJS için SVG animasyonu yaparken ise gerektiğinde CSS/JS ile kontrol ediyor

    • Video dosyası eklenecekse, Github'da README'yi doğrudan düzenleyip yüklenen dosyanın githubusercontent üzerinde saklanması, depo boyutu açısından da daha iyi bir seçenek

    • SVG, açık/koyu tema kullanıcı ayarına göre renklere tepki verebilmesi bakımından videodan farklı. Ayrıca boyuta duyarlı da olabiliyor; video bunu yapamıyor. İlgili demo paylaşılmış. Ancak bu özellik de Firefox/Chrome'da iyi çalışsa da Safari'de hâlâ uygulanması zor ve bu da can sıkıcı

    • Paul'dan uzun zaman sonra söz açılmışken, önceki Echo Nest ve Rdio API çalışmalarına duyduğu sevgiyi ifade ediyor

    • Kendi görüşüne göre terminal kaydı için SVG yaklaşımı, kontrol özellikleri yetersiz olduğu için pek pratik değil. Yazılım demosu amacıyla 5 saniye civarında kısa hareketli anlatımlar için iyi olabilir ama ihtiyaca göre video daha iyi bir seçenek olabilir

  • Animasyondan doğrudan metin kopyalanabilmesi, beklenenden daha az sezgisel olsa da en havalı özellik gibi görünüyor

    • Animasyon mouse over sırasında duraklatılabilse ilgi daha da artar. Ancak terminal kayıyorsa kopyala/yapıştır özelliği kullanışlılığını azaltan zorlu bir taraf da var

  • Uyarı olarak, bazı SVG dosyalarını sayfayı kilitleyen hatalar var. Bu yüzden üçüncü taraf SVG bağlantıları gömmekten kaçınılması gerektiği söyleniyor. Google Chrome ve Firefox tarafının da bu hatayı düzeltme planı yok. Test amaçlı tehlikeli SVG örneği eklenmiş ama tıklanırsa tarayıcı çökebilir

    • Sayfanın ya da tarayıcının kilitlenmesi, güvenlik sorunundan çok çeşitli yerleşik işlevlerin kötüye kullanılmasından da kaynaklanabilen genel bir durum olabilir görüşü var. Örneğin blur filtre zinciri çok uzatıldığında render yükü nedeniyle Chrome'un kendisi bile kilitlenebiliyor. Eğer etki sekmenin dışına taşıyorsa bu daha ciddi, ama temelde bunun bir UI kullanılabilirlik sorunu olduğu düşünülüyor

    • Bu tür SVG açıklarının, örneğin XXE saldırılarının, Github README gibi kısıtlı ortamlarda da mümkün olup olmadığını soruyor. Eğer mümkünse bunun nasıl engellendiğini merak ediyor

  • "SVG'nin özünde animasyon olduğu" fikri ona çok taze geliyor ve çeşitli fikirler düşündürüyor. Sonsuz döngü desteklenip desteklenmediğini soruyor

    • <animate> etiketinin repeatCount ya da repeatDur niteliği indefinite olarak ayarlanırsa sonsuz tekrar mümkün. Bu, tek tek özellikler düzeyinde tekrar olduğu için görseldeki her öğe farklı periyotlarla hareket edebilir

    • SVG animasyonu resmi dokümantasyonu içindeki örnek kodu paylaşıyor

    • SVG'nin yalnızca öznitelik tabanlı animasyonla sınırlı olmadığı, içine Ecmascript (Javascript) de gömülebildiği ve gerektiğinde istenen her işlevin script ile eklenebileceği belirtiliyor. W3C script dokümanı referans verilmiş

    • SVG animasyonu örnek kodları ve demoları da paylaşılıyor. Bazıları sayfa yenilenince görülebiliyor

  • Bir gün tarayıcı standardı olarak WASM, JVM, CLR gibi hangi yürütme motoru olursa takılabildiği ve çıktının SVG (metin/ikili) olduğu bir sistem hayal ediyor. Geliştiricilerin yürütme modeliyle görünüm kombinasyonunu özgürce seçebildiği, DOM'a bağlı kalmayan yenilikçi bir gelecek umuyor

    • AutoCAD Web, Photopea, Figma, Google Docs, Google Earth Web, Flutter for Web(CanvasKit) gibi uygulamalar zaten buna yakın bir şekilde DOM'u by-pass ederek ya da başka render motorları seçerek çalışıyor. Yani sadece DOM'un dayatıldığı bir çağda olmadığımız söyleniyor

    • Geçmişte Flash, Java, Silverlight, ActiveX gibi üçüncü taraf çalışma zamanları web'e hâkimdi ama bugün ortak bir dil/platform ortamına sahip olmanın avantaj olduğu savunuluyor. Güvenlik tehditlerinin yoğun olduğu ortamda, eski tarz eklenti teknolojilerinin artık yaşamasının zor olduğu da vurgulanıyor

    • DOM'un (HTML) avantajı, farklı ekran ortamlarına duyarlı şekilde tasarlanmış olması. SVG'nin bu açıdan aynı esnekliğe sahip olmadığı belirtiliyor

  • Biraz absürt görünebilir ama SVG mimari diyagramlarını animasyonlu hâle getirip düğümlerin dramatik animasyonlarla, örneğin savaş animasyonu gibi büyüme, freeze frame ve parlayan çizgi efektleriyle sunulduğu videolar yapmak istiyor

  • Bu tür TIL tarzı gönderiler, yeni araçlarla ilgili doğrudan deneyim paylaşmaları ve Github Markdown kısıtlarını aşma yolları göstermeleri sayesinde yaratıcılığı ciddi biçimde tetikliyor. SVG çıktısını (örnek) görünce, satır içi SVG içinde yine satır içi SVG'nin iç içe geçtiği bir yapıyı ilk kez gördüğünü ve bunun çok taze hissettirdiğini söyleyerek teşekkür ediyor

    • Teoride, kendi kaynak kodunu editöre yazıyormuş gibi animasyon yapan bir quine SVG üretmenin de mümkün olabileceği fikri paylaşılıyor

  • Gerçekten harika bir fikir; bunu README'de terminaltexteffects ile üretilen efektlerle nasıl eşleştiğini test etmek istiyor. SVG hakkında çok bilgili olmadığını ama gerçekten metnin saklandığı bir yapıysa veri dosyasının oldukça büyük olabileceğinin farkında. Yine de eğlencesine denemek istiyor