Xuất SVG thành PNG mọi kích thước: viewBox, nền trong suốt

Muốn đổi SVG thành PNG, bạn phải tự chọn kích thước pixel, vì SVG là một bản vẽ được mô tả bằng văn bản và tự nó không có điểm ảnh nào. Hãy mở một công cụ chuyển SVG, nạp tệp hoặc dán mã, chọn PNG, JPG hay WebP, chọn theo tỉ lệ, chiều rộng hoặc chiều cao, rồi tải về. Nếu muốn nền trong suốt, hãy chọn PNG hoặc WebP và để nền ở chế độ trong suốt. Bài này giải thích kích thước gốc của một SVG được tính ra sao từ viewBox cùng width và height, cách xuất để ảnh luôn sắc nét, và vì sao một SVG từ nguồn lạ cần được đối xử cẩn thận như mọi tệp khác.

Vì sao cần chuyển đổi

SVG là định dạng tốt nhất cho logo và biểu tượng: rất nhẹ, sắc nét ở mọi cỡ, và sửa được như văn bản. Nhưng 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, sàn thương mại và hầu hết biểu mẫu tải lên đều đòi PNG, JPG hoặc WebP. Chuyển đổi nghĩa là vẽ SVG lên một lưới điểm ảnh cỡ bạn chọn rồi lưu lưới đó lại. Một khi đã thành PNG thì nó cố định: thu nhỏ được, nhưng phóng to về sau sẽ bị mờ. Vì vậy hãy chọn cỡ ngay lúc chuyển đổi, đừng để sau.

viewBox khác width và height

Hai thứ này rất dễ nhầm với nhau.

• `viewBox="minX minY width height"` định nghĩa hệ tọa độ của chính bản vẽ: hình chữ nhật của bản vẽ được phép hiện ra. Nó không có đơn vị.
• `width` và `height` trên phần tử gốc <svg> cho biết bản vẽ được hiển thị lớn cỡ nào.

Lấy <svg viewBox="0 0 24 24">, cách hầu hết bộ biểu tượng được phát hành. Nó nói "bản vẽ là hình vuông 24 × 24" và không nhắc gì đến pixel. Công cụ đọc cỡ gốc như sau:

Độ dài có đơn vị được quy đổi theo 96 pixel mỗi inch, nên width="10cm" height="5cm" khoảng 378 × 189 pixel và width="3in" là 288. Giá trị phần trăm như width="100%" height="100%" không có cỡ cố định, nên viewBox được dùng thay thế. Trường hợp này rất phổ biến, và đó là lý do một tệp "không có cỡ" vẫn chuyển đúng.

Còn một quy tắc đáng biết. Khi width và height có hình dạng khác viewBox, ví dụ width="200" height="200" viewBox="0 0 100 50", bản vẽ được đặt vừa trong khung và căn giữa, để lại dải trống phía trên và phía dưới. Trình duyệt vẽ như vậy, và công cụ làm theo trình duyệt.

Chuyển đổi từng bước

1. Mở công cụ chuyển SVG. Thả tệp vào khung, chọn tệp, hoặc dán mã SVG vào ô văn bản. "Dùng thử ví dụ" nạp một biểu tượng nhỏ.
2. Chọn Định dạng. PNG không mất dữ liệu và giữ nền trong suốt. WebP thường nhỏ hơn và cũng giữ nền trong suốt. JPG dành cho nơi nào bắt buộc dùng nó và không có nền trong suốt.
3. Ở mục Kích thước, chọn Tỉ lệ, Chiều rộng hoặc Chiều cao. Khi chọn chiều rộng hoặc chiều cao, cạnh còn lại theo tỉ lệ khung hình nên ảnh không bao giờ bị méo.
4. Với JPG và WebP, đặt Chất lượng. Thanh trượt bắt đầu ở 92.
5. Quyết định về nền. Khi bật "Nền trong suốt", PNG và WebP giữ nguyên vùng trong suốt. Tắt đi để tô ảnh bằng màu bạn chọn. JPG luôn được tô nền, mặc định là màu trắng.
6. Xem dòng dưới phần xem trước, cho biết kích thước ảnh theo pixel và dung lượng tệp, rồi tải về.

Ảnh được vẽ trên canvas ngay trong trình duyệt. Tệp không bị tải lên, nên không phải xếp hàng chờ và logo chưa công bố vẫn riêng tư.

Chọn kích thước

Hãy bắt đầu từ nơi ảnh sẽ được dùng, đừng bắt đầu từ SVG. Vài con số cụ thể cho một biểu tượng 24 × 24:

