Yalnızca SVG Yeterlidir

• SVG, basit bir XML tabanlı vektör grafik biçimidir; neredeyse tüm platformlarda desteklenir ve gömülü scriptlerle etkileşimli görselleştirmeler oluşturabilir
• Geçmişte miselyum ağları araştırması için üretilen bir SVG görselleştirme aracının, 20 yıl sonra bugün bile modern tarayıcılarda kusursuz çalışması, biçimin dayanıklılığını kanıtlıyor
• Tek bir kendi kendine yeterli SVG dosyası ile veri yükleme, işleme, görselleştirme ve etkileşimin tamamı istemci tarafında gerçekleştirilebilir
• Anil’in “dört P”si (Permanence, Provenance, Permission, Placement) kavramıyla bağlantılı olarak SVG’nin kalıcılığı, sürüm kontrolü uyumluluğu, yetki ayrımı ve mekânsal ifade gücü vurgulanıyor
• Modern tarayıcıların hesaplama gücünün artmasıyla tüm veri analizi hattının SVG içinde uygulanabilmesinin yolu açıldı; bu da araştırma paylaşımı ve yeniden üretilebilirlik açısından önemli bir araç haline geliyor

---

SVG’nin potansiyeli ve bilimsel yayıncılığın ideali

• SVG, basit bir XML biçimindeki vektör grafiktir; her cihazda net görüntülenir ve gömülü scriptlerle etkileşimli içerik üretilebilir
  • Çoğu kullanıcının fark etmediği güçlü yeteneklere sahiptir ve bunlardan daha aktif yararlanılabilir
• Bilimsel makalelerin, veri keşfini ve deneylerin yeniden üretilmesini destekleyen tam etkileşimli bir ortam sunması gerektiği fikri ortaya konuyor
  • Bazı deneyler maliyet ve zaman kısıtları nedeniyle hemen yeniden üretilemese de, bilgisayar bilimi alanındaki makalelerde bu oldukça gerçekleştirilebilir

20 yıllık SVG görselleştirme aracının yeniden keşfi

• Cambridge Bitki Bilimleri Bölümü’nde doktora sonrası araştırmacı olarak çalışırken, miselyum ağlarının sinerji araştırması için SVG tabanlı bir görselleştirme aracı geliştirildi
  • Gerçek petri kaplarında büyüyen miselyum ağlarına ait verilerin keşfedilmesine imkân verecek şekilde tasarlandı
• Yakın zamanda ilgili SVG yeniden çalıştırıldığında, Firefox 1.5 veya Adobe SVG eklentisi gerektiren dönemden kalan kodun modern tarayıcılarda bile kusursuz çalıştığı görüldü
  • Bu, SVG biçiminin uzun vadeli uyumluluğu ve kararlılığını gösteren bir örnek

Tamamen kendi kendine yeten SVG’nin yapısı

• Tek bir SVG dosyası ile veri yükleme, işleme, görselleştirme ve etkileşimin tamamı gerçekleştirilebilir
  • Veriler harici bir sürüm deposundan alınabilir ya da dosyanın içine doğrudan gömülebilir
  • Tüm işlemler istemci tarafındaki tarayıcıda yürütülür ve sunucu tarafı mantığı gerekmez
  • Statik bir web sunucusunda kolayca dağıtılabilir ve paylaşılabilir

Anil’in “dört P”si ile bağlantısı

• Permanence (Kalıcılık): SVG, makale veya veri kümesi gibi DOI alabilir; 20 yıl önce oluşturulan bir dosyanın hâlâ çalışması bunu kanıtlıyor
• Provenance (Köken takibi): SVG metin tabanlı olduğu için Git gibi sürüm kontrol sistemleriyle uyumludur; harici veri kullanıldığında da aynı izleme stratejisi uygulanabilir
• Permission (Yetki yönetimi): Veri ile işleme mantığı ayrıldığı için, sıradan verilerle aynı yetki modeli uygulanabilir
• Placement (Mekânsallık): SVG, doğası gereği mekânsal bir ifade sunar; örneğin dünya haritası görselleştirmeleri üretmek kolaydır

Tarayıcı hesaplama gücündeki artış ve yeni olasılıklar

• 20 yıl önce üretilen SVG basit bir görselleştirme aracıydı; ancak modern tarayıcıların artan hesaplama gücü sayesinde artık tüm veri analizi hattı SVG içinde uygulanabilir
  • Dizüstü bilgisayarın fanını bile çalıştırmayacak kadar hafif işlem gücüyle bu mümkün olabilir

Araştırma paylaşım ekosisteminde SVG

