PerfectVector
Bởi Irene Kim

VTracer PNG sang SVG: Kiểm tra màu và chi tiết nhỏ

Chuyển đổi PNG bằng VTracer CLI đã được thử nghiệm, so sánh cài đặt bảng màu và đốm, đồng thời kiểm tra màu sắc và vùng nhỏ nào còn lại trong SVG đã lưu thực tế.

12 phút đọc
Trên trang này

Đối với quy trình làm việc VTracer PNG-to-SVG, hãy lưu dấu vết đường cơ sở trước khi giảm màu hoặc lọc các vùng nhỏ. Sau đó thay đổi từng điều khiển một và kiểm tra từng SVG đã lưu. Trong thử nghiệm màu phẳng ban đầu của chúng tôi, giới hạn màu đã hợp nhất các vùng quan trọng, trong khi bộ lọc đốm mạnh hơn làm cho các dấu nhỏ có chủ ý biến mất. Tệp nhỏ nhất hoặc bảng màu ngắn nhất không phải là tệp giữ lại tác phẩm nghệ thuật dự định của chúng tôi.

Nếu bạn cần một PNG được theo dõi trực tuyến, hãy bắt đầu miễn phí với PerfectVector và kiểm tra các vùng màu cũng như chi tiết nhỏ của bản xem trước so với bản gốc. Bạn phải mở khóa kết quả trước khi có thể chỉnh sửa hoặc xuất kết quả đó. Các lệnh bên dưới vẫn là quy trình làm việc VTracer cục bộ hoàn chỉnh; không có sự so sánh chất lượng đầu ra giữa các công cụ được thực hiện.

Thử với hình ảnh của chính bạn
Mở công cụ đầy đủ
Dùng thử miễn phí. Thả ảnh vào để xem trước bản vector của bạn, không cần đăng ký.

Ghép các lệnh với CLI đã cài đặt

Hướng dẫn này sử dụng VTracer 1.0.0-alpha.4 CLI chính thức, với trợ giúp thực thi riêng. Nhận tệp nhị phân nền tảng phù hợp từ bản phát hành chính thức. Các ví dụ giả định tệp thực thi có tên vtracer trong thư mục làm việc của bạn, bên cạnh bản sao PNG được phép có tên artwork.png.

Bạn cũng cần một thiết bị đầu cuối và trình xem SVG hoặc trình soạn thảo văn bản thuần túy. Giữ nguyên PNG nguyên vẹn và sử dụng tên tệp đầu ra riêng biệt. Kiểm tra nhị phân thực tế trước khi truy tìm:

./vtracer --version
./vtracer --help

Lệnh phiên bản của chúng tôi trả về vtracer 1.0.0-alpha.4. Nếu trợ giúp của bạn không liệt kê cờ bên dưới, hãy sử dụng tài liệu dành cho giao diện đã cài đặt của bạn. Gói Python là một giao diện riêng biệt; Đối số từ khóa Python và cờ CLI không thể thay thế cho nhau.

Tài liệu chính thức của dự án mô tả việc dò màu, điều khiển bảng màu và CLI. Bài viết này sử dụng tệp thực thi cục bộ đó thay vì báo cáo thử nghiệm bản demo trình duyệt hoặc liên kết Python.

1. Lưu đường cơ sở để giữ các dấu nhỏ có chủ ý

Bắt đầu với một dấu vết đơn giản mà bạn có thể so sánh sau này:

./vtracer artwork.png baseline.svg \
  --mode polygon --color-precision 8 --filter-speckle 0

Chúng tôi đã sử dụng khớp đa giác vì hình ảnh được kiểm soát của chúng tôi chứa các vùng có cạnh thẳng. Đây là đường cơ sở cho tác phẩm nghệ thuật phẳng đó, không phải là cài đặt chung cho mọi bức ảnh hoặc hình minh họa cong.

Ba tùy chọn được đặt tên trả lời các câu hỏi khác nhau:

Lựa chọnNhững gì nó kiểm soátNhững gì cần kiểm tra
--mode polygonChế độ khớp đường cong đã chọnLiệu các đường viền kết quả có phù hợp với nguồn không
--color-precision 8Số bit đáng kể trên mỗi kênh RGBLiệu màu sắc dự định có còn có thể phân biệt được hay không
--filter-speckle 0Cài đặt lọc bản vá nhỏLiệu các nhãn hiệu nhỏ mong muốn có tồn tại được ở đường cơ sở hay không

Mở baseline.svg bên cạnh PNG. Xác định một số vùng quan trọng trước khi thay đổi cài đặt: màu thương hiệu, điểm nhấn riêng biệt nhỏ, đặc điểm mỏng hoặc khoảng cách ngăn cách hai hình dạng. Một hình bóng lớn mịn màng có thể che giấu sự mất mát của bất kỳ thứ nào trong số này.

Hình minh họa
Các mẫu bảng màu khái niệm và các hình dạng màu bên cạnh kính lúp kiểm tra các chi tiết tạo điểm nhấn nhỏ
Kiểm tra riêng màu sắc dự định và các chi tiết nhỏ, sau đó kiểm tra lại cả hai sau mỗi lần thay đổi.

