Khắc phục lỗi nền trong suốt khi chuyển SVG sang PNG
Hướng dẫn này tập trung vào việc tìm nguyên nhân của các vấn đề sau khi chuyển SVG sang PNG. Để xem các bước chuyển đổi cơ bản, hãy đọc Chuyển SVG có nền trong suốt.
Nền trắng không phải lúc nào cũng có nghĩa là mất độ trong suốt
Mở PNG trong trình chỉnh sửa có hiển thị độ trong suốt, hoặc đặt ảnh trên nền có màu. Trình xem có thể chỉ đang hiển thị màu trắng phía sau các pixel trong suốt. Nếu vùng trắng thực sự là một phần của ảnh, hãy kiểm tra SVG xem có hình chữ nhật nền không trong suốt, hình có màu tô hoặc ảnh raster nhúng hay không.
Công cụ chuyển SVG sang PNG không xóa các đối tượng đó. Hãy chỉnh sửa SVG nguồn khi có thể. Để tách chủ thể trong ảnh raster, công cụ tạo nền trong suốt thực hiện một thao tác riêng và kết quả cần được kiểm tra.
Không có tùy chọn độ trong suốt cần bật
Công cụ này đọc một SVG và cung cấp chiều rộng, chiều cao theo pixel cùng thiết lập nén PNG. Các vùng vốn trong suốt có thể giữ nguyên mà không cần ô chọn Giữ độ trong suốt hay Kênh alpha. Công cụ không có chức năng xóa màu nền hoặc bộ chọn chế độ PNG-8/PNG-24.
Tìm nguyên nhân lỗi đường viền và chi tiết bị thiếu
| Biểu hiện | Điểm cần kiểm tra |
|---|---|
| Đường cong bị răng cưa | Kích thước xuất đã đủ lớn cho kích thước hiển thị chưa? Ảnh bitmap nhúng có đủ pixel không? |
| Quầng trắng | Kiểm tra nét, bóng đổ và pixel quanh chủ thể trong nguồn; tăng mức xử lý khi nén không loại bỏ quầng viền. |
| Chữ trông khác | Bộ kết xuất có thể không có phông chữ của nguồn. Chuyển phần chữ quan trọng thành đường vector trong trình chỉnh sửa vector khi cần giữ chính xác hình dáng. |
| Thiếu đồ họa hoặc định dạng | Kiểm tra ảnh liên kết và CSS bên ngoài; chuẩn bị SVG có đầy đủ tài nguyên ngay trong tệp. |
| Bóng đổ hoặc mặt nạ khác đi | So sánh cách các hiệu ứng nguồn được kết xuất và đơn giản hóa hiệu ứng không được hỗ trợ trong trình chỉnh sửa nguồn. |
Các trường hợp đặc biệt
Kiểm tra từng hiệu ứng trong PNG đã tải xuống thay vì cho rằng mọi bộ kết xuất SVG đều tạo ra pixel giống nhau. Ảnh chụp nhúng vẫn giữ nền không trong suốt của chính nó trừ khi ảnh nguồn đó được chỉnh sửa. Độ mờ đục của một đường vector không thể xóa hình chữ nhật trắng nằm bên dưới.
SVG có ảnh raster nhúng
Nếu SVG chứa ảnh raster:
- Phần raster giữ độ trong suốt ban đầu
- Phần vector được chuyển đổi bình thường
- Kiểm tra ảnh nhúng có độ trong suốt hay không
Hiệu ứng trong suốt phức tạp
Với SVG có:
- Hiệu ứng làm mờ
- Bóng đổ
- Chế độ hòa trộn
Những hiệu ứng này có thể cho kết quả khác sau khi chuyển đổi. Hãy kiểm tra và điều chỉnh khi cần.
Thành phần bán trong suốt
SVG có các giá trị độ mờ đục:
- Có thể làm tăng dung lượng tệp
- Cần kiểm tra hình thức có chính xác sau khi chuyển đổi không
Kiểm tra độ trong suốt
Thực hiện các kiểm tra sau trên PNG đã tải xuống. Họa tiết ô caro được vẽ trong ảnh gốc là nội dung ảnh thông thường; nền ô caro của trình xem là cách hỗ trợ hiển thị. Hãy so sánh trên ít nhất hai màu khác nhau để phân biệt. Ví dụ HTML dùng cho trang kiểm tra riêng của bạn.
Cách kiểm tra nhanh
- Mở PNG trong trình chỉnh sửa ảnh
- Tìm nền ô caro (biểu thị vùng trong suốt)
- Thêm một lớp màu phía sau
- Kiểm tra đồ họa có hiển thị đúng không
Kiểm tra trong trình duyệt
<div style="background: linear-gradient(45deg, #333, #666)">
<img src="your-graphic.png" alt="Transparency test">
</div>
Kiểm tra để đảm bảo không xuất hiện khung trắng.
Tối ưu PNG trong suốt
Bắt đầu với kích thước thực sự cần dùng. Nén PNG không mất dữ liệu thay đổi mức xử lý khi mã hóa, không thay đổi pixel nào là trong suốt. Giảm số màu trong bảng màu bằng một trình chỉnh sửa khác có thể giảm dung lượng nhưng làm thay đổi vùng chuyển màu và đường viền mềm. Đổi kích thước sẽ loại bỏ hoặc lấy mẫu lại pixel.
Giữ một bản ở kích thước gốc, mỗi lần chỉ đổi một thiết lập rồi so sánh các bản tải xuống. Kiểm tra đường viền trên nền sáng và tối sau mỗi lần tối ưu. Không có mức giảm cố định 20–50% hay 40–80% áp dụng cho mọi đồ họa. Nếu nơi sử dụng chấp nhận WebP, hãy so sánh một bản xuất WebP riêng với PNG thay vì cho rằng một định dạng luôn nhỏ hơn.
Mỗi lần chỉ so sánh một thay đổi
Giữ SVG gốc, chỉ thay đổi một thuộc tính của nguồn hoặc một kích thước đầu ra, rồi so sánh PNG mới trên nền sáng và tối. Các ô kích thước nhận tối đa 8192 px mỗi chiều. Nén thay đổi mức xử lý khi mã hóa PNG, không thay đổi mức alpha hay chất lượng ảnh.
Kiểm tra kích thước và phần đệm riêng với kênh alpha
Logo trong suốt vẫn có thể trông không đúng vì chủ thể quá nhỏ trong vùng vẽ. Kiểm tra viewBox của SVG và vị trí hình vẽ trong trình chỉnh sửa nguồn. Thêm hoặc bớt phần đệm tại đó; các ô chiều rộng và chiều cao của công cụ chuyển đổi chỉ đổi kích thước trong một khung giới hạn, không cung cấp trình chỉnh sửa phần đệm của vùng vẽ.
Với tài nguyên màn hình 2×, tính kích thước gấp đôi kích thước hiển thị dự kiến và giữ nguyên tỷ lệ. Xuất và kiểm tra từng kích thước riêng. Tên tệp như logo@2x.png là quy ước đặt tên, không phải thiết lập tạo thêm chi tiết.
<img src="logo.png" srcset="logo@2x.png 2x" alt="Company logo">
Cả hai tệp phải tồn tại trên website. Kiểm tra kích thước và nền thực tế khi hiển thị; đoạn mã không thêm độ trong suốt cho ảnh nào. Nếu logo có quầng viền ở cả hai kích thước, hãy quay lại kiểm tra đường viền của nguồn thay vì phóng lớn liên tục.
Câu hỏi thường gặp
Nén mạnh hơn có sửa được đường viền trong suốt không?
Không. Hãy kiểm tra thiết kế nguồn và kích thước pixel. Nén không phải công cụ sửa đường viền.
Có thể áp dụng cách sửa cho cả thư mục tại đây không?
Không. Trang nhận một SVG cho mỗi tác vụ. Chỉnh sửa nguồn trong trình chỉnh sửa, rồi chuyển đổi và kiểm tra từng tệp riêng.
Thêm công cụ cho lần xử lý ảnh tiếp theo
Khám phá các công cụ ImgConvert để chuyển đổi, xử lý tệp PDF và GIF.
- Công cụ chuyển đổi ảnh
- Công cụ PDF
- Công cụ GIF