Công cụ này làm gì
Công cụ này chuyển mã SVG hoặc tệp .svg thành ảnh PNG, JPG hoặc WebP. Dán mã, thả tệp, chọn tỷ lệ hoặc độ rộng chính xác, rồi tải ảnh bitmap về. Việc kết xuất diễn ra trong trình duyệt, nên icon, logo và sơ đồ không bao giờ rời khỏi máy của bạn.
Công cụ hữu ích ở bất cứ đâu không chấp nhận SVG: icon ứng dụng, ảnh mạng xã hội, slide thuyết trình, tài liệu, chữ ký email hay phần mềm cũ. Bạn có bản xem trước trực tiếp trên nền ô bàn cờ để thấy chính xác phần nào trong suốt.
Cách sử dụng
- Dán mã
<svg>vào trình soạn thảo, nhấn Tải lên để mở tệp, hoặc kéo tệp vào trang. Ví dụ sẽ tải một logo nhỏ. - Chọn kích thước: 1× dùng kích thước gốc của SVG, 2×–4× nhân kích thước đó lên. Hoặc nhập độ rộng tùy chỉnh tính bằng pixel; chiều cao tự theo tỷ lệ khung hình.
- Chọn định dạng: PNG cho đầu ra không mất dữ liệu và có trong suốt, JPG cho ảnh chụp và độ tương thích, WebP cho tệp nhỏ.
- Chọn nền: trong suốt, trắng, hoặc màu bất kỳ.
- Nhấn Tải xuống. Dòng bên dưới bản xem trước hiển thị kích thước pixel cuối cùng, định dạng và dung lượng tệp.
Cách tính kích thước
Công cụ xem xét phần tử gốc <svg>. width và height tính bằng px, pt, mm, cm, in hoặc em được đổi sang pixel. Nếu chúng bị thiếu hoặc được cho dưới dạng phần trăm, chiều rộng và chiều cao của viewBox sẽ được dùng thay thế. Sau đó tỷ lệ hoặc độ rộng tùy chỉnh đã chọn được áp dụng, và SVG được viết lại với kích thước pixel tường minh để mọi trình duyệt vẽ giống nhau.
Ví dụ
Một icon có viewBox="0 0 24 24" và không có width hay height sẽ thành ảnh PNG 24 × 24 ở 1×. Ở 4× nó thành 96 × 96, còn với độ rộng tùy chỉnh 512 nó thành ảnh PNG 512 × 512 phù hợp làm icon trên kho ứng dụng, vẫn sắc nét hoàn hảo vì được kết xuất từ vector thay vì phóng to.
Mẹo
- XML không hợp lệ được báo kèm số dòng, để bạn nhảy thẳng tới chỗ lỗi.
- Ảnh raster nhúng (
<image href="data:...">) hoạt động bình thường; liên kết bên ngoài thì không. - Chữ dùng phông chữ cài trên máy tính của bạn. Để có kết quả giống hệt từng pixel ở mọi nơi, hãy chuyển chữ thành outline trong công cụ thiết kế trước.
- Kích thước đầu ra lớn nhất bị giới hạn bởi kích thước canvas của trình duyệt, khoảng 16.000 pixel mỗi cạnh.
Câu hỏi thường gặp
› SVG có bị tải lên đâu không?
Không. Trình duyệt của bạn vẽ SVG lên một canvas và lưu kết quả. Mã và ảnh đều ở lại trên thiết bị của bạn.
› Làm sao để có ảnh PNG sắc nét hơn?
Chọn tỷ lệ 2×, 3× hoặc 4×, hoặc nhập độ rộng chính xác. SVG là định dạng vector, nên kết xuất ở kích thước lớn hơn cho đường nét sắc sảo trên màn hình mật độ điểm ảnh cao. 2× là lựa chọn mặc định tốt cho màn hình retina.
› Tại sao một số ảnh hoặc phông chữ bị thiếu trong kết quả?
Vì lý do bảo mật, trình duyệt không tải tệp bên ngoài (ảnh liên kết, web font, CSS) khi vẽ SVG dưới dạng ảnh. Hãy nhúng ảnh dưới dạng data URL và chuyển chữ thành path, hoặc dùng phông chữ hệ thống.
› Tôi có giữ được nền trong suốt không?
Có. Chọn Trong suốt với đầu ra PNG hoặc WebP. JPG không hỗ trợ trong suốt, nên vùng trong suốt sẽ được tô màu trắng hoặc màu bạn chọn.
› SVG của tôi không có width hay height. Kích thước nào sẽ được dùng?
Công cụ đọc viewBox và dùng chiều rộng, chiều cao của nó. Nếu không có cả kích thước lẫn viewBox, công cụ sẽ dùng mặc định của trình duyệt là 300 × 150 và thông báo cho bạn.