Cách nhận biết SVG có chứa ảnh raster hay không

Có, SVG có thể chứa ảnh raster. Nó có thể chứa đường dẫn vector và pixel trong cùng tài liệu, hoặc gần như chỉ là vỏ bọc quanh PNG hoặc JPEG. Phần mở rộng .svg cho biết định dạng vỏ chứa, không cho biết mọi phần nhìn thấy có phải vector không.

Cách kiểm tra đáng tin cậy là xem cả đối tượng và mã nguồn tệp. Phóng lớn giúp nhận thấy vấn đề, nhưng không cho biết ứng dụng đang raster hóa bản xem trước hay pixel thực sự được lưu trong SVG.

Với ứng dụng WPF, hướng dẫn biểu diễn SVG trong WPF tách nguồn SVG khỏi đối tượng vẽ dạng gốc của WPF và đầu ra bitmap. Kiểm tra ứng dụng nhận gì trước khi xem hiển thị đã raster hóa là bằng chứng về tệp gốc.

SVG có thể chứa gì

SVG là định dạng đồ họa dựa trên XML và mô hình nội dung rộng hơn chỉ đường dẫn. Đặc tả nội dung nhúng SVG 2 định nghĩa phần tử <image> đặt toàn bộ tệp được tham chiếu trong hình chữ nhật. Tệp đó có thể là PNG, JPEG hoặc SVG khác.

Điều này tạo bốn cấu trúc phổ biến:

Nội dung kết hợp không tự động là sai. Bản đồ có thể dùng đường dẫn cho nhãn và ranh giới trong khi giữ lớp vệ tinh có sắc độ dưới dạng raster. Đồ họa sản phẩm có thể đặt huy hiệu chỉnh sửa được trên ảnh chụp. Vấn đề bắt đầu khi bạn mong chuyển đổi tạo đường dẫn có thể chỉnh sửa nhưng nhận pixel trong vỏ chứa khác.

Kiểm tra 1: xem đối tượng

Mở SVG trong Illustrator, Inkscape, Affinity Designer hoặc trình biên tập khác có bảng Objects hoặc Layers. Chọn vùng nghi là raster.

• Một đối tượng chữ nhật duy nhất được ghi là ảnh là bằng chứng mạnh về nội dung ảnh.
• Nút nhìn thấy dọc mép thực tế của tác phẩm cho thấy hình học vector.
• Đường dẫn cắt có thể che ảnh chữ nhật, nên mở rộng cây lớp hoặc đối tượng trước khi quyết định.
• Đường dẫn ở nơi khác không chứng minh cả tài liệu là vector. Một tệp có thể chứa cả hai.

Kiểm tra này hữu ích cho nhà thiết kế không muốn đọc XML, nhưng có một giới hạn: đối tượng <image> chữ nhật có thể tham chiếu SVG khác. Kiểm tra nguồn cho biết đối tượng thực sự tải gì.

Kiểm tra 2: xem mã nguồn SVG

Tạo bản sao rồi mở tệp .svg trong trình sửa văn bản thuần. Tìm <image. Nếu không có phần tử ảnh, cơ chế nhúng ảnh phổ biến không hiện diện. Nếu tìm thấy, đọc giá trị href.

PNG nhúng thường bắt đầu như sau:

<image href="data:image/png;base64,iVBORw0KGgo..." />

JPEG nhúng thường bắt đầu bằng data:image/jpeg;base64,. Tài liệu URL dữ liệu của MDN giải thích dữ liệu được đặt trực tiếp trong URL, với mã hóa Base64 tùy chọn. Khối dữ liệu rất dài, khó đọc là bình thường với dạng này.

Raster liên kết trông giống như:

<image href="photos/product-shot.png" />

PNG đó không lưu bên trong SVG. Tài liệu phụ thuộc tệp riêng ở đường dẫn đó. Di chuyển hoặc gửi SVG qua email mà thiếu ảnh có thể khiến tác phẩm biến mất.

Cuối cùng, đây không phải bằng chứng về nội dung raster:

<image href="icons/mark.svg" />

Tài liệu <image> trên MDN lưu ý rõ phần tử có thể hiển thị định dạng raster hoặc SVG khác. Kiểm tra loại phương tiện hoặc phần mở rộng trước khi phân loại.

Ba cấu trúc bên trong hoặc bên cạnh SVG

