Chuyển SVG sang PNG, JPG và WebP

Công cụ này làm gì

SVG là một bản vẽ được mô tả bằng văn bản: hình khối, đường nét và màu sắc chứ không phải điểm ảnh. Vì vậy SVG luôn sắc nét ở mọi kích thước, nhưng cũng vì vậy nhiều nơi không nhận nó. Mạng xã hội, trình email, bài thuyết trình, cửa hàng ứng dụng và hầu hết biểu mẫu tải lên đều cần PNG, JPG hoặc WebP. Công cụ này vẽ SVG của bạn đúng kích thước pixel bạn chọn rồi lưu sang một trong ba định dạng đó.

Mọi thứ diễn ra trong trình duyệt. Tệp được đọc ngay trên thiết bị, vẽ lên canvas và mã hóa tại đó, nên không có gì được tải lên và không phải chờ hàng đợi.

Cách chuyển một tệp SVG

1. Thả tệp vào khung, chọn tệp, hoặc dán mã SVG vào ô văn bản. Nút "Dùng thử ví dụ" nạp một biểu tượng nhỏ để bạn thấy kết quả ngay.
2. Chọn định dạng. PNG không mất chất lượng và giữ nền trong suốt, WebP nhỏ hơn và cũng giữ nền trong suốt, JPG nhỏ nhất với ảnh chụp nhưng hoàn toàn không có nền trong suốt.
3. Chọn kích thước rồi tải về. Bản xem trước cập nhật khi bạn đổi bất cứ thứ gì, và dòng bên dưới cho biết kích thước pixel và dung lượng tệp sẽ nhận được.

Chọn kích thước

SVG không có điểm ảnh riêng nên bạn quyết định kích thước. Có ba cách: tỉ lệ (bội số của kích thước gốc), chiều rộng chính xác hoặc chiều cao chính xác. Khi nhập chiều rộng hoặc chiều cao, cạnh còn lại tự theo tỉ lệ khung hình nên ảnh không bao giờ bị méo.

Kích thước gốc được đọc từ tệp. Nếu phần tử gốc có width và height thì dùng chúng. Nếu chỉ có viewBox, điều rất thường gặp ở biểu tượng, thì viewBox cho cả kích thước lẫn tỉ lệ: biểu tượng có viewBox="0 0 24 24" là 24 × 24 pixel ở tỉ lệ 1, 96 × 96 ở tỉ lệ 4 và 512 × 512 khi bạn yêu cầu chiều rộng 512. Logo ngang có viewBox="0 0 24 12" với chiều rộng 480 sẽ ra 480 × 240. Nếu tệp không có cả kích thước lẫn viewBox, công cụ giả định 300 × 150 như trình duyệt và sẽ báo cho bạn biết.

Cạnh dài nhất tối đa 8192 pixel và cả ảnh tối đa khoảng 50 triệu điểm ảnh, mức trình duyệt vẽ ổn định.

PNG, JPG hay WebP

• PNG cho logo, biểu tượng và mọi thứ có cạnh sắc hoặc cần nền trong suốt. Tệp lớn hơn nhưng không mất gì.
• WebP cho cùng loại ảnh khi nơi bạn tải lên chấp nhận: thường nhỏ hơn PNG nhiều và vẫn giữ nền trong suốt. Thanh chất lượng có tác dụng.
• JPG chỉ khi nơi nhận bắt buộc. JPG không có nền trong suốt nên công cụ luôn tô nền bằng một màu (mặc định trắng) và thanh chất lượng có tác dụng. Cạnh sắc và mảng màu phẳng sẽ lộ nhiễu ô vuông mờ khi chất lượng thấp.

Muốn nền trong suốt, hãy để bật công tắc "Nền trong suốt" và chọn PNG hoặc WebP. Tắt công tắc để tô nền bằng màu bạn chọn.

Script và liên kết được xử lý thế nào

SVG không chỉ là hình ảnh: định dạng này cho phép có script, trình xử lý sự kiện và liên kết tới tệp khác. Một SVG từ nguồn lạ cần được coi như mọi tệp bạn không tin tưởng. Ở đây tệp chỉ được nạp dưới dạng ảnh, thứ mà trình duyệt không bao giờ cho chạy mã, và trước đó công cụ gỡ các phần tử script, khung nhúng, thuộc tính sự kiện như onclick, liên kết tới địa chỉ web khác và lệnh nhập CSS. Số lượng được hiển thị và không thứ gì được thực thi.

Khi kết quả trông sai

• Chữ đổi sang phông khác. SVG vẽ dưới dạng ảnh không tải được phông từ web. Hãy chuyển chữ thành đường nét trong phần mềm thiết kế trước, hoặc nhúng phông vào tệp.
• Ảnh trống. Kiểm tra mã có đầy đủ không và phần tử gốc có phải svg không. Mã dán thiếu thuộc tính xmlns được tự sửa, nhưng thiếu thẻ đóng thì không.
• Thiếu ảnh bên ngoài. Ảnh trỏ tới địa chỉ web khác bị gỡ có chủ đích. Hãy nhúng chúng vào tệp dưới dạng dữ liệu.
• Cạnh bị mềm. Hãy tăng kích thước. Phóng to SVG không làm giảm chất lượng, còn phóng to PNG đã xuất thì có.