PerfectVector
Bởi Irene Kim

Đồ nét bitmap bằng Vectorpea: Cài đặt và xuất SVG

Sử dụng nút Vectorize Bitmap gốc của Vectorpea, ghi lại cài đặt theo dõi, xuất SVG và kiểm tra các đường dẫn, màu sắc và lỗ mở thực tế của nó trước khi sử dụng.

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

Vectorpea có tính năng theo dõi Vectorize Bitmap gốc. Chọn hình ảnh raster, sử dụng nút Vectorize Bitmap xuất hiện trên thanh công cụ, xem lại cài đặt, sau đó xác nhận và xuất dưới dạng SVG. PNG ba màu ban đầu của chúng tôi đã tạo ra ba đường dẫn SVG thực tế với các màu tô dự định và tâm khung mở. Tệp đã lưu quan trọng hơn một bản xem trước canvas mượt mà.

Nếu bạn muốn một lộ trình trực tuyến khác cho hình ảnh bạn đã có, hãy bắt đầu miễn phí với PerfectVector và kiểm tra hình bóng, vùng màu và phần mở của bản xem trướ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ả đó. Hướng dẫn này hoàn thành lộ trình gốc của Vectorpea và không so sánh chất lượng đầu ra của các công cụ.

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ý.

Sử dụng ứng dụng Vectorpea hiện tại, sau đó chọn bitmap

Mở Vectorpea và giữ một bản sao riêng của hình ảnh raster gốc. Bạn cần có quyền truy cập trình duyệt, quyền xử lý tác phẩm nghệ thuật và trình xem SVG hoặc trình chỉnh sửa văn bản thuần túy để kiểm tra tệp đã lưu. Lộ trình tải clipboard bên dưới cũng cần truy cập vào clipboard hình ảnh.

Kiểm tra tên ứng dụng khi theo dõi kết quả tìm kiếm. Hướng dẫn Photopea Vectorize Bitmap mô tả menu Hình ảnh của Photopea; đó là một quy trình làm việc ứng dụng khác. Các cuộc thảo luận trước đây như Vectorpea issue 72 cung cấp bối cảnh lịch sử, trong khi các biện pháp kiểm soát Vectorpea hiện tại và quá trình xuất thực tế sẽ xác định những gì hướng dẫn này đã hoàn thành.

Trong quá trình chạy, chúng tôi đã tạo một tài liệu mới và dán PNG gốc thông qua Edit → Paste (Chỉnh sửa → Dán). Raster xuất hiện trong tài liệu có tên image.ai. Chọn hình ảnh raster đó trên khung vẽ. Sau đó, nút Vectorize Bitmap sẽ xuất hiện trên thanh công cụ bên dưới các menu chính. Đó là ngay trước khi kiểm soát Opacity trong phiên thử nghiệm.

Nếu nút bị thiếu, trước tiên hãy kiểm tra xem nội dung nào được chọn. Một tài liệu, một nhóm đường dẫn và một bitmap thực tế là những thông tin đầu vào khác nhau. Chọn raster bạn định theo dõi trước khi tìm kiếm lệnh dành riêng cho bitmap. Đối với SVG hiện có, Hướng dẫn loại đối tượng SVG giúp phân biệt đường dẫn, nhóm và hình ảnh được nhúng.

Ghi lại đường cơ sở trước khi thay đổi cài đặt theo dõi

Nhấp vào Vectorize Bitmap để mở hộp thoại gốc. Hộp thoại được thử nghiệm hiển thị Màu sắc, Hoạt hình / Ảnh, Giảm nhiễu và Hợp nhất màu, sau đó là OK. Phiên ứng dụng được ghi lại của chúng tôi sử dụng nhãn giao diện tiếng Hàn; tên ở đây tương đương với tiếng Anh của chúng.

Chúng tôi đã sử dụng trạng thái cài đặt được quan sát này cho điều khiển màu phẳng ban đầu:

Điều khiểnTrạng thái đã thử nghiệmChi tiết cần kiểm tra trước khi chấp nhận dấu vết
Màu sắc20Liệu các vùng màu dự định có còn khác biệt hay không
Cách thứcHoạt hìnhHình bóng và các góc có phù hợp với tác phẩm nghệ thuật không
Giảm tiếng ồnTắtCho dù dấu vết nhỏ là chi tiết có chủ ý hay mảnh vỡ đi lạc
Hợp nhất màu sắcTRÊNCác vùng cần màu riêng biệt vẫn có thể phân biệt được

