Hyvector – Editor SVG yang Cepat dan Modern
(hyvector.com)- Dalam pekerjaan grafis vektor, tanpa perlu membuka aplikasi desktop yang berat, Hyvector menyediakan alur untuk mengedit dan mengekspor SVG dalam hitungan detik langsung dari browser
- Pekerjaan cepat seperti mengubah ikon, membuat draf logo, dan merapikan path SVG bisa langsung ditangani tanpa membuat akun atau mengunduh aplikasi berukuran besar
- Semua pemrosesan tetap berada secara lokal dengan pendekatan mengutamakan privasi, serta menargetkan startup yang cepat dan penggunaan memori yang rendah
- Mendukung cross-format shaping untuk teks dua arah, sistem tulisan kompleks, dan huruf bersambung seperti Arabic
- Setelah seorang pengembang solo membangun fondasi inti selama 5 tahun, kini fitur seperti warna global, ketebalan garis dinamis, dan font variabel sedang ditambahkan di atas core engine yang sudah stabil
Alur pengeditan SVG tanpa instalasi
- Hyvector adalah editor SVG dan grafis vektor yang berjalan langsung di browser
- Berfokus pada alur kerja untuk membuka file dengan cepat, mengeditnya, lalu mengekspor grafis
- Dapat digunakan tanpa membuat akun atau mengunduh aplikasi berukuran besar
- Pekerjaan yang cocok untuk ditangani dengan cepat meliputi:
- Mengubah ikon
- Membuat draf logo
- Merapikan path SVG
Lingkungan eksekusi ringan dan privasi
- Dapat dijalankan dari mana saja tanpa instalasi
- Menargetkan startup yang cepat dan penggunaan memori yang rendah
- Menggunakan pendekatan mengutamakan privasi dengan semua pemrosesan tetap berada secara lokal
Fitur pengeditan dan status pengembangan
-
Dukungan tipografi
- Mendukung teks dua arah secara penuh
- Dapat menangani sistem tulisan kompleks
- Mendukung cross-format shaping untuk huruf bersambung seperti Arabic
-
Alat pengeditan vektor
- Menyediakan tampilan pohon elemen dengan metode drag-and-drop
- Memungkinkan kontrol path yang presisi berbasis transformasi penuh, termasuk skew, rotasi, dan pengubahan ukuran
- Menyediakan paint brush, termasuk mode penghapus yang kuat
-
Proyek pengembang solo
- Awalnya dimulai sebagai side project cepat, tetapi berjalan selama 5 tahun karena kompleksitas grafis vektor
- Fondasi inti sudah selesai dan core engine berada dalam kondisi stabil
- Fitur berikutnya seperti warna global (global colors), ketebalan garis dinamis (dynamic stroke widths), dan font variabel (variable fonts) sedang disiapkan
1 komentar
Komentar Hacker News
Keren. Proyek sampingan saya adalah library rendering SVG C++, dan susah mencari editor SVG yang bagus
Biasanya saya bekerja di Illustrator lalu merapikan markup yang dihasilkan, atau kembali ke editor berbasis teks seperti https://www.svgviewer.dev/
UX-nya cukup matang, dan bahkan sekarang sudah mendukung lebih banyak fitur dibanding alat lain yang saya cek. Sebagai referensi, proyek saya adalah https://github.com/jwmcglynn/donner dan prototipe “editor” berbasis web saya (saat ini hanya bisa mengedit lewat kode) ada di https://jwmcglynn.github.io/donner-editor/
SVG adalah bidang yang punya potensi besar tapi selama ini terdampak karena alatnya kurang bagus, jadi senang melihat ada upaya baru di area ini
Awal yang bagus. Ada beberapa fitur yang terasa jelas masih kurang
Alat node seharusnya mencoba snap node awal/akhir satu sama lain saat mengedit, dan saat pertama membuatnya, khususnya di alat pensil, jarak snap bisa dibuat lebih besar
Dibanding alat node untuk pengeditan, pendekatan deformasi tarik/dorong ala Flash/Futurewave SmartSketch di Wick Editor tampaknya akan jauh lebih ramah untuk mobile
Jika pembulatan sudut pada poligon tidak berfungsi, sebaiknya disembunyikan atau dinonaktifkan
Saya berharap Karbon dari KDE tampil seperti ini. Ini editor SVG yang ramah, cepat, dan kompeten
Kalau memungkinkan, akan bagus juga jika fitur yang ada di SVG Path Editor0 ikut ditambahkan. Misalnya mengubah koordinat absolut menjadi koordinat relatif, atau mengedit garis dan kurva tiap path secara individual, hal-hal seperti itu yang belum saya temukan di editor lain
Fitur yang akan luar biasa jika ada, meski mungkin butuh pekerjaan sangat besar atau bahkan jadi proyek terpisah, adalah animasi
Kelihatannya bagus. Bukan bermaksud mengkritik, tapi saya selalu merasa bahwa di editor, SVG itu sendiri adalah target dengan tingkat abstraksi yang salah. Yang diinginkan orang bukan editor SVG, melainkan program menggambar vektor
Tentu hasilnya harus dirender menjadi SVG yang optimal, tetapi jika UI/UX dibangun di sekitar konsep SVG seperti path dan clip path, itu tidak ramah bagi pengguna akhir. Itu juga yang selalu mengganggu saya di Inkscape
Menurut saya fitur yang benar-benar kuat adalah memasukkan modifier ala Blender (array, mirror, dll.) ke editor vektor untuk memungkinkan pengeditan non-destruktif
Pengecualian pertamanya adalah clip path, yang di Hyvector diperlakukan sebagai path dengan stroke dan fill, plus konten yang terpotong di luar path tersebut. Penanganan clip path di SVG sendiri cukup merepotkan dan tidak intuitif
Jika saya bisa terus mengembangkannya, fitur seperti pembulatan sudut path, operasi boolean non-destruktif, lebar stroke variabel, banyak fill, dan distorsi akan menyusul
Namun saya ingin tetap mempertahankan SVG sebagai format ekspor. Itu sangat bagus untuk web dan bisa di-styling dengan CSS. Jadi efeknya harus bisa diekspor sebagai SVG sungguhan, dan saya ingin menghindari cara beberapa editor yang saat ekspor ke SVG justru menyisipkan bitmap palsu di dalam SVG. Misalnya, gradient kerucut tidak akan ada sampai SVG mendukungnya suatu hari nanti
Saya mencoba mengedit ikon ini untuk menaruh panah di tengah lingkaran, tetapi mask tidak dikenali dengan benar sehingga yang terlihat hanya lingkaran hitam
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">
Untuk ikon ini, clip path mungkin lebih tepat daripada mask. Jika Anda ingin membuat ikon dengan bentuk yang sama, ambil elemen di dalam mask, tempel ke Hyvector, lalu kerjakan dari sana
Sangat bagus. Saya suka editor berbasis web
Saya suka bahwa semua objek dan grup dari SVG yang diimpor terlihat jelas, lengkap dengan pratinjau yang benar
Ada dua fitur yang mungkin belum ada atau belum saya temukan. Apakah ada cara mengubah garis menjadi bentuk, dan apakah kode SVG bisa diedit langsung secara real-time dengan tangan? Mungkin ini terlalu niche untuk pengguna umum, tapi beberapa pekerjaan seperti fill jauh lebih mudah diedit lewat kode daripada alat visual
Saya juga penasaran apakah ada kemungkinan ini akan dirilis sebagai open source
Saya sangat suka UX-nya. Bahkan di tablet Android dengan dukungan Wacom ini sangat bisa dipakai
Saya tidak tahu apakah cara edit spline ini, yaitu bisa menarik dan memindahkan titik sembarang di garis alih-alih mengatur handle satu per satu, adalah ide buatan sendiri atau diambil dari tempat lain, tetapi saya sangat menyukainya
Saya hanya melihat scroll sentuh di tree sebelah kiri tidak berfungsi, selain itu semuanya sangat mulus. Saya juga penasaran apakah shortcut keyboard sudah diimplementasikan
Menahan Shift saat menarik untuk mempertahankan arah handle juga sudah berfungsi
Tree sebelah kiri sulit sekali dibuat benar di semua perangkat. Harus mendukung klik, sentuhan untuk klik, drag-and-drop, swipe scroll, touch scroll, dan pada saat yang sama tetap terasa seperti memuat ratusan elemen. Masih ada masalah seperti swipe scroll di iOS dan sedikit lag, tapi sudah saya masukkan ke daftar
Shortcut keyboard sudah diimplementasikan di perangkat non-mobile. Jika Anda membuka menu di menu bar, shortcut akan terlihat di sisi kanan item menu
Saya tidak berhasil memahami cara memakainya. Saya membuat sebuah segmen garis, tetapi tidak bisa menemukan cara memindahkan atau mengubah ukurannya, meski handle drag memang muncul
Saya juga tidak tahu cara membuat bentuk lain seperti persegi panjang atau lingkaran. Saya sudah menekan hampir semua tombol yang terlihat sekitar dua puluh kali dalam berbagai urutan, tapi kebanyakan tidak terjadi apa-apa
Keren. Saya harap proyek ini berhasil
Dari sudut pandang kesan pertama, saya ingin memberi beberapa masukan: bagaimana kalau saat pertama mulai langsung dibuka dokumen kosong tanpa judul yang siap dimainkan, dan alat awal yang dipilih adalah sesuatu yang menyenangkan seperti pensil Bezier
Saya cukup termotivasi untuk mengklik ke sana kemari, menyadari tidak ada dokumen yang terbuka, lalu membuat dokumen baru dan mulai bermain dengan mengganti alat, tetapi banyak pengguna tidak akan sejauh itu. Terutama karena tidak adanya dokumen yang terbuka terasa seperti hambatan terbesar
Ini mungkin terlihat sepele, tetapi akan bagus jika kanvas default dibuat sedikit lebih besar. Misalnya sekitar 512 atau 500 persegi. Saat mencoba alat baru, secara realistis orang hanya memberi waktu 10–20 detik pertama, jadi kalau tidak bisa menarik mereka dalam waktu itu, mereka akan langsung pergi dan Anda kehilangan banyak pengguna
Kelihatannya sangat bagus, terima kasih sudah membagikannya
Bahkan setelah membuat dokumen baru dan mencoba memakai pensil, tetap tidak terjadi apa-apa
Pada akhirnya saya tidak berhasil memahami cara menggunakannya
Saya sempat bisa menambahkan beberapa node dengan alat Bezier, tetapi tidak bisa memanipulasinya dengan alat apa pun. Mungkinkah drag memang benar-benar rusak di Chrome/Windows?
Bagus, dan terlihat punya banyak potensi. Sebagai masukan sederhana, toolbar mengambang di atas terasa mengganggu dan memakan area gambar yang sebenarnya
Menurut saya lebih baik dijadikan toolbar biasa atau ditempatkan di bawah kanvas. Atau setidaknya dibuat bisa dipindahkan atau dilipat