Hyvector – Trình chỉnh sửa SVG nhanh và hiện đại

• Hyvector là một trình chỉnh sửa dựa trên web giúp chỉnh sửa hiệu quả hình ảnh SVG (Scalable Vector Graphics) một cách nhanh chóng và hiện đại
• Cần hỗ trợ JavaScript và phải bật để ứng dụng hoạt động bình thường
• Có thể truy cập ngay trong trình duyệt mà không cần cài đặt hay cấu hình phức tạp
• Kết hợp hiệu năng mạnh mẽ với thiết kế hiện đại để mang lại trải nghiệm người dùng trực quan
• Đây không phải môi trường chỉnh sửa SVG ở mức văn bản hoặc mã nguồn, mà là môi trường chỉnh sửa thuận tiện thông qua giao diện trực quan

Ưu điểm chính và tầm quan trọng

• So với các trình chỉnh sửa SVG mã nguồn mở và thương mại, Hyvector có tốc độ phản hồi nhanh và giao diện hiện đại
• Nhờ đặc tính nền web, có thể truy cập ở bất cứ đâu mà không phụ thuộc vào hệ điều hành
• Cung cấp môi trường làm việc với ảnh vector hiệu quả cho cả nhà thiết kế lẫn lập trình viên
• Có thể sử dụng ngay mà không cần cài plugin riêng hay cài thêm chương trình bổ sung
• Các công cụ chỉnh sửa trực quan giúp dễ dàng tạo và chỉnh sửa tài nguyên SVG

[GN⁺]

Ý kiến trên Hacker News

• Tôi đang phát triển một thư viện render SVG bằng C++ như một dự án phụ và chưa từng tìm được trình chỉnh sửa SVG nào tốt, nên chủ yếu dùng Illustrator rồi dọn lại phần markup kết quả, hoặc dùng trình chỉnh sửa dạng văn bản svgviewer.dev; UX của bạn rất tinh tế và điều ấn tượng là 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 thấy, dự án donner của tôi cũng cung cấp một nguyên mẫu trình chỉnh sửa mã trên web; SVG là một lĩnh vực có tiềm năng lớn nhưng bị kìm hãm bởi giới hạn của công cụ, nên tôi rất vui khi thấy có sự đổi mới
  • Tôi tò mò không biết Inkscape có vấn đề gì, đúng là có vài lỗi nhỏ nhưng nhìn chung tôi thấy nó hoạt động khá ổn
• Khởi đầu trông rất tốt, có vài tính năng còn thiếu khá rõ ràng: khi chỉnh bằng công cụ node thì điểm đầu/cuối nên có thể snap vào nhau dễ dàng, nhất là khi vẽ bằng công cụ bút chì thì khoảng cách snap nên rộng hơn; tôi nghĩ công cụ biến hình và méo kiểu Wick Editor sẽ thân thiện với di động; nếu chưa hỗ trợ bo góc cho đa giác thì tốt hơn là nên ẩn hoặc vô hiệu hóa tính năng đó
  • Đây đúng là kiểu phản hồi mà tôi rất muốn có, cảm ơn bạn
• Tôi rất thích việc có thể kiểm soát ở mức cao, chẳng hạn như cả những thay đổi không nhìn thấy trực tiếp như đảo chiều đường path cũng vẫn có quyền điều khiển; nhưng sẽ tốt hơn nếu có phản hồi để biết việc đảo chiều đã được thực hiện hay chưa; khi sao chép lựa chọn thì tất cả font đã dùng bị nhúng vào SVG dưới dạng base64 khiến tệp phình to; tôi cũng tò mò không biết bạn định tiếp tục giữ ánh xạ 1:1 với SVG hay sẽ cân nhắc thêm một lớp trừu tượng, tôi vẫn dùng Figma vì tính năng Vector Networks của nó; dù có thể cần chuyển đổi nội bộ sang dữ liệu path hợp lệ, nó vẫn sẽ rất hữu ích; tôi cũng ngạc nhiên khi về mặt kỹ thuật bạn chọn cách render bằng SVG, tôi đã tưởng nó dựa trên canvas; gần đây tôi thử render vật thể 3D bằng SVG và nhanh chóng gặp vấn đề hiệu năng, nhưng vẫn chưa tìm ra nguyên nhân; không biết bạn đã từng stress test trên thiết bị cũ chưa
  • Trong một thời gian tôi không nhận ra rằng Vector Networks (tôi gọi là path graph) thật ra chính là cấu trúc trung gian mà tôi đã có khi làm các thao tác boolean trên path; cho đến gần đây tôi vẫn khá hoài nghi về Vector Networks, nhưng dạo này vì có quá nhiều ảnh do AI tạo ra nên tôi bắt đầu nghĩ nó sẽ rất tuyệt như kết quả vector hóa bitmap; đây là tính năng tôi muốn thêm, nhưng trước mắt còn cả núi việc cấp bách hơn; tôi cũng sẽ tiếp tục stress test, và đã thử chạy trên một máy tính bảng Android cũ giá 100 euro cực kỳ chậm; bài đăng trên Hacker News được tôi viết khá ngẫu hứng và đáng lẽ nên test thêm; trước đây tôi từng dùng các máy ThinkPad cũ để cảm nhận vấn đề hiệu năng ngay lập tức, nhưng IDE ngày càng nặng nên không còn làm vậy được nữa; dù sao tôi vẫn cố giữ lại các thiết bị cũ để kiểm tra xem nó có chạy ổn không; tôi sẽ đọc hết mọi đề xuất trong phần bình luận và tạo issue cho chúng; tôi rất bất ngờ vì lượng phản hồi hữu ích đổ về quá nhiều, tôi chỉ kỳ vọng khoảng 5 upvote và chừng 2 bình luận; lý do tôi dùng cách render SVG là vì muốn hình hiển thị phải giống hệt hoàn toàn với tệp SVG đã lưu, còn phần overlay thì tôi cũng từng cân nhắc Canvas hoặc WebGL nhưng hiện tại trên đa số ảnh nó đã đủ nhanh
