PerfectVector
Bởi Claire Yoon

Chuyển WebP thành SVG: đồ thành đường dẫn thật

WebP là ảnh raster nên không thể chỉ lưu thành SVG; bạn phải đồ lại. Tìm hiểu cách biến WebP thành vector sạch, thực sự và tránh vector giả.

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

WebP là ảnh raster, một lưới pixel như JPG hoặc PNG. Tài liệu WebP của Google định nghĩa cả WebP mất dữ liệu lẫn không mất dữ liệu là các định dạng nén ảnh, còn SVG định nghĩa đồ họa vector theo hình và đường dẫn. Vì vậy không có thao tác “Lưu thành SVG” nào biến pixel thành hình học vector; ảnh phải được đồ lại thành hình và đường dẫn trước. (Tổng quan WebP của Google; W3C SVG 2)

Dưới đây là cách thực sự chuyển WebP thành SVG sạch, chỉnh sửa được, những điểm cần chú ý và khi nào bạn không nên mất công.

Nếu nguồn là AVIF thay vì WebP, giữ tệp gốc và dùng công cụ chuyển AVIF thành SVG, tránh thêm bước đổi định dạng trước khi đồ lại.

Ý chính
  • WebP là raster, nên phải đồ lại thành vector thay vì “lưu” thành vector.
  • Cẩn thận với vector giả: công cụ chuyển đổi nhúng WebP vào .svg, nên ảnh vẫn vỡ hạt.
  • WebP có thể mất dữ liệu hoặc không mất dữ liệu. Loại mất dữ liệu mang nhiễu nén, nên bắt đầu bằng nguồn sạch nhất.
  • Hình phẳng, tương phản cao chuyển tốt. Ảnh chụp thì không.
  • Đồ bằng công cụ chuyển WebP thành SVG, rồi kiểm tra tệp thực sự chỉnh sửa được.

Trước hết, phần đa số công cụ chuyển đổi bỏ qua

Nên hiểu rõ điều thực sự xảy ra vì các kết quả tìm kiếm hàng đầu chưa giải thích rõ:

  • WebP lưu pixel. Định dạng WebP hỗ trợ nén mất dữ liệu và không mất dữ liệu, độ trong suốt và hoạt ảnh, nhưng vẫn là raster. Xem đặc tả định dạng chứa WebP của Google.
  • SVG lưu toán học: điểm, đường dẫn và đường cong giữ nét ở mọi kích thước.

Hoạt ảnh phát sinh quyết định riêng: chuyển raster chuyển động thành SVG không tự động giữ chuyển động. Hướng dẫn GIF động thành SVG giải thích khác biệt giữa đồ lại một khung hình và dựng lại hoạt ảnh SVG.

Nếu nguồn là GIF và bạn muốn một ảnh tĩnh chỉnh sửa được, dùng công cụ chuyển khung GIF thành SVG để chọn khoảnh khắc trước khi đồ lại. Giữ hoạt ảnh riêng nếu vẫn cần chuyển động.

Không có cách “chuyển đổi” không mất thông tin giữa hai loại. Từ WebP sang SVG nghĩa là vẽ lại pixel thành hình, tức vector hóa (đồ lại). Đó là lý do chuyển đổi thực sự cần công cụ đồ lại thay vì đổi tên tệp.

Bẫy cần tránh: Tệp SVG được phép nhúng ảnh raster qua phần tử <image>. Tệp như vậy có đuôi .svg, nhưng pixel nhúng không được chuyển thành đường dẫn chỉnh sửa được và vẫn có thể mờ khi phóng to. Xem đặc tả W3C về nội dung nhúng trong SVG. Bạn cần công cụ đồ ảnh thành đường dẫn thật.

Mất dữ liệu hay không mất dữ liệu? Điều này đổi kết quả

WebP có biến thể mất dữ liệu và không mất dữ liệu; loại bạn có ảnh hưởng bản đồ lại:

  • WebP mất dữ liệu, kiểu xuất web phổ biến, dùng nén như JPG nên mang khuyết điểm và mép mềm, nhiễu. Đồ lại ghi cả chúng, nên hãy bắt đầu bằng phiên bản chất lượng cao nhất bạn có. (Cùng vấn đề như chuyển JPG thành SVG.)
  • WebP không mất dữ liệu giữ mép rõ như PNG, nên đồ lại sạch. (Xem chuyển PNG thành SVG không mất chất lượng để biết quy trình với nguồn sạch.)

WebP còn hỗ trợ độ trong suốt qua kênh alpha, nên nếu ảnh có nền trong suốt, hãy dùng công cụ giữ được thuộc tính này. Nếu không, bạn sẽ có hình chữ nhật tô màu ngoài ý muốn phía sau các hình. Xem đặc tả dòng bit WebP không mất dữ liệu của Google.

Cách chuyển WebP thành SVG từng bước

  1. Bắt đầu bằng nguồn tốt nhất. Dùng WebP gốc, chất lượng cao nhất. Nếu là tệp mất dữ liệu bị nén mạnh, hãy dự kiến bản đồ lại nhiều nhiễu hơn.
  2. Dùng công cụ vector hóa thật thay vì công cụ đổi tệp chung. Bạn cần công cụ đồ lại ảnh thành đường dẫn, không phải công cụ nhúng raster.
  3. Vector hóa. Thả WebP vào công cụ chuyển WebP thành SVG để dựng lại ảnh thành đường dẫn sạch, ít nút.
  4. Giản lược màu và giữ độ trong suốt. Gộp màu gần trùng (WebP mất dữ liệu thêm một số màu) và bảo đảm nền trong suốt vẫn trong suốt.
  5. Tải xuống và kiểm tra theo phần dưới.