Hãy coi đây là đường cơ sở được ghi lại, không phải là giá trị đặt trước chung. Chúng tôi không so sánh tất cả các kết hợp hoặc chạy thử nghiệm Chế độ ảnh riêng biệt. Nếu bạn thay đổi cài đặt cho hình ảnh của riêng mình, hãy thay đổi từng cài đặt một và so sánh một chi tiết cụ thể, chẳng hạn như một lỗ nhỏ hoặc hai màu liền kề.

Nhấp vào OK khi bạn muốn áp dụng dấu vết. Trong tài liệu của chúng tôi, bảng điều khiển Lớp sau đó hiển thị Path 0, Path 1 và Path 2 trong Background. Những mục nhập đó là bước kiểm tra hữu ích đầu tiên để đảm bảo rằng bạn đang xem dấu vết nhưng SVG đã xuất vẫn cần kiểm tra.

Dấu vết Vectorpea thực tế
Canvas Vectorpea đã cắt hiển thị khung, hình tam giác và hình chữ nhật được theo dõi bên cạnh các mục nhập lớp Đường dẫn 0, Đường dẫn 1 và Đường dẫn 2 thực tế
Cắt canvas và danh sách lớp sau khi theo dõi: Đường dẫn 0–2 xuất hiện trong Nền.

Xuất dấu vết dưới dạng SVG

Với tác phẩm nghệ thuật được theo dõi hiện có, hãy chọn File → Export As → SVG (Tệp → Xuất dưới dạng → SVG), sau đó Save (Lưu) trong quy trình xuất. Giữ riêng PNG gốc và đặt tên tệp riêng biệt cho SVG để bạn có thể so sánh cả hai sau này.

Quá trình chạy của chúng tôi đã hoàn thành quá trình xuất SVG đó và giữ lại tệp thực tế. Tab tài liệu kết thúc bằng .ai không xác định định dạng được xuất; việc xuất SVG đã chọn đã thực hiện. Hướng dẫn này không chứng minh việc mở lại tệp gốc hoặc vượt qua chỉnh sửa thủ công sau này.

Mở SVG đã lưu trong trình xem và kiểm tra cấu trúc văn bản hoặc đối tượng của nó. Tìm đường dẫn, bất kỳ hình ảnh được nhúng nào, các giá trị điền quan trọng và giới hạn tài liệu. Đối với nội dung dựa trên hình ảnh hoặc nội dung hỗn hợp, Hướng dẫn kiểm tra nội dung raster SVG giải thích cách kiểm tra nội dung tham chiếu của thành phần hình ảnh.

Điều khiển ban đầu thực sự tạo ra những gì

Chúng tôi đã tạo một PNG 320 × 240 không nhạy cảm với khung màu xanh nước biển và phần giữa trống, một hình tam giác màu vàng và một hình chữ nhật màu xanh mòng két trên nền trong suốt. Chúng tôi đã dán raster gốc đó vào Vectorpea, áp dụng cài đặt gốc đã ghi và lưu SVG kết quả. Sau đó, chúng tôi đã kiểm tra đánh dấu thực tế và hiển thị tệp đã lưu một cách độc lập.

Kiểm traĐã lưu kết quả từ tài liệu tham khảo thử nghiệm này
Các phần tử đường dẫnBa, có tên là Path 0, Path 1 và Path 2
Các phần tử hình ảnh được nhúngKhông có
Giá trị điền rắn#17324d, #e7b64c, #298d83, khớp với ba vùng rắn ban đầu
Khung mở và không gian bên ngoàiTrong suốt trong SVG được hiển thị
Vải bạtviewBox="0 0 320 240"
Kích thước tệp660 byte

Giá trị Màu sắc là 20, tuy nhiên bản xuất này chứa ba phần tử đường dẫn. Giá trị cài đặt đó không phải là số lượng đối tượng mà bạn có thể đọc lại từ mọi kết quả. Tổng quát hơn, chỉ riêng số lượng đường dẫn không cho bạn biết liệu các chi tiết phù hợp có tồn tại hay không.

Đường dẫn khung được sử dụng fill-rule="evenodd". Quy tắc điền xác định phần nào của đường dẫn được tính là bên trong; Đặc tả quy tắc điền SVG giải thích cách các đường dẫn phụ kèm theo có thể để lại một lỗ mở. Kiểm tra kết xuất đã lưu trên nền tương phản thay vì cho rằng phần trung tâm trông có màu trắng là trong suốt.

Đây là kết quả từ một hình ảnh hình học đơn giản và một trạng thái cài đặt. Việc điền chính xác trong tài liệu tham khảo thử nghiệm này không chứng minh khả năng duy trì màu sắc chính xác cho mọi logo, bản quét hoặc ảnh. Không có quá trình nhập trình soạn thảo đích, mở lại tài liệu gốc, đổi màu thủ công hoặc đầu ra vật lý đã được thử nghiệm.

