Cách chuyển SVG sang PNG ở bất kỳ kích thước nào
·
SVG rất tuyệt cho logo, nhưng nhiều nơi chỉ nhận PNG hoặc JPG. Việc chuyển đổi khá dễ khi bạn chọn đúng kích thước, và có vài cái bẫy cần tránh. Bài này giải thích sự khác nhau, cách chọn kích thước đầu ra và những gì có thể trục trặc.
Vì sao cần chuyển SVG sang PNG
Mạng xã hội, phần mềm email, trình soạn thảo tài liệu, công cụ trình chiếu, cửa hàng ứng dụng và nhiều biểu mẫu tải lên không chấp nhận SVG, hoặc hiển thị không nhất quán. PNG trông giống nhau ở mọi nơi, đó là lý do các nhà thiết kế thường bàn giao cả hai phiên bản.
So sánh SVG và PNG
| Đặc điểm | SVG | PNG |
|---|---|---|
| Loại | Vector (hình khối và đường nét) | Điểm ảnh (pixel) |
| Kích thước cố định | Không, phóng to không bị nhòe | Có |
| Phù hợp nhất với | Logo, biểu tượng, hình minh họa | Ảnh chụp màn hình, đồ họa, đầu ra chính xác |
| Dung lượng | Rất nhỏ với hình đơn giản | Tăng theo kích thước pixel |
| Hỗ trợ | Trình duyệt và công cụ thiết kế | Gần như mọi nơi |
Ưu điểm của SVG
- Sắc nét ở mọi kích thước và thường rất nhẹ.
- Tùy biến được bằng CSS.
Ưu điểm của PNG
- Được chấp nhận gần như mọi nơi và hiển thị giống hệt trên mọi thiết bị.
- Dễ chèn vào tài liệu, email và ứng dụng.
Hãy giữ file SVG làm bản gốc và xuất PNG khi cần. Bài so sánh SVG và PNG đi sâu hơn.
Chọn kích thước đầu ra
SVG không có độ phân giải cố định, nên kích thước pixel của file PNG là do bạn quyết định. Quá nhỏ thì phóng lên sẽ bị nhòe, quá lớn thì file nặng.
| Mục đích | Kích thước gợi ý |
|---|---|
| Logo trên website | Khoảng gấp 2 lần chiều rộng hiển thị, ví dụ 400 px cho logo 200 px |
| Slide hoặc tài liệu | Rộng 1000–2000 px |
| In ấn | Khoảng 300 pixel trên mỗi inch ở kích thước in |
Tùy chọn tỷ lệ sẽ nhân kích thước gốc của SVG: 2x nhân đôi số pixel, 4x nhân bốn.
Từng bước: chuyển SVG sang PNG
- 1Quyết định kích thước theo bảng ở trên.
- 2Mở SVG sang PNG và thêm file SVG của bạn.
- 3Chọn tỷ lệ, ví dụ 2x cho màn hình sắc nét.
- 4Chuyển đổi và tải về. Vùng trong suốt vẫn trong suốt trong file PNG.
- 5Kiểm tra kết quả xem có thiếu phông chữ hay ảnh không, và nén bằng Nén ảnh nếu file nặng.
- 6Cần file biểu tượng? Dùng PNG sang ICO hoặc Tạo favicon.
Phông chữ, ảnh bên ngoài và những bất ngờ khác
Nếu SVG dùng một phông chữ chưa được nhúng, hoặc liên kết tới một ảnh bên ngoài, hình có thể trông khác sau khi chuyển đổi, vì trình duyệt chặn tài nguyên bên ngoài khi SVG được hiển thị như một ảnh độc lập. Để an toàn, hãy chuyển chữ thành đường viền trong phần mềm thiết kế trước khi xuất, hoặc nhúng phông chữ và ảnh vào trong SVG.
Muốn giữ nền trong suốt thì hãy chọn PNG. Nếu chuyển sang JPG, vùng trong suốt sẽ bị lấp bằng một màu đặc, vì JPG không thể trong suốt.
Những lỗi thường gặp
- Xuất ở kích thước quá nhỏ, rồi phóng to PNG và bị nhòe.
- Quên phông chữ, nên chữ hiện bằng một kiểu chữ thay thế.
- Chọn JPG cho logo, làm mất nền trong suốt và nhòe các cạnh.
- Xóa file SVG sau khi chuyển đổi. Hãy giữ nó làm bản gốc.
Câu hỏi thường gặp
Chuyển SVG sang PNG có làm giảm chất lượng không?
PNG là ảnh có kích thước cố định, nên có thể sắc nét ở đúng kích thước của nó nhưng sẽ nhòe nếu phóng to. Hãy chọn kích thước đủ lớn khi chuyển đổi và giữ SVG làm bản gốc.
Làm sao giữ được nền trong suốt?
Chuyển sang PNG, định dạng hỗ trợ độ trong suốt. JPG sẽ lấp vùng trong suốt bằng một màu đặc.
Nên xuất logo PNG ở kích thước nào?
Khoảng gấp đôi chiều rộng hiển thị để màn hình sắc nét, ví dụ 400 pixel cho logo hiển thị ở 200 pixel. Với tài liệu, 1000 đến 2000 pixel là phổ biến.
Vì sao chữ trong file PNG trông khác?
Phông chữ có thể chưa được nhúng trong SVG. Hãy chuyển chữ thành đường viền hoặc nhúng phông chữ trước khi chuyển đổi.
Nếu SVG của tôi không có chiều rộng hay chiều cao thì sao?
Nếu file không khai báo kích thước và cũng không có viewBox, một kích thước mặc định sẽ được dùng trước khi áp dụng tỷ lệ. Hãy thêm kích thước trong phần mềm thiết kế để có kết quả dễ đoán.