Hyvector – Hızlı ve modern bir SVG düzenleyici

• Hyvector, SVG (Scalable Vector Graphics) görsellerini hızlı ve verimli şekilde düzenlemeye yönelik web tabanlı bir düzenleyicidir
• JavaScript desteği gerektirir ve düzgün çalışması için etkinleştirilmelidir
• Karmaşık kurulum veya yapılandırma olmadan doğrudan tarayıcı üzerinden erişilebilir
• Güçlü performansı modern tasarımla birleştirerek sezgisel bir kullanıcı deneyimi sunar
• Metin ya da kod düzeyinde SVG düzenleme yerine, görsel arayüz üzerinden rahat bir düzenleme ortamı sağlar

Başlıca avantajlar ve önemi

• Açık kaynaklı ve ticari SVG düzenleyicilerle karşılaştırıldığında hızlı tepki süresi ve modern bir UI sunar
• Web tabanlı yapısı sayesinde işletim sisteminden bağımsız olarak her yerden erişilebilir
• Hem tasarımcılar hem de geliştiriciler için etkili bir vektör görsel çalışma ortamı sunar
• Ayrı eklenti veya ek program kurma yükü olmadan hemen kullanılabilir
• Sezgisel düzenleme araçlarıyla SVG kaynaklarını kolayca oluşturmak ve değiştirmek mümkündür

[GN⁺]

Hacker News yorumu

• C++ SVG render kütüphanesini yan proje olarak geliştiriyorum ve hiç iyi bir SVG editörü bulamamıştım; bu yüzden genelde Illustrator kullanıp çıkan markup’ı temizliyor ya da metin tabanlı editör olan svgviewer.dev’i kullanıyordum. UX’in çok rafine görünüyor ve şimdiye kadar gördüğüm diğer araçlardan daha fazla özelliği şimdiden desteklemesi etkileyici. Benim projem donner da web tabanlı bir kod editörü prototipi sunuyor. SVG’nin potansiyeli büyük ama araçların sınırlarına takılıp kalmış bir alandı; burada yenilik görmek sevindirici.
  • Inkscape ile sorunun ne olduğunu merak ediyorum; birkaç bug var ama genel olarak iyi çalışıyor gibi geliyor.
• Başlangıç umut verici görünüyor. Bariz biçimde eksik birkaç özellik var: düğüm aracıyla düzenleme yaparken başlangıç/bitiş düğümlerinin birbirine kolayca snap olması güzel olurdu; özellikle kalem aracıyla çizerken snap mesafesi daha geniş olmalı. Wick Editor tarzı dönüşüm ve distort araçlarının mobil dostu olacağını düşünüyorum. Çokgende köşe yuvarlama çalışmıyorsa bu özelliğin gizlenmesi ya da devre dışı bırakılması daha iyi olur.
  • Tam da böyle geri bildirimler istiyordum, teşekkürler.
• Bu kadar yüksek seviyede kontrol sunması gerçekten hoşuma gitti; örneğin path ters çevirme gibi görsel olarak fark edilmeyen değişikliklerde bile kontrol verilmesi güzel. Ama ters çevirmenin uygulanıp uygulanmadığını anlamak zor, biraz geri bildirim iyi olurdu. Seçimi kopyalayınca kullanılan tüm fontların base64 olarak SVG içine gömülmesi dosyayı şişiriyor. SVG ile 1:1 eşlemeyi sürdürmeyi düşünüp düşünmediğini ya da bir soyutlama katmanı da değerlendirip değerlendirmediğini merak ediyorum. Ben hâlâ Figma’yı Vector Networks özelliği yüzünden kullanıyorum; içeride geçerli path verisine dönüşmesi gerekse de çok faydalı olurdu. Teknik olarak SVG render yaklaşımını benimsemiş olmanız şaşırtıcıydı, canvas tabanlı sanmıştım. Yakın zamanda SVG ile 3D nesneler render etmeyi denedim ve hızla performans sorunlarına çarptım ama sebebini henüz bulamadım. Eski cihazlarda stress test yaptınız mı, merak ediyorum.
  • Vector Networks’e (ben buna path graph diyorum) aslında boolean path işlemleri yaparken zaten sahip olduğum ara yapı olduğunu bir süre fark etmemiştim. Yakın zamana kadar Vector Networks’e şüpheyle bakıyordum ama son zamanlarda AI ile üretilen görseller çoğalınca, bitmap vektörleştirme çıktısı olarak harika olabileceğini düşünmeye başladım. Eklemek istediğim bir özellik ama önce yapılması gereken daha acil tonla iş var. Stress test yapmaya devam edeceğim; hatta 100 euroluk aşırı yavaş eski bir Android tablette de denedim. Hacker News gönderisini biraz anlık paylaştım, daha fazla test etmeliydim. Eskiden eski bir ThinkPad üzerinde hemen performans sorunlarını hissedebiliyordum ama IDE’ler giderek ağırlaştığı için artık bu mümkün olmuyor. Yine de eski cihazları elde tutup iyi çalışıp çalışmadığını kontrol etmeye çalışıyorum. Yorumlarda gelen tüm önerileri okuyup issue açmayı planlıyorum. Bu kadar çok faydalı geri bildirim gelmesine şaşırdım; yalnızca 5 upvote ve 2 kadar yorum bekliyordum. SVG render yaklaşımını seçmemin sebebi, kaydedilen SVG dosyasıyla render sonucunun tamamen aynı görünmesini istememdi. Overlay için Canvas ya da WebGL’yi de düşündüm ama şu anda çoğu görselde yeterince hızlı çalışıyor.
