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

 (hyvector.com)
3 puan yazan GN⁺ 2025-05-11 | 1 yorum | WhatsApp'ta paylaş
  • Vektör grafik işleri için ağır masaüstü uygulamalarını açmaya gerek kalmadan, Hyvector tarayıcıda SVG’leri saniyeler içinde düzenleyip dışa aktarma akışı sunuyor
  • Simge düzenleme, logo taslağı hazırlama, SVG path temizliği gibi hızlı işler hesap oluşturmadan veya büyük uygulamalar indirmeden anında yapılabiliyor
  • Tüm işlemler yerelde kalan gizlilik öncelikli bir yaklaşımla yürütülüyor ve hızlı açılış ile düşük bellek kullanımı hedefleniyor
  • Çift yönlü metin, karmaşık yazı sistemleri ve Arabic gibi bitişik karakterler için çapraz format shaping desteği sunuyor
  • Tek geliştirici, 5 yıl boyunca çekirdek altyapıyı oluşturduktan sonra, kararlı hale gelen çekirdek motorun üzerine global colors, dynamic stroke widths, variable fonts gibi özellikler ekliyor

Kurulumsuz SVG düzenleme akışı

  • Hyvector, doğrudan tarayıcıda çalışan bir SVG ve vektör grafik düzenleyicisidir
  • Dosyaları hızlıca açıp düzenledikten sonra grafikleri dışa aktarma iş akışına odaklanır
  • Hesap oluşturmadan veya büyük uygulamalar indirmeden kullanılabilir
  • Hızlıca halledilmeye uygun işler şunlardır
    • Simge düzenleme
    • Logo taslağı hazırlama
    • SVG path temizliği

Hafif çalışma ortamı ve gizlilik

  • Kurulum olmadan her yerden çalıştırılabilir
  • Hızlı açılış ve düşük bellek kullanımı hedeflenir
  • Tüm işlemlerin yerelde kaldığı gizlilik öncelikli bir yaklaşım kullanır

Düzenleme özellikleri ve geliştirme durumu

  • Tipografi desteği

    • Tam çift yönlü metin desteği sunar
    • Karmaşık yazı sistemlerini işleyebilir
    • Arabic gibi bitişik karakterler için çapraz format shaping desteği sunar

  • Vektör düzenleme araçları

    • Sürükle ve bırak tabanlı bir öğe ağacı görünümü sunar
    • Eğme, döndürme ve yeniden boyutlandırma dahil tam dönüşüm tabanı üzerinden path’leri hassas biçimde kontrol edebilir
    • Güçlü silgi modu içeren bir paint brush sunar

  • Tek geliştiricili proje

    • Başlangıçta hızlı bir yan proje olarak başladı, ancak vektör grafiğin karmaşıklığı nedeniyle 5 yıl sürdü
    • Çekirdek altyapı tamamlandı ve çekirdek motor kararlı hale geldi
    • Sıradaki özellikler arasında global colors, dynamic stroke widths ve variable fonts yer alıyor

İlgili okumalar