Với logo ngang có viewBox="0 0 24 12", chiều rộng 480 cho ra 480 × 240. Nếu ảnh sẽ hiện trên màn hình điện thoại mật độ cao với chiều rộng 100 pixel, hãy xuất ở 200 hoặc 300 pixel để nó vẫn nét. Cạnh dài nhất tối đa 8192 pixel, và tổng diện tích giới hạn khoảng 50 triệu điểm ảnh, mức trình duyệt vẽ ổn định được. Nếu yêu cầu vượt quá, bạn nhận được thông báo thay vì một tệp trống.

Hãy luôn xuất lớn hơn bạn nghĩ là cần. Phóng to SVG không làm mất chất lượng, vì công cụ vẽ lại ở cỡ mới. Phóng to ảnh PNG đã xuất ra từ nó thì có mất. Với bộ favicon hoặc biểu tượng ứng dụng, công cụ tạo favicon tạo mọi cỡ cùng lúc; bài về kích thước favicon cho biết cỡ nào thật sự quan trọng.

PNG, JPG hay WebP cho SVG

Logo, biểu tượng và sơ đồ có màu phẳng và cạnh sắc. PNG hợp với chúng: không mất gì và giữ được nền trong suốt. WebP nhỏ hơn cho cùng một hình ở nơi nào chấp nhận nó. JPG thêm nhiễu khối mờ quanh cạnh sắc khi chất lượng thấp, nên nếu buộc phải dùng thì hãy đặt chất lượng cao. Bài về JPG, PNG và WebP so sánh đầy đủ. Để làm kết quả nhỏ hơn nữa, bộ công cụ ảnh có thể nén nó.

Vì sao SVG có thể nguy hiểm, và công cụ gỡ những gì

SVG không chỉ là một bức hình. Nó là tệp văn bản XML, và định dạng này cho phép những thứ PNG không bao giờ làm được: phần tử <script>, thuộc tính sự kiện như onload, onclick, khối <foreignObject> chứa HTML, liên kết tới tệp khác, và quy tắc kiểu dáng nhập hoặc tải thứ gì đó từ web. Trình duyệt mở tệp SVG như một trang, hoặc SVG được dán thẳng vào trang web, có thể chạy script trong đó. Cùng SVG ấy dùng làm ảnh, như trong thẻ <img>, thì không được phép chạy script hay tải tệp bên ngoài.

Vì vậy, SVG từ nguồn không rõ nên được coi như mọi tệp bạn không tin tưởng. Công cụ này có hai lớp phòng ngừa. Nó chỉ nạp tệp đã làm sạch dưới dạng ảnh, không bao giờ như một trang. Trước đó, nó gỡ:

• các phần tử script, foreignObject, khung (iframe), embed, object, audio, video và canvas, cùng các phần tử link, meta và base;
• mọi thuộc tính bắt đầu bằng on, và giá trị dùng javascript:;
• liên kết và giá trị CSS url() trỏ ra ngoài tệp, cùng các lệnh nhập CSS. Liên kết tới phần khác của chính bản vẽ và ảnh raster nhúng sẵn (PNG, JPEG, GIF, WebP và tương tự) được giữ lại;
• các phần tử hoạt ảnh cố đổi một liên kết.

Công cụ cũng từ chối tệp khai báo thực thể XML, vì đó là cách tạo "bom XML" và biểu tượng thật không cần đến chúng. Khi có thứ bị gỡ, công cụ cho biết số mục, và không mục nào được chạy. Tệp gốc trên máy bạn không bị thay đổi, nên nếu định đăng nó lên đâu đó, hãy làm sạch riêng.

Khi kết quả trông sai

• Chữ đổi sang phông khác. SVG được vẽ như ảnh không tải được phông web. Hãy chuyển chữ thành đường nét (outline) trong phần mềm vẽ 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. Thiếu xmlns được tự sửa; thiếu thẻ đóng thì không.
• Thiếu ảnh bên ngoài. Ảnh trỏ tới địa chỉ web bị gỡ có chủ đích. Hãy nhúng chúng vào tệp dưới dạng dữ liệu.
• Biểu tượng bị đen. Các bộ biểu tượng hay dùng fill="currentColor". Khi vẽ như ảnh thì không có màu chữ xung quanh nên nó ra màu đen. Hãy thay bằng một màu cụ thể trong tệp.
• Cạnh bị mờ. Tăng kích thước và xuất lại từ SVG.
• Một phần bản vẽ bị cắt mất. viewBox nhỏ hơn hình vẽ. Hãy mở rộng nó, hoặc sửa khung vẽ trong phần mềm.

Danh sách kiểm tra ngắn

Quyết định kích thước pixel trước và xuất lớn hơn mức cần. Kiểm tra phần tử gốc có viewBox. Dùng PNG hoặc WebP để giữ nền trong suốt, chỉ dùng JPG khi bắt buộc. Coi SVG từ người lạ là không đáng tin, và dựa vào bước làm sạch của công cụ chứ đừng dựa vào thiện chí của tệp.