2. So sánh giới hạn màu với bảng màu cố định

CLI đã thử nghiệm cung cấp --max-colors cho giới hạn màu trên và --palette cho các màu hex được cung cấp. bảng màu là tập hợp các màu bạn định sử dụng cho tác phẩm nghệ thuật. Quyết định những màu nào phải giữ nguyên trước khi yêu cầu người đánh dấu giảm bớt chúng.

Biến thể này giữ nguyên các tùy chọn cơ bản và thêm giới hạn ba màu:

./vtracer artwork.png fewer-colors.svg \
  --mode polygon --color-precision 8 --filter-speckle 0 \
  --max-colors 3

Giới hạn trên không phải là lời hứa về chính xác nhiều màu sắc có thể nhìn thấy được. Đầu ra thực tế của chúng tôi chỉ có hai giá trị tô màu đặc duy nhất, bao gồm cả màu trắng. Các vùng màu xanh nước biển và xanh mòng két trở thành cùng một màu trầm, và vùng màu vàng không còn có thể phân biệt được với nền trắng.

Thay vào đó, khi bạn đã có bảng màu dự định, hãy kiểm tra các màu được cung cấp:

./vtracer artwork.png fixed-palette.svg \
  --mode polygon --color-precision 8 --filter-speckle 0 \
  --palette '#ffffff,#17324d,#298d83,#d49c32'

Nguồn vàng của chúng tôi là #e7b64c; bảng màu được cung cấp này đã sử dụng #d49c32 ở vị trí của nó. SVG đã lưu đã sử dụng số vàng mới đó trong khi vẫn giữ lại màu xanh nước biển, xanh mòng két và màu trắng được liệt kê. Đó là sự lựa chọn đổi màu có chủ ý chứ không phải giữ lại bảng màu gốc. Để có những quyết định rộng hơn về việc màu nào có thể hợp nhất mà không làm mất ý nghĩa, hãy sử dụng hướng dẫn giảm bảng màu SVG.

3. Kiểm tra tính năng lọc vùng nhỏ trên một bản sao riêng biệt

Quay lại các tùy chọn cơ bản, sau đó chỉ thay đổi bộ lọc đốm:

./vtracer artwork.png filtered.svg \
  --mode polygon --color-precision 8 --filter-speckle 8

Đốm là những vùng nhỏ biệt lập có thể là tiếng ồn không mong muốn hoặc tác phẩm nghệ thuật có chủ ý. Chỉ riêng kích thước của chúng không cho bạn biết cái nào. Trong lịch thi đấu của chúng tôi, cả 2 × 2 và 8 × 8 dấu hải quân bị cô lập đều hiển thị trong đường cơ sở và biến mất trong biến thể được lọc này.

Hãy coi giá trị cờ là cài đặt để xác minh trên tệp của bạn chứ không phải lời hứa rằng dấu có cùng chiều rộng bằng số sẽ tồn tại. So sánh kết quả đã lưu ở kích thước mong muốn, sau đó phóng to các dấu cụ thể mà bạn muốn giữ lại. Nếu chi tiết mong muốn biến mất, hãy hạ thấp bộ lọc và truy xuất từ ​​PNG gốc.

Kiểm tra lại màu sắc quá. SVG được lọc của chúng tôi đã giới thiệu #fefefe cùng với màu trắng. Quan sát đó là lý do để kiểm tra bảng đầu ra thực tế sau khi thay đổi chi tiết, thay vì giả sử một cài đặt chỉ ảnh hưởng đến thuộc tính có tên trong cờ.

Bốn tệp đã lưu thực tế cho thấy điều gì

Chúng tôi đã tạo một PNG 384 × 256 gốc với nền trắng, khung màu xanh nước biển với tâm màu trắng, hình tam giác xanh mòng két, hình chữ nhật màu vàng và hai dấu hình vuông màu xanh nước biển biệt lập. Tất cả bốn chuyển đổi đều sử dụng cùng một chế độ đầu vào và đa giác. Bảng báo cáo đánh dấu SVG thực tế và kết xuất độc lập, không phải trình chỉnh sửa đích hoặc kiểm tra vật lý.

đầu raMàu tô đặc độc đáo, bao gồm cả nềnNhỏ 2 × 2 và 8 × 8 điểmQuan sát chính
baseline.svgbốnCả hai đều có thể nhìn thấyCác màu nguyên bản được giữ lại trong tài liệu tham khảo thử nghiệm này
fewer-colors.svgHaiCả hai đều có thể nhìn thấy trong màu hợp nhấtMàu xanh hải quân/teal sáp nhập; vùng vàng đọc là màu trắng
filtered.svgNămKhông nhìn thấy đượcDấu vết nhỏ bị mất; giới thiệu màu gần như trắng
fixed-palette.svgbốnCả hai đều có thể nhìn thấyVàng đã đổi thành #d49c32 được cung cấp