• Keşke KDE’nin Karbon’u böyle sezgisel ve hızlı bir SVG düzenleme aracı olsaydı diye düşündüm. Özellikle SVG Path Editor’ün sunduğu bazı özelliklere gerçekten ihtiyaç var (örneğin path koordinatlarını göreli değerlere dönüştürme, path içindeki eğri ve düz çizgileri ayrı ayrı düzenleme gibi) ama bunu başka hiçbir editörde bulamadım. Ayrıca çok büyük bir iş olsa da animasyon özelliği eklenirse harika olur.
  • SVG Path Editor adlı çok proje var ama burada bahsedilen yqnn.github.io projesi, şimdiye kadar kullandıklarım arasında en gelişmiş ve en kullanışlı olanı.
• Bu projenin kesinlikle başarılı olmasını istiyorum. İlk kullanıcı deneyimiyle ilgili bir önerim var: başlar başlamaz, insanların hemen oynayabilmesi için önceden oluşturulmuş bir “boş, adsız belge” sunulsa iyi olurdu; ayrıca örneğin Bezier pencil gibi eğlenceli bir araç da varsayılan seçili gelebilir. Ben birkaç kez tıklayıp ortada belge olmadığını anladıktan sonra yeni belge oluşturup aracı değiştirerek denedim ama çoğu kullanıcı burada takılacaktır. Ayrıca canvas’ın varsayılan boyutu biraz daha büyük olsa iyi olurdu (örneğin 512 ya da 500 kare). Gerçek şu ki insanlar yeni bir şeyi denerken 10-20 saniye içinde eğlenmezse hemen çıkıyor; onları o sürede yakalamak gerekiyor. Çok iyi yapılmış.
  • Katılıyorum. Ben de doğrudan pencil’a tıklayıp bir şeyler karalamaya çalıştım ama hiçbir şey olmadı, bu da hayal kırıklığı yarattı. Yeni belge oluşturduktan sonra da pencil yine çalışmadı. Sonunda nasıl kullanıldığını çözemedim. Bezier aracıyla düğüm ekleyebildim ama başka araçlarla bunları manipüle etmeyi başaramadım. Chrome/Windows üzerinde drag işlevi tamamen çalışmıyor gibi görünüyor.
• Nasıl kullanılacağını hiç sezemedim. Bir çizgi parçası oluşturabildim ama onu nasıl taşıyacağımı ya da yeniden boyutlandıracağımı bulamadım; sürükleme tutamaçlarını gösterebildim. Dikdörtgen ya da daire gibi başka şekiller oluşturmanın yolunu da hiç bulamadım. Düğmelere neredeyse 20’şer kez bastım ama hiçbir şey olmadı.
  • Ana araç çubuğunda, metin aracı ile görsel aracı arasındaki simge shape tool. İlk iki seçenek de dikdörtgen ve daire.
  • Bence böyle uygulamalarda kullanım ipuçları çok bol olmalı ve istenirse kapatılabilmeli.
