Chuyển SVG sang PNG và giữ nền trong suốt có sẵn

Dùng SVG sang PNG khi website, tài liệu hoặc trình chỉnh sửa cần bản raster của thiết kế vector. Các vùng vốn trong suốt trong SVG sau khi kết xuất có thể giữ độ trong suốt trong PNG. Công cụ chuyển đổi không xóa nền không trong suốt.

Vì sao nên dùng PNG trong suốt?

PNG trong suốt cần thiết cho:

• Đặt logo - Dùng được trên nền màu bất kỳ
• Bộ biểu tượng - Hiển thị nhất quán ở mọi nơi
• Lớp phủ - Các lớp trong thiết kế và bố cục ghép
• Đồ họa web - Đặt linh hoạt mà không có khung trắng
• Tài nguyên ứng dụng - Thành phần giao diện thích ứng với chủ đề

SVG và độ trong suốt

PNG có thể lưu kênh alpha, nhưng chỉ có phần mở rộng PNG không chứng minh rằng các pixel là trong suốt. PNG-24 và PNG-32 là nhãn được dùng trong trình chỉnh sửa; công cụ chuyển đổi này không có bộ chọn chế độ màu. Hình nền bên trong SVG vẫn là nội dung và cần được chỉnh sửa ở nguồn.

SVG xử lý độ trong suốt như thế nào?

SVG vốn hỗ trợ độ trong suốt:

• Mặc định không có nền (trong suốt)
• Màu RGBA cho vùng tô bán trong suốt
• Thuộc tính độ mờ đục cho các phần tử
• Chế độ hòa trộn cho hiệu ứng phức tạp

Giữ độ trong suốt trong PNG

PNG hỗ trợ kênh alpha đầy đủ:

• 256 mức độ trong suốt (8-bit)
• Đường viền khử răng cưa mượt
• Vùng chuyển màu bán trong suốt

Chuyển đổi một SVG

1. Chọn một tệp SVG có dung lượng tối đa 20 MB và chờ tải lên.
2. Để trống kích thước để giữ kích thước nguồn, hoặc nhập giới hạn pixel tối đa 8192 px mỗi chiều. Khi nhập cả hai chiều, ảnh được thu phóng theo tỷ lệ để nằm vừa trong khung đó.
3. Bắt đầu với mức nén PNG Cân bằng. Mức xử lý khi nén cao hơn có thể giảm dung lượng nhưng không tăng chất lượng ảnh hay độ trong suốt.
4. Chuyển đổi, tải xuống và kiểm tra PNG trên nền sáng và tối.

Không có ô chọn Giữ độ trong suốt, tùy chọn điều chỉnh mức alpha, xóa nền hay bộ chọn chế độ màu PNG. Tệp được xử lý trên máy chủ. Hãy tải xuống sớm và giữ SVG gốc.

Chuẩn bị thiết kế nguồn

Xóa hình chữ nhật nền không mong muốn trong trình chỉnh sửa vector trước khi chuyển đổi. Đưa ảnh liên kết và định dạng vào trong tệp khi có thể. Phông chữ không có sẵn trong bộ kết xuất có thể làm thay đổi hình thức; hãy chuyển phần chữ quan trọng thành đường vector trong trình chỉnh sửa nguồn khi cần giữ chính xác hình dáng.

PNG có các pixel cố định và không giữ đường vector hay lớp có thể chỉnh sửa. Phóng lớn bitmap nhúng không thể khôi phục chi tiết đã mất. Chọn kích thước theo mục đích hiển thị rồi kiểm tra đầu ra thực tế.

Trường hợp sử dụng

Chuyển đổi logo

Với tệp logo:

1. Xóa nền nếu có trong SVG
2. Xuất ở nhiều kích thước
3. Kiểm tra trên nền sáng và tối
4. Cung cấp cả bản trong suốt và bản nền trắng

Bộ biểu tượng

Với biểu tượng ứng dụng hoặc web:

1. Thống nhất kích thước (ví dụ: 512x512)
2. Giữ phần đệm nhất quán
3. Chuyển đổi từng biểu tượng riêng và kiểm tra độ trong suốt có sẵn được giữ lại
4. Kiểm tra ở kích thước sử dụng thực tế

Đồ họa web

Với các thành phần website:

1. Xuất ở độ phân giải phù hợp
2. Cân nhắc phiên bản cho màn hình Retina (2x)
3. Kiểm tra dung lượng tệp có hợp lý không
4. Thử đặt ảnh trên các nền khác nhau

Nhiều tệp hoặc nhiều kích thước

Trang này nhận một SVG cho mỗi tác vụ. Khi cần nhiều bản xuất, hãy chuyển đổi và kiểm tra từng bản riêng. Không có tải lên thư mục, thiết lập độ trong suốt chung hay thao tác xuất tất cả. Hãy tự sắp xếp tên tệp và kích thước.

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

1. Mở PNG trong trình chỉnh sửa ảnh
2. Tìm nền ô caro (biểu thị vùng trong suốt)
3. Thêm một lớp màu phía sau
4. 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>

Quan sát để đảm bảo không xuất hiện khung trắng.

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

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

Thiết lập nén mạnh hơn có giữ được nhiều độ trong suốt hơn không?

Không. Các thiết lập thay đổi mức xử lý khi mã hóa PNG không mất dữ liệu. Chúng không thay đổi vùng nào của nguồn là trong suốt.

Vì sao nền có màu trắng hoặc đường viền khác đi?

Kiểm tra xem màu trắng là một phần của nguồn hay chỉ là nền trình xem. Xem khắc phục lỗi độ trong suốt của SVG để kiểm tra nguồn, phông chữ và đường viền.

Có thể chuyển PNG trở lại thành SVG có thể chỉnh sửa không?

Công cụ này không chuyển nét ảnh thành đường vector. Hãy giữ SVG gốc để chỉnh sửa sau này.