1 yorum

 
GN⁺ 2025-05-11
Hacker News yorumları

  • Harika. Benim yan projem bir C++ SVG rendering kütüphanesi, iyi bir SVG editörü bulmakta zorlanmıştım.
    Genelde Illustrator'da çalışıp üretilen markup'ı temizlemeye ya da https://www.svgviewer.dev/ gibi metin tabanlı bir editöre dönmeye kalıyordum.
    UX epey cilalı ve şimdiden baktığım diğer araçlardan daha fazla özelliği destekliyor. Referans olarak, benim projem https://github.com/jwmcglynn/donner, web tabanlı “editör” (şimdilik yalnızca kod tabanlı düzenleme yapılabiliyor) prototipi de https://jwmcglynn.github.io/donner-editor/ adresinde.
    SVG potansiyeli büyük ama araç eksikliğinden etkilenmiş bir alan; bu alanda yeni denemeler görmek sevindirici.

    • Inkscape'in sorunu ne? Biraz hatalı ama onun dışında gayet iyi çalışıyor.

  • İyi bir başlangıç. Eksik olduğunu hissettiğim bariz özellikler var.
    Node aracı, düzenleme sırasında başlangıç/bitiş düğümlerini birbirine snap etmeye çalışmalı; ilk oluştururken, özellikle kalem aracında snap mesafesi daha büyük tutulabilir.
    Düzenleme için node aracı yerine, Wick Editor'daki Flash/Futurewave SmartSketch tarzı çekme/itme deformasyonu gibi bir yaklaşım mobil için çok daha uygun olabilir.
    Çokgenlerde köşe yuvarlama çalışmıyorsa gizlenmeli ya da devre dışı bırakılmalı.

  • KDE'nin Karbon'u keşke böyle görünseydi. Yaklaşılabilir ama hızlı ve yetkin bir SVG editörü.
    Mümkünse SVG Path Editor0'daki özelliklerin de eklenmesi iyi olurdu. Örneğin mutlak koordinatları göreli koordinatlara çevirmek ya da her yolun çizgi ve eğrilerini ayrı ayrı düzenlemek gibi şeyler; bunları başka editörlerde bulamadım.
    Olsa harika olacak ama iş yükü çok büyük olabilecek ya da ayrı bir projeye dönüşebilecek bir özellik de animasyon.

    • “SVG Path Editor” adlı birkaç proje var; bunların içinde gördüklerim arasında en gelişmiş ve kullanılabilir olan bu.

  • İyi görünüyor. Eleştirmek için söylemiyorum ama editörlerde SVG'nin kendisinin yanlış soyutlama seviyesi olduğunu hep düşünmüşümdür. İstenen şey bir SVG editörü değil, bir vektör çizim programı.
    Elbette optimize edilmiş SVG olarak render etmeli, ama UI/UX'i path, clip path gibi SVG kavramları etrafında kurmak son kullanıcı için dostane değil. Inkscape'te beni hep rahatsız eden taraf da bu.
    Bence asıl güçlü özellik, Blender'daki modifier'lar (array, mirror vb.) gibi şeyleri vektör editörüne koyup non-destructive editing sağlamaktır.

    • Aslında bu aracın yönü de bu. Dahili bir nesne modeli var, ama şu anda SVG'den dahili modele eşleme neredeyse 1:1'e yakın.
      İlk istisna clip path; Hyvector'da bunu stroke ve fill'e, ayrıca o yolun dışında kırpılan içeriğe sahip bir path olarak ele alıyoruz. SVG'de clip path işleme epey zahmetli ve sezgisel değil.
      Geliştirmeye devam edebilirsem, path köşe yuvarlama, non-destructive boolean işlemleri, değişken stroke genişliği, birden fazla fill, distortion gibi özellikler sırada olacak.
      Ancak dışa aktarma formatını SVG olarak tutmak istiyorum. Web için gerçekten iyi ve CSS ile stillendirilebiliyor. Bu yüzden efektlerin gerçek SVG olarak dışa aktarılabilmesi gerekiyor; bazı editörlerin yaptığı gibi SVG'ye aktarırken sahte bitmap'i SVG'nin içine koyma yönteminden kaçınmak istiyorum. Örneğin konik gradyan, SVG bir gün destekleyene kadar olmayacak.
    • Inkscape'in LPE'si tam olarak bu. Non-destructive path modifier'ları. Graphite.rs editörü bazı açılardan non-destructive efektlere daha fazla odaklanıyor.

  • Bu ikonu düzenleyip oku dairenin merkezine koymaya çalıştım, ama mask düzgün tanınmadığı için yalnızca siyah daire göründü.
    http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink" width="20"
    height="20" viewBox="0 0 20 20" stroke-width="2" stroke="black">

    • Yukarıda yazdığı gibi maskeler ve filtreler henüz desteklenmiyor.
      Bu ikon için maskeden ziyade clip path daha uygun olabilir. Aynı şekilli ikonu yapmak istiyorsanız maskedeki öğeyi alıp Hyvector'a yapıştırdıktan sonra üzerinde çalışabilirsiniz.

  • Çok iyi. Web tabanlı editörleri seviyorum.
    İçe aktarılan SVG'deki tüm nesnelerin ve grupların doğru önizlemelerle net şekilde görünmesi hoşuma gitti.
    Eksik olan ya da bulamadığım iki özellik var. Çizgiyi şekle dönüştürmenin bir yolu var mı, SVG kodunu doğrudan elle ve canlı olarak düzenlemek mümkün mü merak ediyorum. Sıradan kullanıcı için fazla niş olabilir ama fill gibi bazı işlemleri kodla düzenlemek görsel araçlara göre çok daha kolay.
    Açık kaynak olarak yayımlama ihtimali olup olmadığını da merak ediyorum.

  • UX'i gerçekten beğendim. Wacom destekli Android tablette de gayet kullanılabilir.
    Spline düzenleme yöntemi, yani tek tek handle'ları ayarlamak yerine çizginin herhangi bir noktasını sürükleyip oynatabilme özelliği kendi icadınız mı yoksa başka bir yerden mi alındı bilmiyorum ama gerçekten hoşuma gitti.
    Soldaki ağaçta dokunarak kaydırmanın çalışmadığını gördüm; onun dışında çok akıcı. Klavye kısayollarını da uygulayıp uygulamadığınızı merak ediyorum.

    • Eğri sürükleme şaşırtıcı biçimde uygulanması kolay. Uygulama fikrini çok eski bir Google forum tartışmasından almıştım sanırım.
      Sürüklerken Shift'e basınca handle yönünü koruma da çalışıyor.
      Soldaki ağacı tüm cihazlarda doğru yapmak zor. Tıklama, dokunarak tıklama, sürükle-bırak, swipe ile kaydırma, dokunarak kaydırma vb. desteklenmeli ve aynı zamanda yüzlerce öğe içeriyormuş gibi davranmalı. iOS'ta swipe ile kaydırma ve biraz takılma gibi sorunlar hâlâ var ama listeye aldım.
      Klavye kısayolları mobil olmayan cihazlarda uygulanmış durumda. Menü çubuğundan bir menü açarsanız kısayollar menü öğelerinin sağında görünür.

  • Nasıl kullanacağımı çözemedim. Bir çizgi parçası oluşturdum ama taşımayı ya da boyutlandırmayı nasıl yapacağımı bulamadım; sürükleme handle'ları görünmüştü.
    Dikdörtgen ya da daire gibi başka şekilleri nasıl oluşturacağımı da bilmiyorum. Görünen düğmelerin neredeyse hepsine çeşitli sıralarla yirmi kez kadar bastım ama çoğunda hiçbir şey olmadı.

    • Şekil araçları ana araç çubuğunda metin aracı ile görüntü aracı arasında. İlk iki şekil seçeneği dikdörtgen ve daire.
    • Bu tür uygulamalarda araçların nasıl kullanılacağına dair bolca ipucu vermek ve bunları sonradan kapatılabilir yapmak faydalı olur.

  • Harika. Bu projenin başarılı olmasını umuyorum.
    İlk izlenim açısından birkaç geri bildirim verecek olursam, başlangıçta hemen kurcalanabilecek boş, başlıksız bir belge açıp ilk seçili araç olarak Bezier kalemi gibi eğlenceli bir araç seçmek nasıl olur diye düşünüyorum.
    Ben oraya buraya tıklayıp açık bir belge olmadığını fark edecek, sonra yeni belge oluşturup aracı değiştirerek oynamaya başlayacak kadar motiveydim; ama birçok kullanıcı bunu yapmaz. Özellikle açık belge olmaması en büyük engel gibi.
    Küçük görünebilir ama varsayılan tuvali biraz daha büyük yapmak iyi olur. Örneğin 512 ya da 500 kare civarı. Yeni bir aracı denerken insanların gerçekçi olarak verdiği süre yalnızca ilk 10-20 saniye; o sürede yakalayamazsanız giderler ve birçok kullanıcıyı kaybedersiniz.
    Çok iyi görünüyor, paylaştığınız için teşekkürler.

    • Katılıyorum. Harika görünüyor ama hemen kaleme basıp karalamak istediğimde hiçbir şey olmaması hayal kırıklığı yarattı.
      Yeni belge oluşturup kalemi denemeye çalışsam da hiçbir şey olmadı. Sonunda nasıl kullanılacağını çözemedim.
      Bezier aracıyla birkaç node ekleyebildim ama hiçbir araçla manipüle edemedim. Chrome/Windows'ta sürükleme tamamen bozuk olabilir mi?

  • Güzel ve çok potansiyel gösteriyor. Basit bir geri bildirim olarak, yüzen araç çubuğunu üste koymak dikkat dağıtıyor ve gerçek çizim alanını yiyor.
    Normal bir araç çubuğu olarak bırakmak ya da tuvalin altına yerleştirmek daha iyi olur. Ya da taşınabilir ya da katlanabilir yapılabilir.

    • Araç çubuğu zaten birkaç kez yeniden tasarlanıp taşındı. Pencere çok daralınca zaten katlandığı için, bir katlama düğmesi eklemek çok kolay olur gibi.