Hyvector – Editor SVG yang cepat dan modern

• Hyvector adalah editor berbasis web untuk mengedit gambar SVG (Scalable Vector Graphics) secara efisien dengan cepat dan modern
• Membutuhkan dukungan JavaScript dan harus diaktifkan agar dapat berfungsi dengan normal
• Dapat langsung diakses melalui browser tanpa instalasi atau konfigurasi lingkungan yang rumit
• Menggabungkan performa kuat dan desain modern untuk menghadirkan pengalaman pengguna yang intuitif
• Bukan editor SVG berbasis teks atau level kode, melainkan lingkungan pengeditan yang nyaman melalui antarmuka visual

Keunggulan utama dan pentingnya

• Dibandingkan editor SVG open source maupun komersial, menawarkan respons yang cepat dan UI modern
• Karena berbasis web, dapat diakses dari mana saja tanpa bergantung pada sistem operasi
• Menyediakan lingkungan kerja gambar vektor yang efektif bagi desainer maupun pengembang
• Dapat langsung digunakan tanpa beban memasang plugin atau program tambahan terpisah
• Alat pengeditan yang intuitif memudahkan pembuatan dan modifikasi aset SVG

[GN⁺]

Komentar Hacker News

• Saya sedang mengembangkan library rendering SVG C++ sebagai proyek sampingan, dan belum pernah benar-benar menemukan editor SVG yang bagus, jadi biasanya saya memakai Illustrator lalu merapikan markup hasilnya, atau menggunakan editor berbasis teks svgviewer.dev. UX-mu terasa sangat polished, dan saya terkesan karena sudah mendukung lebih banyak fitur dibanding alat lain yang pernah saya temukan. Proyek saya, donner, juga menyediakan prototipe editor kode berbasis web. SVG punya potensi besar, tetapi selama ini terhambat keterbatasan tool, jadi saya senang melihat adanya inovasi di area ini.
  • Saya penasaran, apa masalahnya dengan inkscape? Memang ada sedikit bug, tapi rasanya secara umum cukup berjalan dengan baik.
• Awal yang bagus. Ada beberapa fitur yang terasa jelas masih belum ada: saat mengedit dengan node tool, akan bagus kalau node awal/akhir bisa mudah snap satu sama lain, dan khususnya saat memakai pencil tool, jarak snap sebaiknya lebih lebar. Saya juga rasa tool transformasi dan distorsi ala Wick Editor akan ramah untuk perangkat mobile. Kalau rounding sudut pada poligon belum didukung, mungkin lebih baik fitur itu disembunyikan atau dinonaktifkan.
  • Ini benar-benar jenis feedback yang saya harapkan, terima kasih.
• Saya sangat suka karena ada kontrol tingkat tinggi; misalnya, saya suka bahwa perubahan yang tidak tampak secara visual seperti pembalikan path tetap bisa dikendalikan. Namun, akan bagus kalau ada feedback agar lebih jelas apakah pembalikan benar-benar dijalankan. Saat menyalin seleksi, semua font yang digunakan tampaknya ikut disematkan ke SVG dalam bentuk base64 sehingga file membengkak. Saya penasaran apakah Anda akan terus berpegang pada pemetaan 1:1 dengan SVG atau juga mempertimbangkan abstraksi. Saya sendiri masih terus memakai Figma karena fitur Vector Networks, yang menurut saya akan sangat berguna meskipun mungkin perlu konversi internal ke data path yang valid. Saya juga terkejut secara teknis karena Anda memilih pendekatan rendering SVG; saya sempat mengira ini berbasis canvas. Baru-baru ini saya mencoba merender objek 3D dengan SVG dan cepat menemui masalah performa, meski belum menemukan penyebabnya. Apakah Anda pernah melakukan stress test di perangkat lama?
  • Selama beberapa waktu saya tidak menyadari bahwa Vector Networks (saya menyebutnya path graph) sebenarnya adalah struktur perantara yang sudah saya miliki saat melakukan operasi boolean path. Sampai baru-baru ini saya cukup skeptis terhadap Vector Networks, tetapi belakangan, karena banyaknya gambar hasil generasi AI, saya jadi berpikir ini akan keren sebagai hasil vektorisasi bitmap. Ini fitur yang ingin saya tambahkan, tetapi masih ada segunung hal yang lebih mendesak dalam prioritas. Saya juga akan terus melakukan stress test, dan saya sudah mencobanya bahkan di tablet Android tua super lambat seharga 100 euro. Postingan saya di Hacker News sebenarnya saya unggah secara spontan, dan seharusnya saya mengetes lebih banyak dulu. Dulu saya memakai mesin ThinkPad lama agar bisa langsung merasakan masalah performa, tetapi IDE kini makin berat sehingga itu tidak lagi memungkinkan. Meski begitu, saya tetap ingin menyimpan perangkat lama untuk memastikan semuanya masih berjalan dengan baik. Semua saran di komentar akan saya baca dan ubah menjadi issue. Saya terkejut karena begitu banyak feedback bermanfaat mengalir masuk; saya tadinya hanya mengharapkan 5 upvote dan sekitar 2 komentar. Alasan saya memakai pendekatan rendering SVG adalah karena saya ingin file SVG yang disimpan terlihat persis sama dengan hasil rendernya. Untuk overlay saya juga sempat mempertimbangkan Canvas atau WebGL, tetapi saat ini di sebagian besar gambar performanya sudah cukup cepat.