Quy trình này với PerfectVector trông thế nào?

Mục tiêu với WebP là vector thật: đường dẫn sạch chỉnh sửa được, thay vì pixel được ngụy trang. Đó là đầu ra PerfectVector tạo. Công cụ đồ WebP thành đường dẫn mượt, ít nút, giữ nguyên độ trong suốt và cung cấp trình chỉnh màu để gộp màu thừa do WebP mất dữ liệu thêm vào. Bạn có thể chuyển WebP thành SVG sạch và tự kiểm tra đường dẫn; cũng có thể chuyển những ảnh đầu tiên miễn phí, không cần thẻ tín dụng.

Trước
WebP mất dữ liệu của huy hiệu đơn giản có mép mềm, nhiễu, được nhúng raster vào SVG nên vẫn vỡ hạt khi phóng lớn
WebP bọc trong .svg, vẫn là pixel và vẫn mờ khi đổi kích thước.
Sau
Cùng huy hiệu được đồ thành SVG thật với đường dẫn sạch, ít nút, chỉnh sửa được và giữ nét ở mọi kích thước
Bản đồ lại thật, có đường dẫn sạch, chỉnh sửa được và giữ nét ở mọi kích thước.

Kiểm tra nhanh kết quả. Chuyển WebP thành SVG thực sự có:

  • Đường dẫn chỉnh sửa được thay vì WebP nhúng trong .svg; phóng lớn vẫn phải rõ nét.
  • Số nút thấp, nghĩa là đường cong sạch thay vì hàng nghìn điểm (xem thêm số nút).
  • Độ trong suốt được giữ lại nếu nguồn có, không thêm hình chữ nhật nền ngoài ý muốn.
  • Bảng màu gọn, chỉ màu bạn muốn thay vì màu thừa do WebP mất dữ liệu thêm vào.

Khi nào nên bỏ qua công cụ chuyển đổi?

Đồ lại không phù hợp với mọi WebP:

  • Ảnh chụp và hình chân thực như ảnh trở thành các đốm màu phân mảng, nên hãy giữ raster.
  • Hình nhiều chuyển sắc hoặc chất liệu mất sự tinh tế. Dựng lại bằng hình phẳng nếu cần vector.
  • WebP quá nhỏ hoặc nén quá mạnh không thể cứu. Tìm nguồn tốt hơn hoặc tạo lại hình.

Như thường lệ, vector hóa dành cho hình phẳng mang tính minh họa như logo, biểu tượng và đồ họa đơn giản, không phải ảnh chụp. (Nếu mới tìm hiểu, bắt đầu bằng vector hóa hình ảnh là gì.)

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

Tôi có thể chỉ lưu WebP thành SVG không? Không. WebP là ảnh raster (pixel), còn SVG là vector (hình và đường dẫn). Không thao tác “Lưu thành” nào biến loại này thành loại kia. Ảnh phải được đồ thành hình vector, đó là việc công cụ vector hóa làm.

Vì sao WebP vẫn vỡ hạt sau khi “chuyển” thành SVG? Công cụ chuyển đổi chung có lẽ đã nhúng WebP vào lớp bọc .svg thay vì đồ lại. Đó là vector giả và vẫn vỡ hạt. Dùng công cụ đồ ảnh thành đường dẫn thật, chỉnh sửa được.

Tôi có thể chuyển WebP thành SVG miễn phí không? Có. Tải WebP lên công cụ vector hóa, giản lược màu và tải SVG xuống. Bạn có thể chuyển những ảnh đầu tiên miễn phí, không cần thẻ tín dụng. Chỉ cần xác nhận đầu ra là vector được đồ lại thật thay vì WebP bọc trong .svg.

Độ trong suốt WebP có chuyển sang SVG không? Có thể, nếu bạn dùng công cụ giữ được nó. WebP hỗ trợ độ trong suốt, và bản đồ lại tốt giữ nền trong suốt để không thêm hình chữ nhật tô màu ngoài ý muốn.

Tôi chuyển ảnh chụp từ WebP thành SVG được không? Được, nhưng thông thường không nên. Ảnh chụp có quá nhiều sắc độ và chuyển sắc để thành hình sạch, nên kết quả sẽ là đốm màu phân mảng hoặc tệp rất lớn. Vector hóa dành cho logo, biểu tượng và minh họa.

Nguồn tham khảo

  1. Google for Developers — Định dạng ảnh cho web — Tổng quan chính thức về khả năng mất dữ liệu, không mất dữ liệu và alpha của WebP.
  2. Google for Developers — Đặc tả định dạng chứa WebP — Chi tiết định dạng cho ảnh tĩnh, hoạt ảnh và độ trong suốt.
  3. W3C — Scalable Vector Graphics (SVG) 2 — Tiêu chuẩn định nghĩa mô hình đồ họa vector của SVG.
  4. W3C — Nội dung nhúng trong SVG — Đặc tả cho thấy SVG có thể chứa ảnh raster nhúng mà không chuyển thành đường dẫn.

Bạn có logo hoặc hình WebP cần đổi kích thước? Chuyển thành SVG thật, chỉnh sửa được, đồ lại, giản lược màu rồi tải xuống trong vài giây.

Thêm từ blog

PerfectVector

Biến tệp hình ảnh thành
SVG có thể chỉnh sửa

Không cần thẻ tín dụng