Kiểm tra tập tin của riêng bạn trước khi gọi dấu vết kết thúc

Sử dụng raster nguyên bên cạnh SVG đã lưu và kiểm tra bốn thứ:

  1. Hình bóng và các khoảng trống: so sánh đường viền bên ngoài, các góc, quầy và các khoảng cách hẹp ở kích thước bạn cần.
  2. Vùng màu: so sánh các màu tô quan trọng với bảng màu bạn dự định. Một vùng trông gần có thể vẫn cần chỉnh sửa màu sắc một cách có chủ ý.
  3. Dấu trống: đặt nền tương phản phía sau SVG. Nó sẽ hiển thị thông qua các khe hở cần thiết và các khu vực bên ngoài.
  4. Đối tượng và khung vẽ: kiểm tra cấu trúc đường dẫn và giới hạn tài liệu. Nếu việc chỉnh sửa tiếp theo có vấn đề, hãy thử chỉnh sửa dự định trên một bản sao và xác minh kết quả đã lưu của nó.
Vấn đềKiểm tra tiếp theo
Vectorize Bitmap không hiển thịChọn hình ảnh raster thay vì đường dẫn hoặc nhóm hiện có
Các tính năng nhỏ biến mấtSo sánh nguồn với đường cơ sở và cài đặt duy nhất bạn đã thay đổi
Màu sắc hoặc vùng không khớpXem lại Màu sắc và cài đặt hợp nhất được quan sát, sau đó kiểm tra bản xuất mới
Trung tâm của một chữ cái hoặc khung có vẻ đầyKiểm tra nền tương phản và kiểm tra quy tắc đường viền/tô màu bên trong
Tệp đã xuất vẫn chứa hình ảnhXác định những gì thực sự được xuất và liệu dấu vết gốc có được áp dụng hay không

Để có kết quả chuyển giao đầy đủ hơn, hãy sử dụng thẻ điểm chất lượng theo dõi vectơ. Nếu một đường viền quan trọng không rõ ràng trong raster, việc vẽ lại thủ công có thể hữu ích hơn việc thay đổi cài đặt lặp đi lặp lại. Nếu bạn muốn thử một lộ trình khác có cùng nguồn, hãy bắt đầu miễn phí với PerfectVector và kiểm tra hình bóng, vùng màu và phần mở của bản xem trước so với bản gốc.

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

Vectorpea có tính năng Vectorize Bitmap gốc không?

Đúng. Trong ứng dụng hiện tại đã được thử nghiệm, việc chọn raster đã dán sẽ hiển thị nút thanh công cụ Vectorize Bitmap. Việc áp dụng hộp thoại của nó đã tạo ra các mục nhập đường dẫn hiển thị và bản xuất SVG thực tế chứa các đường dẫn không có hình ảnh được nhúng.

Tôi có nên làm theo hướng dẫn menu Hình ảnh của Photopea trong Vectorpea không?

Sử dụng các điều khiển Vectorpea hiện tại. Quá trình chạy Vectorpea của chúng tôi đã sử dụng nút thanh công cụ xuất hiện sau khi chọn raster. Menu Hình ảnh được ghi lại của Photopea thuộc về một quy trình làm việc của ứng dụng riêng biệt.

Màu 20 có nghĩa là SVG sẽ có 20 đường dẫn phải không?

Không. Tham chiếu thử nghiệm của chúng tôi đã sử dụng Màu 20 và xuất ba đường dẫn. Kiểm tra các đối tượng thực tế và các khu vực dự định thay vì coi giá trị cài đặt là số lượng đường dẫn được đảm bảo.

Thử nghiệm có giữ được màu gốc và độ mở khung không?

Có, đối với điều khiển ba màu ban đầu này. SVG chứa ba giá trị tô đậm chính xác, đồng thời phần mở khung và không gian bên ngoài được hiển thị trong suốt. Điều này không đảm bảo kết quả giống nhau cho mọi hình ảnh.

Nguồn

  1. Ứng dụng Vectorpea — các điều khiển theo dõi gốc và quy trình xuất SVG đã hoàn thành.
  2. Tài liệu Bitmap Photopea Vectorize — xác định quy trình làm việc của menu Photopea riêng biệt có thể xuất hiện trong kết quả tìm kiếm.
  3. Vectorpea số 72 — bối cảnh yêu cầu tính năng lịch sử, khác với bằng chứng ứng dụng hiện tại.
  4. Quy tắc điền SVG của W3C — các đường dẫn phụ kèm theo và quy tắc điền chẵn.

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.