• Saya jadi berpikir, andai Karbon dari KDE bisa menjadi alat edit SVG yang seintuitif dan secepat ini. Saya terutama sangat membutuhkan fitur yang disediakan SVG Path Editor, seperti mengubah koordinat path menjadi nilai relatif, atau mengedit kurva dan garis lurus di dalam path secara terpisah. Namun, saya belum menemukannya di editor lain mana pun. Selain itu, meski ini pekerjaan besar, akan sangat bagus jika nantinya ada fitur animasi.
  • Ada banyak proyek bernama SVG Path Editor, tetapi proyek dari yqnn.github.io yang diperkenalkan di sini adalah tool paling maju dan paling layak pakai yang pernah saya gunakan sejauh ini.
• Saya benar-benar berharap proyek ini sukses. Ada satu saran terkait pengalaman pengguna awal: akan bagus kalau sejak awal sudah disediakan satu dokumen kosong tak bernama yang sudah jadi agar orang bisa langsung mencoba, dan misalnya tool yang menyenangkan seperti Bezier pencil otomatis terpilih. Saya sendiri sempat klik berkali-kali sebelum sadar bahwa belum ada dokumen, lalu membuat dokumen baru dan mengganti tool untuk mencobanya, tetapi kebanyakan pengguna mungkin akan langsung tersandung di sini. Selain itu, akan bagus kalau ukuran default canvas sedikit lebih besar, misalnya persegi 512 atau 500. Kenyataannya, saat mencoba sesuatu yang baru, kalau dalam 10–20 detik pertama tidak terasa menyenangkan, orang biasanya langsung pergi. Anda harus langsung menarik mereka dalam waktu itu. Ini dibuat dengan sangat baik.
  • Setuju. Saya langsung mengklik pencil untuk coba mencoret-coret, tetapi tidak terjadi apa-apa, jadi saya kecewa. Bahkan setelah membuat dokumen baru pun pencil tetap tidak berfungsi. Saya akhirnya tidak pernah berhasil memahami cara memakainya. Dengan tool Bezier saya bisa menambahkan node, tetapi saya gagal memanipulasinya dengan tool lain. Sepertinya fitur drag sama sekali tidak berfungsi di Chrome/Windows.
• Saya tidak benar-benar paham cara memakainya. Saya sempat membuat satu segmen garis, tetapi tidak tahu cara memindahkan atau mengubah ukurannya, dan saya bisa memunculkan drag handle. Saya juga sama sekali tidak menemukan cara membuat bentuk lain seperti persegi atau lingkaran. Saya menekan tombol hampir 20 kali, tetapi tidak ada yang terjadi.
  • Yang ada di toolbar utama, di antara text tool dan image tool, itulah shape tool. Dua opsi pertamanya adalah persegi panjang dan lingkaran.
  • Menurut saya, aplikasi seperti ini sebaiknya memberikan petunjuk penggunaan yang sangat banyak, dan pengguna bisa mematikannya jika mau.
