Chuyển SVG sang PNG

Cố định một độ phân giải vốn chưa từng cố định

SVG không có pixel và không có kích thước. Nó là một tập lệnh vẽ — đường này, màu tô kia, đường cong nọ — đó là lý do nó luôn sắc nét ở mọi mức phóng to và vì sao một logo nên giữ ở dạng SVG càng lâu càng tốt. Chuyển sang ảnh pixel là chốt vĩnh viễn một kích thước. Vì vậy hãy chọn kích thước theo nơi lớn nhất mà bức ảnh sẽ xuất hiện, và nhớ rằng màn hình mật độ gấp hai hay ba lần cần số pixel gấp hai hay ba lần: một biểu tượng hiển thị ở 64 point cần 192 pixel để trông đẹp trên điện thoại hiện đại.

Chữ là chỗ hay gặp trục trặc nhất, và lý do đáng để hiểu. SVG ghi “đặt chuỗi này bằng phông chữ Helvetica Neue”; nếu máy đang hiển thị không có Helvetica Neue, một phông chữ khác sẽ được thay vào và bố cục bị xê dịch — tiêu đề vừa khít khung giờ tràn ra ngoài. Webfont được gọi qua URL hoàn toàn không tải được ở đây, vì SVG khi hiển thị như một ảnh bị cô lập có chủ đích và không thể kết nối mạng. Cách khắc phục là điều mọi nhà thiết kế rồi cũng học được: chuyển chữ thành đường viền (outline) trước khi xuất, khi đó các nét chữ trở thành path và không cần phông chữ nào nữa.

Chính sự cô lập đó giải thích những điều bất ngờ khác. Một ảnh bitmap được liên kết — phần tử image trỏ đến một file .png ở đâu đó — sẽ không hiện gì. Script không chạy, nên SVG tự vẽ bằng JavaScript sẽ ra trống hoặc dở dang. Hoạt ảnh khai báo được xuất ở trạng thái ban đầu, tức là ảnh tĩnh của khung hình đầu tiên. Mọi thứ tự chứa trong file đều hoạt động hoàn hảo: dải màu, bộ lọc, clipping path, mask, ảnh nhúng dạng data URI và hiệu ứng làm mờ đều hiển thị đúng như khi vẽ.

PNG là đích đến đúng cho việc này, còn JPEG thì không. Tác phẩm vector là màu phẳng và cạnh sắc, đúng thứ PNG nén tốt và JPEG làm hỏng — mọi cạnh sắc trong JPEG đều bị một quầng nhòe. Nền trong suốt được chuyển thành kênh alpha thực sự, nên logo xuất đúng kích thước có thể đặt trên bất kỳ nền nào. Nếu SVG không khai báo kích thước mà chỉ có viewBox, tỷ lệ khung hình lấy từ đó còn kích thước do bạn chọn.

Khi bạn cần công cụ khác

resvg và rsvg-convert xuất SVG từ dòng lệnh với đầy đủ phông chữ trên máy, nên chữ hiển thị đúng kiểu chữ dự định thay vì phông chữ thay thế — rsvg-convert -w 512 in.svg -o out.png là toàn bộ câu lệnh. Inkscape --export-type=png --export-dpi=300 là bản triển khai đặc tả đầy đủ nhất hiện có, xử lý được các bộ lọc và chế độ hòa trộn mà các trình hiển thị nhẹ hơn chỉ làm gần đúng.

Trước khi chuyển sang pixel, hãy kiểm tra xem có thứ gì thực sự cần PNG không. Mọi trình duyệt đã hiển thị SVG gốc hơn một thập kỷ nay, và với logo hay biểu tượng trên website, SVG nhẹ hơn, sắc nét vô hạn và tùy biến được bằng CSS. Những trường hợp thật sự cần pixel ít hơn mọi người nghĩ: favicon, ảnh xem trước khi chia sẻ lên mạng xã hội, email, tài nguyên cho kho ứng dụng và phần mềm không đọc được vector.