2021 sonbaharında teknik tasarım belgesini yayınladığımdan bu yana LBSE (Layer Based SVG Engine) üzerinde çok şey değişti. WebKit'e entegre edilen motor, çalışıyor olsa da henüz varsayılan değil. Kullanıcıların MiniBrowser'da bir runtime ayarını etkinleştirmesi gerekiyor. 2021'den 2022 sonuna kadar LBSE, WebKit'e yama yama eklendi; yollar, şekiller, metinler, çokgenler gibi tüm SVG yapı taşları yeni tasarımda desteklendi. Ancak bu büyük hamleden sonra çalışmalar birkaç ay durdu ve 2023 ortasında Wix'in desteğiyle yeniden başladı. Nisan 2024'e kadar süren bu dönemde kırpma, maskeleme, filtreler, desenler, gradyanlar ve işaretçiler gibi ileri düzey boyama özellikleri eklendi. Bu özellikler, eski SVG motorunun aksine HTML ve CSS ile ortak mantık kullanılarak uygulandı. Ardından çalışmalar tekrar durdu; çünkü bu büyüklükte bir proje sürekli finansman gerektiriyor.
LBSE umut verici, ancak yerini kanıtlaması gerekiyor. Hedef hiçbir zaman 'SVG'yi hızlandırmak' olmadı. Eski SVG motoru, tarihsel nedenlerle ayrı bir boyama kodu, dönüşüm, kırpma ve maskeleme işleme sahipti; HTML/CSS motoruyla çok az kod paylaşıyordu. WebKit'teki GPU hızlandırmalı dönüşümler, animasyonlar ve hızlandırılmış kompozit işlemler gibi iyileştirmeler HTML/CSS motoruna giderken SVG bunların dışında kaldı. LBSE'nin asıl amacı, SVG'yi aynı mekanizmaya koyarak tüm bu iyileştirmeleri bir anda devralmasını sağlamak. Böylece SVG için ayrıca yeniden inşa etmek gerekmez.
Ancak ortak mekanizma genellik demektir ve genellik bedelsiz değildir. Eski motor, yirmi yıllık ince ayarlarla tek bir iş için optimize edilmişken, LBSE'nin HTML/CSS koduna cerrahi bir hassasiyetle entegre olması ve bu kodu en ufak şekilde bile geriletmemesi gerekiyor. Bu kod, WebKit'in en sıcak kodu ve her web sayfasını render ediyor; SVG özel durumlarını yerleşime ve boyamaya serpiştirmek bir seçenek değil. LBSE'nin ihtiyaç duyduğu her şey ya mevcut tasarıma uymalı ya da HTML ve CSS için de tasarımı iyileştirmeli.
Bir de nadir görülen durumlar var: HTML'de nadir olan dönüşümler SVG'de her yerde. Tipik bir web sayfasında birkaç dönüştürülmüş öğe bulunurken, SVG'de hemen her öğe dönüşüm taşıyabilir ve derinlemesine iç içe dönüşümler normdur. Ortak kod HTML düşünülerek yazıldığı için, bazı bölümlerin yeniden işlenmesi ve HTML için hiç gerekli olmayan hızlı yolların sıfırdan oluşturulması gerekiyor. Tüm bunlar HTML'i yavaşlatmadan yapılmalı.
LBSE önce eski motorun zaten iyi olduğu günlük render işlerinde rekabetçi olmalı; çünkü kimse statik bir ikonun boyanması uzun sürdüğünde motor değiştirmez. Donanım hızlandırma ve HTML/CSS motorundaki gelecekteki iyileştirmeler, ancak bu ilk eşik geçildiğinde bir kazanç sayılır. 2026'nın başında bu durum değişti: Igalia, LBSE'nin kendini kanıtlaması için yeni bir geliştirme döngüsüne yatırım yaptı. Amacımız, LBSE'nin performansını göstermek ve gömülü cihazlarda hızlandırılmış SVG motorunun geleceği olduğuna inanan yeni ortaklar bulmak.
Uzmanların Görüşleri
LBSE tasarlanırken temel fikir basitti: SVG, HTML ve CSS'nin kullandığı RenderLayer ağacını kullanmalıydı. Bu, donanım hızlandırmalı dönüşüm animasyonları, perspektif dönüşümleri ve z-index desteği gibi SVG'nin daha önce sahip olmadığı özellikleri getirdi. Hızlı ilerlemek için her SVG renderlayıcısına kendi RenderLayer'ını verdik. Bu, kolaylık sağladı: her öğenin bir katmanı varsa, mevcut katman ağacı çocukları sıralama, dönüşüm uygulama, kırpma ve kompozit işlemlerini zaten biliyordu. Ayrıca SVG'nin DOM yapısını birebir takip eden boyama sırası otomatik olarak garanti edilirken, z-index desteği de istenildiğinde bu sıradan sapmaya izin veriyordu.
Ancak bu yaklaşımın çok israflı olduğu başından beri biliniyordu. Her SVG öğesine ayrı bir katman vermek, özellikle büyük SVG dosyalarında bellek ve performans sorunlarına yol açıyordu. Bu nedenle LBSE'nin nihai tasarımı olmadığı açıktı. Yine de bu sayede SVG'nin yıllardır eksik olan özellikleri HTML/CSS ile aynı mekanizma üzerinde test edilebildi. 2024'teki uzun aradan sonra 2026'nın ilk yarısında LBSE'deki en köklü değişiklik yapıldı: katman sayısını azaltmak ve gereksiz katmanları kaldırmak. Bu değişiklik, motorun performansını ciddi şekilde artırdı ve varsayılan olma yolunda önemli bir adım oldu.
Teknik Analiz
Bir sonraki yazıda, bu değişikliğin ardından kalan zorlu problemleri ele alacağız. LBSE'nin başarısı, sadece teknik mükemmellik değil, aynı zamanda sürdürülebilir finansman ve topluluk desteği gerektiriyor. Igalia'nın bu yatırımı, SVG'nin geleceği için umut verici. Eğer LBSE performans hedeflerine ulaşırsa, gömülü cihazlardan web uygulamalarına kadar geniş bir alanda SVG kullanımını kökten değiştirebilir.
Kaynak: blogs.igalia.com