• Bu aracı denerken çok eğlendim; çok hızlı ve sezgisel hissettiriyor. Özellikle zoom/pan performansı önceki araçlara göre açık ara daha iyiydi. Merak ettiğim bir şey, üretken iş akışlarına yönelik bir eklenti ya da API katmanı ekleme planınız olup olmadığı. SVG düzenlemeye scripting ya da AI tabanlı görsel efektler karıştıran kullanıcılar giderek artıyor; bu yüzden Hyvector’a mini dil ya da JS bridge gibi programlanabilir bir katman eklenirse çok daha güçlü olabilir. Yayını kutlarım; yaratıcı vektör çalışmasının önündeki eşiği düşüren yeni araçlar görmek her zaman sevindirici.
  • Teşekkürler. Son zamanlarda asıl işimdeki başka bir projede AI’yi ufak ufak denemeye başladım ve AI üretimi entegrasyonuna izin vermenin önemli olduğuna katılıyorum. AI ile vektör editörünü nasıl birleştirmek istediğinizi biraz daha ayrıntılı anlatabilirseniz sevinirim. Ben AI ile üretilen bitmap’leri vektörleştirme ve renklendirme kullanımını düşündüm ama onun dışında henüz pek kafa yormadım.
• Bu UX’i gerçekten sevdim. Wacom desteği olan bir Android tablette kullanımı çok iyiydi. Spline düzenleme yöntemi (yani tek tek handle’lar yerine çizgi üzerindeki rastgele bir noktayı sürükleyerek ayarlama) nereden geldi bilmiyorum ama kesinlikle iyi olmuş. Tek eksik, soldaki ağaç görünümünde touch scroll çalışmaması. Onun dışında çok akıcı. Kısayollar uygulanmış mı, merak ediyorum.
  • Eğriyi sürükleyerek düzenleme yöntemi aslında şaşırtıcı derecede basitti. Uygulama fikrini yıllar önce bir Google forum tartışmasından aldım. Shift’e basılı tutup sürüklerseniz handle yönü de korunuyor. Soldaki ağaç görünümünü tüm cihazlarda kusursuz yapmak zor; click, touch click, drag-and-drop, swipe scroll, touch scroll gibi her şeyi desteklerken aynı zamanda yüzlerce öğeyi iyi göstermek gerekiyor, yani karmaşık. iOS’ta hâlâ swipe scroll ve ufak takılmalar gibi sorunlar var, listeye ekledim. Klavye kısayolları mobil hariç destekleniyor; masaüstünde menü çubuğunu açarsanız öğelerin sağ tarafında görünüyor.
• Bizzat deneyince ilk izlenimim çok güçlü oldu. Özellikle UX konusunda çok memnun kaldım: pen tool sezgisel, nesne panelinde her katmanın önizlemesinin olması güzel, clipping path entegrasyonu iyi, text-to-outline dönüşümü ve boolean işlemler gibi nadir özelliklerin sunulması hoşuma gitti. Eleştirel geri bildirim olarak şunları ekleyebilirim: araçlar arasında geçiş için kısayollar olmalı ve tooltip’lerde görünmeli; Ctrl +/- ile zoom in/out, Space+drag ile pan desteklenmeli. Grup düzenlerken grup içindeki tek tek nesneleri seçmek zor; double click doğrudan node tool’a geçiyor ama bir group isolation mode olsa iyi olurdu. Pen tool kullanırken önceki noktanın kontrol noktalarını ayarlayabilmek gerekir. Pen modunda undo’nun path noktasını geri almak yerine yalnızca ondan önceki işlemi geri alması da kullanışsız. Metin desteği sınırlı; @font-face gibi gömülü fontlar görüntülenmiyor, filtre desteği de benzer durumda. SVG render ayrı bir şekilde yapıldığı için tarayıcının doğru çizemediği izlenimi oluşuyor.
  • Güzel geri bildirim için teşekkürler. Önümüzdeki birkaç gün gerçekten çok sayıda issue yazacakmışım gibi görünüyor. Dürüst olmak gerekirse Hacker News’e yazıyı koyarken sadece 5 upvote ve 2 yorum bekliyordum ama tepki çok büyük oldu. Grup içindeki tekil nesneleri seçmek için Ctrl + click kullanılabiliyor. Seçim mantığı henüz çok temiz değil ve daha da iyileştirmeyi planlıyorum ama şimdilik bu yöntem yardımcı olacaktır.
• Çok potansiyel görüyorum. Hızlı işlemler için araç çubuğunun canvas’ın üstünde görünmesi odak dağıtıyor ve çalışma alanını küçültüyor. Daha geleneksel bir araç çubuğu yerleşimi ya da canvas’ın altı daha iyi olabilir. Ya da araç çubuğu taşınabilir ve katlanabilir olsa iyi olur.
  • Teşekkürler. Araç çubuğunun tasarımını ve konumunu zaten birkaç kez değiştirdim. Pencere daraldığında otomatik katlanma özelliği zaten var; ayrıca elle katlama düğmesi eklemek de çok kolay.