Nhúng và liên kết là những vấn đề khác nhau

Khi nhập ảnh, Inkscape có thể liên kết hoặc nhúng. Hướng dẫn nhập ảnh mô tả rõ đánh đổi: liên kết giữ SVG nhỏ hơn nhưng khiến tài liệu phụ thuộc vị trí ảnh; nhúng khiến SVG tự chứa đầy đủ nhưng tăng dung lượng.

Sự khác biệt đó quan trọng khi bàn giao:

• Raster nhúng: chuyển được như một tệp, nhưng vẫn bị giới hạn độ phân giải và thường lớn hơn mong đợi nhiều.
• Raster liên kết: dễ cập nhật độc lập hơn, nhưng dễ hỏng khi di chuyển giữa thư mục, máy tính, trang web hoặc nhà cung cấp.
• Đường dẫn vector: chỉnh sửa được như hình học, nhưng chỉ khi nguồn đã được đồ hoặc vẽ thành đường dẫn ngay từ đầu.

Nhúng là đóng gói, không phải vector hóa. Base64 không chuyển pixel thành đường cong. Nếu chuẩn bị tác phẩm stock, làm theo kiểm tra bài nộp vector Adobe Stock để kiểm tra thêm bảng vẽ, khả năng chỉnh sửa và nguồn.

Vì sao chỉ phóng lớn là chưa đủ

Nếu vùng đáng ngờ lộ khối pixel khi phóng lớn trong nhiều trình xem, có lẽ nó là raster. Tuy nhiên, trình xem có thể raster hóa SVG hoàn toàn hợp lệ để làm ảnh thu nhỏ, canvas, bản xem trước in hoặc bộ nhớ đệm nhập. Ngược lại, PNG nhúng độ phân giải cao có thể trông mượt ở mức phóng thường và ẩn trong tài liệu mà không bị phát hiện.

Dùng phóng lớn để kiểm tra triệu chứng rồi xác nhận qua đối tượng hoặc nguồn. Hướng dẫn vì sao SVG bị vỡ hạt rộng hơn tách nội dung nhúng khỏi hành vi trình xem và kết xuất biểu tượng nhỏ. Với ứng dụng canvas, so sánh nhập ảnh và đường dẫn có thể chỉnh sửa trong Konva trước khi xem một nút ảnh là vấn đề của nguồn SVG.

Quyết định giữ, liên kết lại hoặc thay thế

Giữ raster khi pixel có chủ ý

Ảnh chụp, bản quét, kết cấu, ánh sáng mềm và chi tiết tranh phức tạp thường phù hợp với raster. Nếu SVG dùng để kết hợp ảnh đó với nhãn hoặc lớp phủ vector, tệp kết hợp có thể là thiết kế đúng. Xác nhận raster đủ độ phân giải ở kích thước vật lý cuối và quyết định bản bàn giao nên tự chứa đầy đủ hay đóng gói cùng tài nguyên liên kết.

Liên kết lại hoặc nhúng khi vấn đề là khả năng di chuyển

Nếu ảnh liên kết biến mất trên máy khác, đóng gói SVG và ảnh với cùng cấu trúc thư mục tương đối hoặc nhúng ảnh trước khi bàn giao. Điều này sửa tài nguyên thiếu. Nó không khiến ảnh chỉnh sửa được như đường dẫn.

Thay raster khi đã hứa có đường dẫn

Nếu công cụ chuyển đổi bọc logo phẳng, biểu tượng hoặc tranh nét trong SVG, tìm PNG hoặc JPEG gốc. Nếu không có bản gốc, trích xuất ảnh nhúng hoặc xuất đối tượng đó ở kích thước gốc. Sau đó chuyển ảnh thành đường dẫn vector, kiểm tra hình và thay đối tượng <image> bằng kết quả vector đã xác minh.

PerfectVector hữu ích để tái dựng tác phẩm phẳng phù hợp thành hình có thể chỉnh sửa. Nó không tự biến ảnh chụp sắc độ liên tục thành bộ đường dẫn nhỏ, trung thực. Với ảnh chụp, giữ raster trừ khi mục tiêu là cách diễn giải chủ động giảm bậc màu. Nếu cần bản bàn giao PNG từ SVG đã duyệt, hãy kết xuất trực tiếp ở kích thước pixel cuối bằng Sharp; phóng PNG nhỏ không thêm chi tiết cho bất kỳ ảnh raster nhúng nào trong SVG đó.