• Jupyter not defterleri, Marimo botebooks, slipshow/x-ocaml kombinasyonu, Forester, kişisel notebook projeleri ile birlikte
  • SVG de araştırma sonuçlarının kolay paylaşımı ve yeniden birleştirilmesini destekleyen bir araç olarak ekleniyor
• Bu araçlar, işbirliğine dayalı ve yeniden üretilebilir araştırma ortamları kurmaya yönelik sürekli çabaların bir parçası

[GN⁺]

Hacker News yorumları

• Ana konu görselleştirme olsa da, daha önce dans koreografisi yazılımı yapmıştım
  Tüm UI’ı SVG olarak render etmiştim ve beklediğimden çok daha iyi çalışmıştı
  Projenin adı StageKeep; başlangıçta React Three Fiber ile yapılmıştı, sonra SVG’ye refactor edildi
  Signed Distance Function kavramından ilham aldım ve girdi alıp SVG çıktısı veren atomik fonksiyonlar fikrini sevdim
  • Bir zamanlar SVG’nin Flash alternatifi olarak öne çıktığı bir dönem vardı
    SVG + CSS + JavaScript ile Flash’ta yapılan hemen her şeyi yapmak mümkündü ama Flash kadar iyi içerik oluşturma araçları yoktu
    Sonunda Flash ortadan kalktı ve onun yerini tam anlamıyla dolduran bir şey de çıkmadı
  • Sitenin alt kısmında “Start free tiral” yazıyor; muhtemelen “trial” için bir yazım hatası :)
  • Sahne yönetmeni olarak koreografiyle çalışıyorum; böyle bir araçla sahne üzerindeki hareket düzenini önceden planlayabilmek gerçekten harika olurdu
  • Gerçekten harika bir proje. Acaba videodan yapay zeka ile koreografiyi otomatik çıkarma özelliği de mümkün olur mu diye merak ediyorum
    Mesela Project21 veya Avantgardey videolarından koreografiyi analiz edip içe aktarmak gibi
  • Acaba kendiniz de dans ediyor musunuz?
• SVG’nin bazı eksilerini derledim
  • Metin satır sonu desteği yok
  • Yazı tipi glifleri gömülemiyor — kullanıcının ilgili fontu yoksa okunamıyor
  • Tarayıcıya göre desteklenen sürüm ve özellikler farklılık gösteriyor
  • JS veya harici kaynak içerebildiği için güvenlik açısından izole ortamlarda görüntülemek zor olabiliyor
    Çözüm olarak, Inkscape için kaynak SVG ile metni eğrilere dönüştürülmüş dağıtım amaçlı SVG olmak üzere iki sürüm tutmak mümkün
  • Başka pek çok sorun da var
    Tarayıcılar arasında render sonucu farklı olduğundan tutarlı çıktı almak zor ve karmaşık SVG’lerde bellek sızıntısı ya da render performansı düşüşü ciddi olabiliyor
    Inkscape dışında Linux’ta doğru düzgün kullanılabilecek editör de neredeyse yok
    Buna rağmen alternatif olmadığı için hâlâ SVG kullanıyorum ama mümkün olduğunca sade tutmaya çalışıyorum
  • HTML’i <foreignObject> ile gömerseniz metin satır sonu mümkün oluyor
    SVG 2’de bunun inline-size özelliğiyle çözülmesi planlanıyor
    Font gömme için de <font> öğesi ya da WOFF’u data URI olarak ekleme yöntemi zaten mevcut
    Ama metin taban çizgisi veya ölçekleme denetimi gibi kısımlar hâlâ tamamlanmamış spesifikasyonlar durumunda
    İlgili belgeler: SVG2 InlineSizeProperty, SVG11 Fonts
  • Safari’de <style> içindeki @font-face ile base64 kodlanmış fontlar gömülebiliyor
    Ama dosya boyutunu büyüttüğü için tavsiye etmem
  • Metni eğrilere dönüştürmek seçilemez olma sorununu doğuruyor
    Safari’de <text> öğesiyle seçim yapılabildiğinden, aslında iki yaklaşımın da kusursuz bir çözüm olduğu söylenemez
