Hyvector – Trình biên tập SVG nhanh và hiện đại
(hyvector.com)- Khi làm việc với đồ họa vector, thay vì phải mở các ứng dụng desktop nặng nề, Hyvector cung cấp quy trình chỉnh sửa và xuất SVG chỉ trong vài giây ngay trên trình duyệt
- Có thể xử lý ngay các tác vụ nhanh như chỉnh sửa icon, phác thảo logo, dọn dẹp path SVG mà không cần tạo tài khoản hay tải về ứng dụng dung lượng lớn
- Mọi xử lý đều ở lại cục bộ theo cách tiếp cận ưu tiên quyền riêng tư, hướng đến khởi động nhanh và mức sử dụng bộ nhớ thấp
- Hỗ trợ định hình đa định dạng cho văn bản hai chiều, các hệ chữ phức tạp và chữ nối như Arabic
- Sau khi một nhà phát triển độc lập xây dựng nền tảng cốt lõi trong 5 năm, các tính năng như màu toàn cục, độ dày nét động và phông chữ biến đổi đang được bổ sung trên engine lõi đã ổn định
Quy trình chỉnh sửa SVG không cần cài đặt
- Hyvector là trình biên tập SVG và đồ họa vector chạy trực tiếp trên trình duyệt
- Tập trung vào quy trình mở nhanh tệp, chỉnh sửa rồi xuất đồ họa
- Có thể sử dụng mà không cần tạo tài khoản hay tải về ứng dụng dung lượng lớn
- Các tác vụ phù hợp để xử lý nhanh gồm:
- Chỉnh sửa icon
- Phác thảo logo
- Dọn dẹp path SVG
Môi trường chạy nhẹ và quyền riêng tư
- Có thể chạy ở bất cứ đâu mà không cần cài đặt
- Hướng đến khởi động nhanh và mức sử dụng bộ nhớ thấp
- Sử dụng cách tiếp cận ưu tiên quyền riêng tư, trong đó mọi xử lý đều ở lại cục bộ
Tính năng chỉnh sửa và trạng thái phát triển
-
Hỗ trợ typography
- Hỗ trợ đầy đủ văn bản hai chiều
- Có thể xử lý các hệ chữ phức tạp
- Hỗ trợ định hình đa định dạng cho chữ nối như Arabic
-
Công cụ chỉnh sửa vector
- Cung cấp chế độ xem cây phần tử theo kiểu kéo-thả
- Có thể kiểm soát path chính xác dựa trên hệ biến đổi đầy đủ, bao gồm nghiêng, xoay và thay đổi kích thước
- Cung cấp cọ vẽ, bao gồm chế độ tẩy mạnh mẽ
-
Dự án của một nhà phát triển độc lập
- Ban đầu khởi đầu như một dự án phụ làm nhanh, nhưng do độ phức tạp của đồ họa vector nên đã kéo dài 5 năm
- Nền tảng cốt lõi đã hoàn tất và engine lõi đang ở trạng thái ổn định
- Các tính năng tiếp theo như màu toàn cục (global colors), độ dày nét động (dynamic stroke widths), phông chữ biến đổi (variable fonts) đang được chuẩn bị
1 bình luận
Ý kiến trên Hacker News
Hay đấy. Dự án phụ của tôi là thư viện render SVG bằng C++, mà tìm một trình chỉnh sửa SVG ổn thật không dễ
Thường thì tôi làm trong Illustrator rồi dọn lại markup được sinh ra, hoặc quay về các trình chỉnh sửa dựa trên văn bản như https://www.svgviewer.dev/
UX khá trau chuốt, và hiện đã hỗ trợ nhiều tính năng hơn các công cụ khác mà tôi từng tìm. Nhân tiện, dự án của tôi là https://github.com/jwmcglynn/donner, còn bản prototype “trình chỉnh sửa” trên web (hiện chỉ chỉnh sửa dựa trên code) nằm ở https://jwmcglynn.github.io/donner-editor/
SVG là lĩnh vực có tiềm năng lớn nhưng bị ảnh hưởng vì công cụ còn kém, nên thật vui khi thấy có thử nghiệm mới trong mảng này
Khởi đầu tốt. Có vài tính năng rõ ràng mà tôi cảm thấy còn thiếu
Công cụ node nên cố snap các node đầu/cuối với nhau khi chỉnh sửa, và lúc mới tạo, đặc biệt với công cụ bút chì, có thể đặt khoảng cách snap lớn hơn
Thay vì công cụ node để chỉnh sửa, cách biến dạng kiểu kéo/đẩy như Flash/Futurewave SmartSketch của Wick Editor có lẽ thân thiện với di động hơn nhiều
Nếu bo tròn góc không hoạt động với đa giác thì nên ẩn hoặc vô hiệu hóa nó
Tôi đã mong Karbon của KDE trông như thế này. Đây là một trình chỉnh sửa SVG thân thiện nhưng nhanh và có năng lực
Nếu được, sẽ rất tốt nếu có thêm các tính năng trong SVG Path Editor0. Ví dụ như đổi tọa độ tuyệt đối sang tọa độ tương đối, hoặc chỉnh sửa riêng từng đường thẳng và đường cong của mỗi path; những thứ này tôi chưa thấy ở các trình chỉnh sửa khác
Một tính năng nữa sẽ rất tuyệt nếu có, nhưng khối lượng công việc có thể khổng lồ hoặc thành một dự án riêng, là animation
Trông ổn. Không phải muốn chỉ trích, nhưng tôi luôn nghĩ rằng trong một trình chỉnh sửa, bản thân SVG là đối tượng ở sai mức trừu tượng. Thứ người ta muốn không phải là trình chỉnh sửa SVG mà là một chương trình vẽ vector
Tất nhiên nó nên render ra SVG đã tối ưu, nhưng nếu xây UI/UX xoay quanh các khái niệm của SVG như path, clip path thì không thân thiện với người dùng cuối. Đây cũng là điểm luôn làm tôi khó chịu ở Inkscape
Tôi nghĩ tính năng thật sự mạnh sẽ là đưa các modifier như trong Blender (array, mirror, v.v.) vào trình chỉnh sửa vector để cho phép chỉnh sửa không phá hủy
Ngoại lệ đầu tiên là clip path: trong Hyvector, nó được xử lý như một path có stroke và fill, cùng nội dung bị cắt bên ngoài path đó. Việc xử lý clip path trong SVG khá phiền và không trực quan
Nếu tiếp tục phát triển được, các tính năng như bo tròn góc của path, phép boolean không phá hủy, độ rộng stroke biến thiên, nhiều fill, distortion sẽ tiếp nối
Tuy vậy tôi vẫn muốn giữ định dạng export là SVG, vì nó rất tốt cho web và có thể style bằng CSS. Vì thế các hiệu ứng cần có khả năng export thành SVG thật, và tôi muốn tránh cách một số trình chỉnh sửa nhét bitmap giả vào trong SVG khi export sang SVG. Ví dụ, sẽ chưa có conic gradient cho đến một ngày nào đó SVG hỗ trợ nó
Tôi đã thử chỉnh biểu tượng này để đặt mũi tên vào giữa hình tròn, nhưng mask không được nhận diện đúng, nên chỉ thấy mỗi hình tròn màu đen
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">
Với biểu tượng này, clip path có thể phù hợp hơn mask. Nếu muốn tạo biểu tượng có hình dạng tương tự, bạn có thể lấy các phần tử bên trong mask, dán vào Hyvector rồi chỉnh tiếp
Rất hay. Tôi thích các trình chỉnh sửa trên web
Tôi thích việc mọi object và group trong SVG được import đều hiển thị rõ ràng cùng preview chính xác
Có hai tính năng còn thiếu hoặc tôi chưa tìm thấy. Tôi muốn biết có cách chuyển đường nét thành hình dạng không, và có thể trực tiếp chỉnh mã SVG bằng tay theo thời gian thực không. Với người dùng phổ thông thì có thể hơi niche, nhưng một số thao tác như fill chỉnh bằng code dễ hơn nhiều so với bằng công cụ trực quan
Tôi cũng tò mò liệu có khả năng mở mã nguồn không
Tôi thật sự thích UX. Ngay cả trên tablet Android hỗ trợ Wacom cũng dùng rất ổn
Tôi không biết cách chỉnh spline, tức là kéo một điểm bất kỳ trên đường để di chuyển thay vì điều chỉnh từng handle riêng lẻ, là tự nghĩ ra hay lấy từ đâu khác, nhưng tôi rất thích
Tôi chỉ thấy cuộn cảm ứng ở cây bên trái không hoạt động; ngoài ra mọi thứ rất mượt. Cũng tò mò không biết đã triển khai phím tắt bàn phím chưa
Giữ Shift khi kéo để giữ hướng handle cũng hoạt động
Cây bên trái khó làm cho đúng trên mọi thiết bị. Nó phải hỗ trợ click, chạm để click, kéo-thả, cuộn bằng vuốt, cuộn cảm ứng, v.v., đồng thời vẫn phải hoạt động như thể chứa hàng trăm phần tử. Vẫn còn các vấn đề như cuộn bằng vuốt trên iOS và hơi giật, nhưng tôi đã đưa vào danh sách
Phím tắt bàn phím đã được triển khai trên các thiết bị không phải di động. Khi mở menu từ thanh menu, phím tắt sẽ hiện ở bên phải các mục menu
Tôi không tìm ra cách dùng. Tôi tạo được một đoạn thẳng nhưng không tìm được cách di chuyển hoặc thay đổi kích thước nó, dù các handle kéo có xuất hiện
Tôi cũng không biết cách tạo các hình khác như hình chữ nhật hoặc hình tròn. Tôi đã bấm gần như mọi nút nhìn thấy được khoảng hai chục lần theo nhiều thứ tự khác nhau, nhưng phần lớn không có gì xảy ra
Tuyệt. Tôi mong dự án này thành công
Nếu góp vài ý từ góc nhìn ấn tượng ban đầu, tôi nghĩ khi khởi động lần đầu nên mở sẵn một tài liệu trống chưa đặt tên để người dùng có thể nghịch ngay, và chọn một công cụ thú vị như bút chì Bezier làm công cụ mặc định ban đầu
Tôi có đủ động lực để bấm lung tung, nhận ra chưa có tài liệu nào đang mở, rồi tạo tài liệu mới, đổi công cụ và bắt đầu chơi thử, nhưng nhiều người dùng sẽ không làm vậy. Đặc biệt việc không có tài liệu nào đang mở có vẻ là rào cản lớn nhất
Trông có vẻ nhỏ thôi nhưng sẽ tốt hơn nếu canvas mặc định lớn hơn một chút. Ví dụ một hình vuông 512 hoặc 500. Thực tế khi thử một công cụ mới, người ta chỉ dành 10–20 giây đầu tiên, nếu không giữ chân được họ trong khoảng đó thì họ sẽ rời đi và bạn mất nhiều người dùng
Trông rất ổn, cảm ơn vì đã chia sẻ
Ngay cả sau khi tạo tài liệu mới và thử dùng bút chì, cũng không có gì xảy ra. Cuối cùng tôi vẫn không tìm ra cách dùng
Với công cụ Bezier, tôi có thể thêm vài node nhưng không thể thao tác chúng bằng bất kỳ công cụ nào. Có thể kéo thả trên Chrome/Windows bị hỏng hoàn toàn không?
Tốt, và có rất nhiều tiềm năng. Góp ý nhanh: đặt thanh công cụ nổi ở phía trên gây mất tập trung và chiếm mất vùng vẽ thực tế
Nên để như thanh công cụ thông thường hoặc đặt ở phía dưới canvas. Hoặc làm cho nó có thể di chuyển hay thu gọn được