• Saya sangat menikmati menguji tool ini karena terasa sangat cepat dan intuitif, terutama performa zoom/pan yang jauh lebih baik dibanding tool-tool lama. Satu hal yang saya penasaran adalah apakah ada rencana menambahkan plugin atau lapisan API untuk alur kerja generatif. Semakin banyak pengguna yang menggabungkan scripting atau efek visual berbasis AI ke dalam pengeditan SVG, jadi kalau Hyvector punya lapisan yang bisa diprogram seperti mini-language atau bridge JS, itu akan membuatnya jauh lebih kuat. Selamat atas peluncurannya; selalu menyenangkan melihat lebih banyak tool baru yang menurunkan hambatan untuk pekerjaan vektor kreatif.
  • Terima kasih. Belakangan saya mulai sedikit mencoba AI di proyek lain pada pekerjaan utama saya, dan saya setuju bahwa penting untuk memungkinkan integrasi hasil generasi AI. Akan bagus kalau Anda bisa menjelaskan lebih detail bagaimana Anda ingin menggabungkan AI dan editor vektor. Saya sendiri sempat memikirkan penggunaan seperti vektorisasi dan pewarnaan bitmap hasil AI, tetapi selain itu saya belum banyak memikirkannya.
• Saya sangat suka UX-nya. Ini sangat enak dipakai di tablet Android yang mendukung fitur Wacom. Saya tidak tahu dari mana ide metode pengeditan spline ini berasal—yakni menyesuaikan titik acak di atas garis dengan drag, bukan handle individual—tetapi jelas bagus. Satu hal yang agak disayangkan adalah touch scroll tidak berfungsi di tree sebelah kiri. Selain itu sangat mulus. Apakah shortcut keyboard sudah diimplementasikan?
  • Implementasi drag pada kurva ternyata cukup sederhana. Saya mendapatkan ide implementasinya dari diskusi forum Google lama. Jika menahan Shift sambil drag, arah handle juga dipertahankan. Tree di sebelah kiri sulit ditangani dengan sempurna di semua perangkat; karena harus mendukung klik, touch click, drag-and-drop, swipe scroll, touch scroll, dan juga tetap menampilkan ratusan elemen dengan baik, jadi ini cukup kompleks. Di iOS masih ada hal seperti swipe scroll atau sedikit lag, dan itu sudah masuk daftar saya. Shortcut keyboard tersedia di desktop, bukan di mobile, dan jika Anda membuka menu bar, itu ditampilkan di sisi kanan tiap item.
• Setelah mencobanya langsung, kesan awal saya sangat baik. UX-nya terutama memuaskan: pen tool intuitif, preview tiap layer muncul di panel objek, clipping path terintegrasi dengan baik, dan saya suka karena ada fitur yang jarang ditemui seperti konversi teks ke outline serta operasi boolean. Sebagai feedback kritis: akan bagus kalau ada shortcut untuk berpindah antar-tool dan juga ditampilkan di tooltip, dukungan zoom in/out dengan Ctrl +/-, serta pan dengan Space+drag. Saat mengedit grup, sulit memilih objek individual di dalam grup, dan double-click langsung berpindah ke node tool, jadi saya berharap ada mode isolasi grup. Saat memakai pen tool, seharusnya bisa menyesuaikan control point dari titik sebelumnya, dan di mode pen, undo terasa tidak nyaman karena yang dibatalkan bukan penambahan titik path melainkan aksi sebelumnya. Dukungan teks juga terbatas; font bawaan seperti @font-face tidak tampil, dan dukungan filter juga demikian. Karena rendering SVG dilakukan secara independen, sepertinya hasilnya tidak tergambar dengan benar di browser.
  • Terima kasih atas feedback yang bagus. Sepertinya dalam beberapa hari ke depan saya akan punya sangat banyak issue untuk ditulis. Sejujurnya, saat memposting ke Hacker News saya cuma berharap 5 upvote dan 2 komentar, tetapi responsnya sangat besar. Untuk memilih objek individual di dalam grup, Anda bisa memakai Ctrl + klik. Logika seleksinya memang belum rapi dan masih akan saya perbaiki, tetapi untuk sementara cara ini mungkin membantu.
• Saya suka karena terlihat punya banyak potensi. Sebagai feedback cepat, struktur toolbar yang muncul di bagian atas canvas agak mengganggu fokus dan mengurangi ruang kerja. Peletakan toolbar yang lebih umum, atau di bagian bawah canvas, mungkin lebih baik. Atau mungkin toolbar bisa dipindah dan dilipat.
  • Terima kasih. Desain dan posisi toolbar sebenarnya sudah beberapa kali saya ubah. Saat jendela menyempit, sebenarnya sudah ada fitur untuk melipatnya secara otomatis, dan menambahkan tombol lipat juga sangat mudah diimplementasikan.