• Bilimsel makalelerin etkileşimli bir ortamla birlikte sunulması ve okurun veriyi doğrudan manipüle edip deneyleri yeniden üretebilmesi fikrini seviyorum
  NVIDIA’nın Illustrated Evo2 blogu da etkileyiciydi
  • Meslektaşlarımın yazdığı CloudSpecs makalesini hatırlattı
    Tüm şekiller bir web sitesiyle bağlı ve DuckDB + WebR + ggplot ile tarayıcı içinde yeniden üretilebiliyor
    Örnek: Şekil 1 demosu
  • Deneyleri tarayıcıda yeniden çalıştırmak muhtemelen ancak modelleme temelli araştırmalarda mümkün olur
    Ama veriyi farklı açılardan keşfetmeye imkân vermek ilginç bir fikir
  • SVG yerine kullanılabilecek uygun bir format da pek yok
    PDF’nin etkileşim özellikleri sınırlı ve hem Word hem de PDF multimedya gömme konusunda zayıf
  • En azından GIF veya video eklenebilse bile büyük değer yaratırdı
  • SVG karmaşık render işlemlerinde zaman aldığı için etkileşimlilikle çok uyumlu değil
    Sadece vektör grafik gerekiyorsa PostScript de bir alternatif olabilir
• İki yıl önce “Spurious Correlations” projesini yenilerken Python ile doğrudan SVG grafik üreteci yazmıştım
  Mevcut JS/PHP grafik araçlarını (pCharts, HighCharts vb.) beğenmediğim için kendim yaptım ve şaşırtıcı biçimde iyi çalıştı
  Sadece matematikle temiz SVG üretilebiliyor ve sonsuz ölçeklenebilirlik de cabasıydı
  • JS grafik framework’ü arayanlara Observable Plot öneririm
    D3’ün yaratıcısının yaptığı bir araç; sade ve API kullanılabilirliği çok iyi
    Animasyon yok ama makale grafiklerinde fazlasıyla yeterli
  • Postscript’in daha yaygınlaşmamış olması üzücü
    Başka bir evrende belki de HTML veya SVG yerine standart Postscript olurdu
  • Siteniz sayesinde istatistik dersimin ilk gününde sahte korelasyon örneği olarak kullandım
  • Sektörün “kendin yaparsan batarsın” korkusunu bırakması gerektiğini düşünüyorum
• Distill’in ilk makalesi Augmented RNNs çok etkileyiciydi
  SVG üzerine D3.js ile minimum etkileşim eklenmiş bir örnekti; Shan Carter’ın tarzını ilk kez orada görüp ekibine katılmak istemiştim
• 15 yıl önce barbekü kontrolcüsü yapmıştım; 4 sıcaklık sensörü ve PID kontrol algoritması kullanıyordu
  Gömülü HTTP sunucusu üzerinden SVG tabanlı web UI ile sıcaklık grafikleri ve kadranlar gösteriyordu; JS ile birlikte gayet iyi çalışıyordu
  • Gerçekten çok güzel bir proje. Acaba çalışırken çekilmiş bir videosu var mı?
• Yazının yazarı olarak, bu düzenleme sırasında özellikle vurgulamak istediğim şey 20 yıllık SVG’nin hâlâ çalışıyor olması
  O dönemde yazdığım diğer kodların çoğunu düzeltmek gerekiyor ama SVG olduğu gibi duruyor
  • İlk dönemlerde tarayıcılar arası SVG uyumluluğu düşük olduğu için kullanmak zordu ama
    bugün 20 yıl önceki SVG’ler bile çoğu tarayıcıda sorunsuz çalışıyor
• SVG’yi seviyorum ama hız sorunları hâlâ var
  QR kodları veya karmaşık haritalar gibi 100’den fazla DOM öğesi olunca yavaşlıyor; animasyon da canvas veya Lottie’den daha yavaş
  • Bir keresinde satranç tahtası SVG’sinin içine satranç motoru gömüp kendi kendine oynatmıştım
    Proje bağlantısı
    Bir arkadaşımın sanat enstalasyonunda aynı anda onlarca satranç SVG’si yansıtıldı ve tarayıcının dayanabildiği sınır oldukça düşüktü
  • Ben de oyun için SVG+JS ile bir harita görüntüleyici yapmıştım ama nesne yoğunluğu artınca fazla yavaşladı; sonunda canvas’a geçtim
    Yine de bu süreçte SVG’nin bazı özelliklerini kaybettim
• 3D için SVG’ye benzer hafif bir format olup olmadığını merak ediyorum
  CAD modellerini görselleştirirken tüm .step dosyasını dışa aktarmadan yalnızca kısmi değişiklikleri yansıtmanın yolunu arıyorum
• Geçmişte Shapeoko v2 CNC montaj kılavuzu hazırlarken, kullanıcı bir parçaya tıkladığında çizimde ilgili parçanın vurgulanması için SVG kullanmıştım
  Örnek bağlantı
  Inkscape ile hazırlanmıştı ve tarayıcıda doğrudan çalışıyordu
  • Gerçekten çok hoş bir uygulama