Tất cả bốn SVG đều chứa đường dẫn và không có phần tử hình ảnh. Những dữ kiện đó thiết lập dấu vết thực tế trong các tệp này nhưng không phân loại các đường viền hoặc chứng minh việc chỉnh sửa thành công trong một ứng dụng khác. Trung tâm khung màu trắng và nền trong thử nghiệm này mờ đục; đây không phải là bài kiểm tra độ trong suốt PNG.

Đối với màu gốc và dấu hiệu có chủ ý của thiết bị này, chúng tôi sẽ giữ nguyên đường cơ sở. Biến thể bảng màu cố định phù hợp với công việc riêng biệt là thay đổi vàng một cách có chủ ý. Các tệp bị giảm màu và được lọc không đáp ứng được các yêu cầu lưu giữ cụ thể đó. Không có lựa chọn nào trong số này thiết lập một cài đặt trước tốt nhất phổ quát hoặc so sánh với một công cụ theo dõi khác.

Chọn một tập tin bạn có thể giải thích

Trước khi giữ một SVG, hãy ghi lại thông tin đầu vào, phiên bản thực thi, lệnh đầy đủ và lý do bạn chọn. Kiểm tra bảng màu theo vai trò, các vùng, khoảng trống và đường viền cần thiết nhỏ nhất. Sau đó mở nó ở đích thực tế và thử chỉnh sửa hoặc nhập mà công việc của bạn yêu cầu; bước sau đó không phải là một phần của bài kiểm tra này.

Kiểm tra không thành côngHành động tiếp theo
Hợp nhất các màu quan trọngTăng hoặc xóa giới hạn màu hoặc cung cấp bảng màu mong muốn
Những điểm nhấn nhỏ biến mấtSo sánh với đường cơ sở có bộ lọc thấp và truy xuất với cài đặt đốm thấp hơn
Màu trắng hoặc gần trắng xuất hiện bất ngờKiểm tra các phần tô đã lưu thực tế và các vùng hiển thị của chúng trước khi xóa chúng
Lệnh từ chối cờĐọc phiên bản/trợ giúp của nhị phân đó và khớp với tài liệu CLI của nó
Dấu vết vẫn bỏ lỡ một đường viền quan trọngXem lại nguồn hoặc cố ý vẽ lại đặc điểm đó

Thẻ điểm chất lượng theo dõi bổ sung các bước kiểm tra đường nét, khả năng chỉnh sửa và điểm đến ngoài thử nghiệm bảng màu/chi tiết này. Đối với quy trình làm việc đơn sắc rõ ràng, Hướng dẫn Potrace PNG-to-SVG đề cập đến một tác vụ theo dõi khác.

Giữ bản gốc và SVG được chấp nhận cùng nhau. Nếu bạn muốn thử trực tuyến PNG tương tự, hãy bắt đầu miễn phí với PerfectVector và kiểm tra màu sắc mong muốn của bản xem trước cũng như các chi tiết bắt buộc nhỏ nhất dựa trên nguồn của bạn.

Câu hỏi thường gặp

VTracer có thể chuyển đổi PNG màu thành đường dẫn SVG thực tế không?

Đúng. Tất cả bốn tệp trong quy trình làm việc CLI được thử nghiệm của chúng tôi đều chứa đường dẫn và không có phần tử hình ảnh. Kết quả hữu ích vẫn phụ thuộc vào màu sắc và vùng nhỏ nào còn lại sau cài đặt đã chọn.

Max-colors 3 có đảm bảo chính xác ba màu không?

Không. Nó đặt giới hạn trên. Tham chiếu thử nghiệm của chúng tôi đã tạo ra hai màu tô đặc độc đáo, bao gồm màu trắng và mất đi sự phân biệt màu sắc quan trọng. Kiểm tra bảng màu đã lưu thực tế thay vì chỉ kiểm tra số lượng được yêu cầu.

Tại sao các dấu nhỏ lại biến mất sau khi lọc?

Cài đặt đốm có thể loại bỏ các vùng nhỏ. Cả hai dấu vuông có chủ ý trong tham chiếu thử nghiệm của chúng tôi đều biến mất ở mức bộ lọc 8. So sánh với đường cơ sở có bộ lọc thấp và hạ thấp cài đặt nếu tác phẩm nghệ thuật của bạn cần những vùng đó.

Tôi có thể dán những lá cờ này vào ví dụ Python VTracer không?

Sử dụng giao diện và phiên bản bạn đã cài đặt. Hướng dẫn này đã kiểm tra tệp thực thi 1.0.0-alpha.4 và trợ giúp CLI của nó. Các ví dụ liên kết Python sử dụng tài liệu và đối số hàm riêng của chúng.

Nguồn

  1. Dự án VTracer chính thức — dò màu, sử dụng CLI và các tùy chọn bảng màu/chi tiết.
  2. Bản phát hành VTracer 1.0.0-alpha.4 — tệp thực thi được ghim theo phiên bản được sử dụng cho quy trình công việc này.
  3. Gói VTracer Python — giao diện liên kết Python riêng biệt, phân biệt với CLI đã thử nghiệm.

Thêm từ blog

PerfectVector

Biến hình ảnh thành
đường vector gọn sạch, dễ chỉnh sửa

Vector hóa và kiểm tra bản xem trước miễn phí, không giới hạn theo ngày.