Người dùng Scratch nên kiểm tra vì sao Convert to Vector không đồ bitmap trước khi xuất thêm vỏ bọc.

Dựng lại hiệu ứng bị raster hóa khi xuất

Một số SVG chủ yếu là vector nhưng chứa bóng đổ, làm mờ, kết cấu hoặc hiệu ứng không hỗ trợ đã raster hóa. Quyết định hiệu ứng có cần giữ chỉnh sửa được và dễ trao đổi không. Dựng lại hiệu ứng đơn giản bằng tính năng vector được hỗ trợ, chủ động gộp thành raster ở độ phân giải bàn giao hoặc xóa. Đồ bóng mềm thường tạo hình nhiễu thay vì hiệu ứng tốt hơn.

Kiểm tra bàn giao cho SVG kết hợp

Trước khi gửi tệp đến trang web, nhà in, máy cắt hoặc cộng tác viên:

1. Tìm trong nguồn <image, data:image/, .png, .jpg và .jpeg.
2. Xác nhận mỗi tài nguyên được tham chiếu nên là raster, vector hay không nên có.
3. Tạm di chuyển tệp liên kết và mở lại SVG để lộ phụ thuộc bị hỏng.
4. Chọn tác phẩm quan trọng và xác minh phần cần chỉnh sửa là đường dẫn.
5. Kiểm tra kích thước pixel gốc của raster so với kích thước hiển thị hoặc in cuối.
6. Mở lại bản bàn giao trong ứng dụng thứ hai.
7. Giữ nguồn gốc và bản duyệt raster khi diện mạo quan trọng hơn khả năng chỉnh sửa.

Với cắt hoặc chế tạo, xóa nội dung raster trang trí khỏi tệp máy và thực hiện kiểm tra trước SVG để cắt. Máy cắt đi theo đường dẫn; nó không biến ảnh chụp nhúng thành đường viền cắt.

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

SVG có thể chứa PNG hoặc JPEG không? Có. Phần tử ảnh SVG có thể tham chiếu PNG hoặc JPEG dưới dạng tệp riêng hoặc chứa dữ liệu bên trong SVG. Raster giữ hành vi dựa trên pixel ban đầu.

Thẻ ảnh có luôn nghĩa SVG chứa ảnh raster không? Không. Phần tử ảnh cũng có thể tham chiếu SVG khác. Kiểm tra giá trị href hoặc xlink:href cũ về loại phương tiện, URL dữ liệu hoặc tên tệp trước khi phân loại.

Làm sao biết raster được nhúng hay liên kết? Ảnh nhúng thường có href bắt đầu bằng data:image, nên byte nằm trong SVG. Ảnh liên kết có đường dẫn hoặc URL như images/photo.png và phụ thuộc tài nguyên riêng đó.

Tôi có thể xóa ảnh nhúng khỏi SVG không? Có. Xóa nếu không cần, thay bằng tài nguyên raster có chủ ý hoặc vector hóa tác phẩm phẳng phù hợp rồi thay bằng đường dẫn tạo ra. Giữ bản sao lưu trước khi chỉnh XML.

Vì sao SVG chứa cả đường dẫn lẫn ảnh? Đó là SVG kết hợp. Tệp có thể chủ động kết hợp ảnh chụp với lớp phủ vector hoặc công cụ xuất đã raster hóa hiệu ứng. Kiểm tra phần nào cần chỉnh sửa được trước khi thay đổi.

Nguồn tham khảo

1. W3C — Nội dung nhúng SVG 2 — Định nghĩa phần tử <image>, href và tài nguyên raster hoặc SVG nó có thể tham chiếu.
2. MDN — SVG <image> — Tham chiếu thực tế về nội dung ảnh hỗ trợ và hành vi kích thước.
3. Hướng dẫn Inkscape cho người mới — Nhập ảnh — Giải thích ảnh nhập liên kết và nhúng cùng đánh đổi về khả năng di chuyển.
4. MDN — URL dữ liệu — Ghi nhận lược đồ data: thường dùng để lưu dữ liệu ảnh trong SVG.

Bạn thấy bitmap được bọc ở nơi cần đường dẫn chỉnh sửa được? Chuyển tác phẩm phẳng gốc thành vector thực sự, mở lại SVG và xác minh các đối tượng quan trọng giờ chọn được như hình.