SVG quá nhiều nút? Làm sạch kết quả đồ tự động
SVG đồ tự động thường có hàng trăm điểm neo thừa, khiến khó chỉnh sửa và chậm cắt. Tìm hiểu nguyên nhân và cách có đường dẫn sạch ngay từ đầu.
Trên trang này
Bạn đồ PNG thành SVG, mở ra để chỉnh sửa, rồi thấy đường dẫn ngập trong điểm neo. Hàng trăm điểm tụ dọc những đường cong đáng ra chỉ cần năm hoặc sáu. Mỗi lần thử dịch một hình, bạn lại phải vật lộn với cả chục tay nắm không mong muốn.
Nếu điều này quen thuộc, công cụ vector hóa của bạn không bị hỏng. Nó đang làm đúng điều phần lớn công cụ đồ tự động làm: chép pixel thay vì vẽ hình. Dưới đây là nguyên nhân, vì sao nó làm bạn chậm hơn tưởng tượng và cách có vector thực sự sạch ngay từ đầu.
Ghi chú phương pháp: số lượng trong bài đến từ việc chọn và đếm đường dẫn trong chính các tệp so sánh được hiển thị. Đây là ví dụ, không phải mức trung bình cho mọi công cụ hay hình ảnh.
“Quá nhiều nút” thực sự nghĩa là gì?
Đường dẫn SVG được mô tả bằng lệnh và tọa độ tạo thành các đoạn thẳng và cong. Trình chỉnh sửa hiển thị tọa độ liên quan dưới dạng điểm neo (còn gọi là nút), kèm tay nắm hướng cho đường cong Bézier. Một vài điểm neo đặt đúng chỗ có thể mô tả đường cong dài, mượt. Xem đặc tả đường dẫn SVG của W3C. Với một góc gãy ngoài ý muốn trên đoạn uốn vốn mượt, cách sửa nối Bézier cho biết cách căn tay nắm mà giữ nguyên điểm neo.
Rắc rối bắt đầu khi số điểm neo vượt xa nhu cầu của hình. Đường cong nhà thiết kế sẽ vẽ bằng năm điểm lại thành năm mươi. Nhìn lướt, ảnh vẫn ổn, nhưng đường dẫn bên dưới rất rối.
Có thể bạn đang gặp tình trạng dư nút nếu:
- Đường cong đơn giản có điểm neo cách nhau vài pixel thay vì vài inch.
- Chọn một hình làm sáng hàng chục điểm ở nơi bạn chỉ mong vài điểm.
- Tệp lớn bất ngờ so với độ đơn giản của hình.
Vì sao công cụ đồ tự động tích thêm nút?
Công cụ đồ truyền thống suy ra đường biên hoặc đường tâm từ ảnh raster rồi xấp xỉ bằng đường cong vector. Adobe cung cấp tính năng này qua Image Trace với các điều khiển như Paths, Corners và Noise; Potrace mô tả thuật toán khớp đường cong dựa trên đa giác cho đường bao bitmap. (Tùy chọn Image Trace của Adobe; bài báo Potrace)
Vấn đề nằm ở vị trí của đường biên. PNG có khử răng cưa: những pixel mềm, bán trong suốt làm mượt mép trên màn hình. Với công cụ đồ lại, mép mềm đó trông như đường hơi lượn, nên nó thêm điểm để bám mọi gợn. Nó không hỏi “đây là cung hay đoạn thẳng?” mà chép lại đường bao pixel, cả những dao động nhỏ. Mức độ bám sát này khác nhau rất nhiều giữa các công cụ; xem so sánh các công cụ vector hóa ảnh AI chính.
Bạn có thể thấy ngay trong dữ liệu đường dẫn. Đây là hình dung gần đúng của một chùm lông tai con cú khi đồ lại và khi vẽ sạch:
<!-- Auto-traced: one ear tuft, 40+ points -->
<path d="M312.4,98.1 C313.0,97.8 313.9,97.2 314.6,96.9 C315.2,96.7
316.1,96.4 316.8,96.2 C317.4,96.0 318.3,95.7 319.0,95.5 ...(many more) Z"/>
<!-- Clean: the same tuft, 6 points -->
<path d="M312,98 C320,70 360,68 372,96 C378,112 340,140 312,98 Z"/>Cùng đường cong. Một bên chép từng pixel; bên kia là một hình.
Vì sao điều này làm bạn chậm đi?
Đường dẫn dày đặc không chỉ trông lộn xộn trong trình chỉnh sửa. Nó tạo thêm điểm neo cần chọn và đổi hình, có thể tăng kích thước dữ liệu đường dẫn, đồng thời thêm các đoạn mà công cụ phía sau phải xử lý. Tác động tùy hình, trình chỉnh sửa, máy và cài đặt xuất; số nút là dấu hiệu chẩn đoán, không phải ngưỡng đạt hay trượt chung.
| Đường dẫn đồ lại dày đặc | Đường dẫn đơn giản hơn | |
|---|---|---|
| Điểm neo | Nhiều điểm cần kiểm tra hơn | Ít điểm cần kiểm tra hơn |
| Chỉnh sửa | Mỗi thay đổi liên quan nhiều tay nắm hơn | Dễ đổi hình trực tiếp hơn |
| Kích thước tệp | Thường nhiều dữ liệu đường dẫn hơn | Thường ít dữ liệu đường dẫn hơn |
| Quy trình cắt | Nhiều đoạn cần xem xét hơn | Hình học đường chạy dao đơn giản hơn |
Trong công cụ thiết kế
Trong Illustrator hay Figma, mỗi điểm neo thừa là thứ bạn phải chọn vòng qua, tránh hoặc dọn trước khi thay đổi thực sự. Đổi hình đường cong sạch chỉ cần một hoặc hai điểm. Đổi hình đường được chép lại nghĩa là xử lý cả cụm, và giữ nó mượt không hề dễ.
Trên máy cắt
Máy cắt dùng hình học vector để suy ra đường chạy dao, nên đáng giản lược các đoạn cực nhỏ thừa và cắt thử. Đừng mặc định số nút là nguyên nhân duy nhất khiến nhập hoặc cắt thất bại: Cricut có tài liệu riêng về tính năng SVG không được hỗ trợ như tô họa tiết, đường cắt xén, chữ chỉnh sửa được và ảnh raster nhúng. Xem hướng dẫn mục không hỗ trợ của Cricut. Nếu tệp dùng cho laser, hãy chuẩn bị SVG sẵn sàng cắt laser và kiểm tra trong phần mềm máy.
Nếu Cricut từ chối tải lên, chẩn đoán lỗi File Too Large; số đường dẫn và kích thước tệp khác với số nút.
Cách có nút sạch
Có ba cách, sắp xếp gần đúng theo mức độ giảm phiền phức:
- Giản lược sau khi đồ lại. Lệnh Đối tượng → Đường dẫn → Giản lược của Illustrator có thể giảm điểm neo. Adobe cung cấp điều khiển cân bằng giản lược với độ chính xác đường cong và giữ góc, nên hãy xem trước kết quả thay vì cho rằng không mất thông tin. Xem tài liệu Simplify của Adobe.
- Giảm chi tiết đồ lại. Phần lớn công cụ cho phép giảm độ phức tạp, nhưng đây là biện pháp khá thô: giảm đủ để bớt nút sẽ bắt đầu làm mất cả chi tiết bạn muốn giữ.
- Bắt đầu sạch. Cách giải quyết thực sự là vector hóa bằng công cụ tạo đường dẫn sạch ngay từ đầu, để không có gì cần dọn.
Mục tiêu cuối là một lý do chúng tôi xây dựng PerfectVector. Công cụ được thiết kế để tạo hình vector chỉnh sửa được thay vì giữ mọi dao động của pixel nguồn. Dùng bảng đánh giá chất lượng đồ vector để so sánh hình bóng, độ đúng góc, số nút và khả năng chỉnh sửa với bản đồ lại khác trước khi chọn tệp.
Không chỉ minh họa; logo và chữ cũng dư nút theo cùng cách, gây khó nhất khi bạn cần mép rõ và đường cắt vinyl sạch.
Để đưa lên web, làm theo hướng dẫn tối ưu SVG bằng SVGO sau khi hình học đã ổn. Hướng dẫn thử riêng thay đổi kích thước tệp và kiểu dáng phụ thuộc ID; SVG nhỏ hơn không chứng minh đường dẫn chỉnh sửa được hoặc cách trang hoạt động vẫn đáp ứng nhu cầu.
Nếu định dạng xuất tiếp theo là DXF, kiểm tra mật độ đoạn trong quy trình CNC như một vấn đề bàn giao riêng.
Nếu hai trạng thái của hình sẽ chuyển hình động qua lại, hướng dẫn hoạt ảnh biến hình SVG giải thích vì sao làm sạch nút phải giữ sự tương ứng điểm hữu ích. Kiểm tra cả giữa chuyển tiếp lẫn các đầu mút tĩnh.
Thử ngay
Thả PNG hoặc JPG vào công cụ chuyển ảnh thành vector của PerfectVector, không cần đăng nhập hay thẻ tín dụng. Bạn sẽ thấy số nút và màu ngay trên kết quả, để tự đánh giá khác biệt trước khi tải bất cứ gì xuống.
Câu hỏi thường gặp
SVG nên có bao nhiêu nút? Không có mục tiêu chung: con số phù hợp là ít điểm nhất vẫn giữ hình và chi tiết cần thiết. Chỉ để tham khảo quy mô của con cú trong bài, bản đồ lại được so sánh có 522 nút còn kết quả PerfectVector có 59. Xem đó là ví dụ có thể tái lập, không phải mức trung bình cho mọi công cụ hoặc ảnh.
Quá nhiều nút có ảnh hưởng máy cắt không? Có thể. Đường dẫn dày đặc tạo thêm đoạn cho quy trình cắt xử lý và có thể khó kiểm tra hoặc chỉnh sửa hơn. Tác động nhìn thấy tùy máy, vật liệu, tốc độ, lưỡi và hình học đường dẫn, nên giản lược cẩn thận và cắt thử một mẫu nhỏ. Đồng thời kiểm tra tính năng SVG không được hỗ trợ thay vì quy mọi lỗi nhập tệp cho số nút.
Làm sao giảm số nút trong SVG? Có ba cách, theo thứ tự gần đúng về mức giảm phiền phức. Giản lược đường dẫn sau khi đồ lại (Đối tượng → Đường dẫn → Giản lược trong Illustrator), vốn làm mất thông tin; giảm cài đặt chi tiết đồ lại, một biện pháp thô có thể làm mất cả chi tiết cần giữ; hoặc đồ lại bằng công cụ đặt điểm sạch ngay từ đầu, để không phải xóa.
Tôi chỉ dùng Simplify trong Illustrator được không? Được. Tính năng Simplify giảm điểm neo đồng thời cung cấp điều khiển độ chính xác đường cong và giữ góc. Cài đặt mạnh có thể đổi góc hoặc đường cong, nên dùng bản xem trước và so sánh hình bóng trước khi chấp nhận. Bắt đầu với bản đồ lại đơn giản hơn có thể giảm công dọn dẹp.
Nguồn tham khảo
- W3C — Đường dẫn SVG — Định nghĩa chuẩn tắc về lệnh đường dẫn SVG, tọa độ và các đoạn cong.
- Adobe Illustrator — Tùy chọn bảng Image Trace — Điều khiển chính thức về độ khớp đường dẫn, góc, nhiễu, màu và độ phức tạp đồ lại.
- Adobe Illustrator — Tự động giản lược đường dẫn — Quy trình giản lược chính thức và điều khiển cân bằng độ chính xác với số điểm.
- Selinger — Potrace: thuật toán đồ lại dựa trên đa giác — Mô tả kỹ thuật gốc về xấp xỉ đường biên và khớp đường cong trong công cụ đồ truyền thống.
- Cricut — Tải ảnh lên: mục không được hỗ trợ — Danh sách chính thức các cấu trúc SVG có thể chặn hoặc làm thay đổi quá trình tải lên Design Space.
Thêm từ blog
Bo góc đường SVG bằng cách đổi hình có tô
Bo một góc SVG có tô bằng cung tiếp tuyến, kiểm tra bán kính có vừa các cạnh không và xem vì sao nối nét tròn vẫn giữ nguyên màu tô gốc.
Chuyển sắc SVG dọc đường dẫn: kiểm tra màu ở khúc cong
So sánh chuyển sắc tọa độ SVG với các dải màu được tạo chủ đích quanh một dải cong. Kiểm tra nguồn, thử hai kích thước và chọn đánh đổi về hình học.