• Tôi ước Karbon của KDE đã trở thành một công cụ chỉnh sửa SVG trực quan và nhanh như thế này, đặc biệt là những chức năng do SVG Path Editor cung cấp (ví dụ: chuyển tọa độ path sang giá trị tương đối, chỉnh riêng các đoạn cong và đoạn thẳng trong path) thực sự rất cần thiết, nhưng tôi vẫn chưa thấy ở bất kỳ trình chỉnh sửa nào khác; thêm nữa, dù là một khối lượng công việc rất lớn, sẽ thật tuyệt nếu có thêm tính năng animation
  • Có nhiều dự án tên là SVG Path Editor, nhưng dự án trên yqnn.github.io được giới thiệu ở đây là công cụ tiên tiến và dùng được nhất mà tôi từng thử đến nay
• Tôi thật sự mong dự án này thành công; có một đề xuất về trải nghiệm người dùng ban đầu: ngay khi bắt đầu nên có sẵn một tài liệu trống chưa đặt tên để có thể luyện thử ngay, và chẳng hạn một công cụ vui như Bezier pencil nên được tự động chọn; tôi đã phải bấm vài lần mới nhận ra là chưa có tài liệu nào, sau đó tạo tài liệu mới rồi đổi công cụ để thử, nhưng đa số người dùng sẽ vấp chỗ này rất nhanh; ngoài ra sẽ tốt hơn nếu kích thước mặc định của canvas lớn hơn một chút (ví dụ hình vuông 512 hoặc 500); thực tế là khi thử thứ gì mới, nếu trong 10-20 giây đầu không thấy thú vị thì người ta thường rời đi ngay; cần lôi cuốn họ tức thì; làm rất tốt
  • Đồng ý, tôi đã bấm ngay vào bút chì để nguệch ngoạc thử nhưng chẳng có gì xảy ra nên khá thất vọng; ngay cả sau khi tạo tài liệu mới thì bút chì vẫn không hoạt động; cuối cùng tôi vẫn không hiểu phải dùng thế nào; tôi có thể thêm node bằng công cụ Bezier nhưng không thể thao tác chúng bằng công cụ khác; có vẻ tính năng kéo thả hoàn toàn không hoạt động trên Chrome/Windows
• Tôi không nắm được cách dùng; có tạo thử một đoạn thẳng nhưng không tìm ra cách di chuyển hay thay đổi kích thước, tôi có thể làm hiện các tay nắm kéo; tôi cũng hoàn toàn không tìm ra cách tạo các hình khác như hình chữ nhật hay hình tròn; tôi bấm nút gần 20 lần mà chẳng có phản ứng gì
  • Ở thanh công cụ chính, mục nằm giữa công cụ văn bản và công cụ hình ảnh chính là công cụ shape; hai tùy chọn đầu tiên là hình chữ nhật và hình tròn
  • Tôi nghĩ những ứng dụng kiểu này nên hiển thị rất nhiều gợi ý về cách sử dụng, và cũng nên cho phép tắt chúng đi
• Tôi đã rất thích khi thử công cụ này, nó cực nhanh và trực quan, đặc biệt hiệu năng zoom/pan vượt trội hẳn so với các công cụ trước đây; tôi có một thắc mắc là có kế hoạch thêm lớp plugin hoặc API dành cho workflow tạo sinh hay không; ngày càng nhiều người dùng kết hợp scripting hoặc hiệu ứng hình ảnh dựa trên AI trong việc chỉnh sửa SVG, nên nếu Hyvector có một lớp có thể lập trình như mini-language hoặc cầu nối JS thì nó sẽ mạnh hơn rất nhiều; chúc mừng ra mắt, luôn thật vui khi có thêm công cụ mới giúp hạ thấp rào cản cho công việc vector sáng tạo
  • Cảm ơn bạn, gần đây trong công việc chính ở các dự án khác tôi cũng bắt đầu dùng AI từng chút một, và tôi đồng ý rằng việc cho phép tích hợp nội dung tạo bởi AI là quan trọng; nếu bạn có thể nói chi tiết hơn về việc bạn muốn kết hợp AI với trình chỉnh sửa vector như thế nào thì sẽ rất hay; tôi đã nghĩ đến việc vector hóa và tô màu bitmap do AI tạo ra, ngoài ra thì chưa suy nghĩ nhiều
• Tôi thật sự thích UX này, dùng rất ổn trên máy tính bảng Android có hỗ trợ Wacom; cách chỉnh spline này (tức là kéo để điều chỉnh một điểm bất kỳ trên đường thay vì từng tay nắm riêng lẻ) không rõ là lấy ý tưởng từ đâu nhưng quả thật rất hay; chỉ tiếc một điểm là không thể cuộn bằng cảm ứng ở cây bên trái; ngoài ra thì mọi thứ rất mượt; tôi tò mò không biết đã có phím tắt chưa
  • Cách triển khai kéo đường cong thực ra đơn giản đến bất ngờ, tôi lấy ý tưởng từ một cuộc thảo luận trên diễn đàn Google từ rất lâu rồi; nếu giữ Shift và kéo thì hướng của tay nắm cũng được giữ nguyên; cây bên trái rất khó xử lý hoàn hảo trên mọi thiết bị, vì nó phải hỗ trợ click, chạm, kéo thả, cuộn vuốt, cuộn cảm ứng, đồng thời vẫn hiển thị tốt hàng trăm phần tử nên khá phức tạp; hiện vẫn còn vấn đề như cuộn vuốt trên iOS hoặc hơi giật nhẹ, nhưng tôi đã ghi vào danh sách; phím tắt có trên desktop trừ di động, mở thanh menu thì sẽ thấy chúng ở bên phải từng mục
• Dùng thử trực tiếp thì tôi thấy khởi đầu rất tốt, UX đặc biệt làm tôi hài lòng: công cụ bút trực quan, có preview từng layer trong panel đối tượng, clipping path được tích hợp tốt, và tôi thích việc có những tính năng hiếm thấy như chuyển văn bản sang outline và các thao tác boolean; phản hồi mang tính phê bình là: nên có phím tắt chuyển giữa các công cụ và hiển thị luôn trong tooltip; hỗ trợ Ctrl +/- để zoom in/out, Space + kéo để pan; khi chỉnh nhóm thì rất khó chọn từng đối tượng bên trong nhóm, double click lại chuyển ngay sang công cụ node nên tôi mong có chế độ cô lập nhóm; khi đang dùng công cụ bút thì cần có khả năng chỉnh control point của điểm trước đó; trong chế độ bút, hoàn tác lại chỉ quay về thao tác trước đó chứ không hoàn tác việc thêm điểm path nên khá bất tiện; hỗ trợ văn bản còn hạn chế, các font nhúng như @font-face không hiển thị, hỗ trợ filter cũng tương tự; có vẻ việc render SVG diễn ra độc lập nên trình duyệt không vẽ đúng được
  • Cảm ơn phản hồi rất hay, có lẽ trong vài ngày tới tôi sẽ phải viết ra rất nhiều issue; thật ra khi đăng lên Hacker News tôi chỉ mong 5 upvote và 2 bình luận nhưng phản ứng lại quá lớn; hiện có thể chọn từng đối tượng bên trong nhóm bằng Ctrl + click; logic chọn hiện vẫn chưa thật gọn nên tôi sẽ tiếp tục cải thiện, nhưng trước mắt cách này có thể giúp ích
• Tôi thấy có rất nhiều tiềm năng; phản hồi nhanh là cấu trúc thanh công cụ nổi ở phía trên canvas làm gián đoạn sự tập trung và giảm không gian làm việc; bố cục thanh công cụ thông thường hoặc đặt ở dưới canvas sẽ tốt hơn; hoặc ít nhất nên cho phép di chuyển/thu gọn thanh công cụ
  • Cảm ơn bạn, thiết kế và vị trí thanh công cụ đã được tôi thay đổi nhiều lần rồi; hiện đã có tính năng tự động thu gọn khi cửa sổ hẹp đi, còn thêm nút thu gọn thì triển khai rất dễ