SVG sang PNG — khi bạn thật sự cần pixel (và khi thì không nên)

Có một kiểu bực bội rất riêng khi bạn có một logo hoàn hảo mà chẳng biết đặt nó vào đâu. Bản SVG sắc nét ở mọi kích thước, nặng gần như bằng không, và trông không tì vết trong trình duyệt — rồi bạn thử thả nó vào một email, hay đặt làm ảnh xem trước khi chia sẻ, hay dán vào một phần mềm hơi-quá-cũ, và nó đơn giản là không hiện lên. Trống trơn. Tệp không sao cả. Chỉ là nơi bạn đặt nó vào không nói được thứ tiếng vector.

Đó là cả lý do vì sao SVG-sang-PNG tồn tại như một việc cần làm. Không phải vì PNG tốt hơn — thường thì không — mà vì phần lớn thế giới chỉ đọc được pixel.

Vector và raster, nói nhanh

Một SVG không phải một bức hình. Nó là một tập chỉ dẫn — vẽ một hình tròn ở đây, đường này ở kia, tô màu này. Trình duyệt làm theo các chỉ dẫn và kết xuất chúng mới tinh ở bất cứ kích thước nào bạn yêu cầu, nên nó sắc như dao ở 16 pixel hay 16.000, và tệp vẫn tí hon vì nó chỉ là toán học.

Một PNG thì ngược lại. Nó là một lưới pixel màu cố định, quyết định một lần, ở một độ phân giải. Phóng nó vượt quá kích thước gốc là nó mềm nhũn và vỡ ô, vì không còn pixel nào để vẽ nữa — chỉ có những cái đã in sẵn. Ưu điểm là mọi thứ đều đọc được một lưới pixel. Nó là đồng tiền chung của ảnh.

Vậy chuyển SVG sang PNG là đánh đổi khả năng phóng to vô hạn lấy sự tương thích phổ quát. Đổi chác đó có lợi hay không tùy hoàn toàn vào nơi tấm ảnh sẽ đến.

Khi bạn thật sự cần PNG

Ba trường hợp tôi biến thành điểm ảnh không chút do dự, vì vector đơn giản là không chạy:

Email. Ứng dụng email không kết xuất SVG — Gmail, Outlook, Apple Mail, gần như tất cả đều từ chối nó vì lý do bảo mật. Một logo trong chữ ký email hay một bản tin bắt buộc phải là định dạng raster. PNG, vì bạn muốn giữ độ trong suốt.

Ảnh xem trước cho mạng xã hội và OG. Cái thẻ nhỏ hiện ra khi bạn chia sẻ một liên kết — ảnh Open Graph — phải là raster cố định kích thước, thường là 1200x630. Các nền tảng sẽ không kết xuất một SVG ở đó. Nếu tác phẩm nguồn của bạn là vector, bạn xuất một PNG ở đúng kích thước đó.

Phần mềm cũ hoặc ngoại tuyến. Rất nhiều ứng dụng máy tính, công cụ thuyết trình, trình soạn tài liệu và quy trình in ấn hoặc không nhập được SVG hoặc làm hỏng bét nó. Đưa cho chúng một PNG ở độ phân giải rộng rãi thì chạy được, lần nào cũng vậy, không bất ngờ.

Ở cả ba, yếu tố quyết định đều như nhau: nơi đến về mặt vật lý không đọc được vector, nên khả năng phóng to trở nên vô nghĩa. Một định dạng hiển thị được luôn thắng một định dạng không hiển thị, luôn luôn.

Điều duy nhất phải làm cho đúng: độ phân giải

Đây là sai lầm tôi thấy nhiều nhất, và chính tôi cũng mắc thuở đầu. Vì một PNG bị cố định ở kích thước bạn xuất, bạn phải xuất nó đủ lớn — và lý tưởng là đúng kích thước bạn sẽ hiển thị.

Xuất một logo thành PNG 100x100 rồi hiển thị nó ở 300 pixel trên một màn hình mật độ cao, nó sẽ trông mềm và răng cưa. Những pixel để lấp đầy khoảng đó không tồn tại. Cách chữa thì dễ: xuất ở kích thước bạn sẽ thật sự dùng, hoặc lớn hơn, nhất là với màn hình Retina và 4K nơi bạn thường muốn gấp 2 lần kích thước danh nghĩa. Đây là ưu điểm thật duy nhất bạn từ bỏ khi rời vector, nên hãy dành một chút để chọn đúng độ phân giải đích.

Khi bạn KHÔNG nên biến thành điểm ảnh

Nếu nơi đến đọc được SVG, hãy giữ SVG. Chấm hết.

Trên chính website của bạn, một biểu tượng hay logo nên giữ nguyên vector. Nó sẽ sắc trên mọi màn hình ở mọi mức phóng, nó sẽ nhỏ hơn PNG tương đương, và bạn sẽ không bao giờ phải xuất lại một bản lớn hơn khi một màn hình mật độ cao hơn ra đời. Biến nó thành điểm ảnh ở đó thuần là thiệt hại — bạn đang vứt bỏ ưu điểm tốt nhất của định dạng để đổi lấy sự tương thích mà bạn vốn đã có.

Và đừng biến bản gốc của bạn thành điểm ảnh. SVG là nguồn sự thật; nó có thể tạo ra một PNG ở bất cứ kích thước nào, bất cứ lúc nào. Một PNG không thể đi ngược lại — bạn không thể khôi phục những đường vector sạch từ một lưới pixel. Nên hãy giữ SVG, và coi mỗi PNG như một bản xuất dùng một lần cho đúng một nơi cụ thể. Cùng nguyên tắc như mọi thứ khác: chuyển bản bạn gửi đi, giữ bản gốc bạn chỉnh sửa.

Tôi thật sự làm thế nào

Khi tôi cần pixel từ một vector, tôi dùng công cụ chuyển SVG sang PNG ở đây. Nó kết xuất SVG trong trình duyệt của bạn và trao cho bạn bản PNG, nên không có gì được tải lên đâu cả — toàn bộ diễn ra trên máy của bạn. Chọn một kích thước hợp với nơi nó sẽ đến, nhận về một PNG sạch với độ trong suốt còn nguyên.

Nhưng kỹ năng thật sự không phải việc chuyển đổi. Đó là câu hỏi bạn đặt ra trước tiên: nơi này có đọc được vector không? Nếu có, để yên SVG và tận hưởng lựa chọn sắc nhất, nhỏ nhất từng có. Nếu không — email, thẻ OG, một phần mềm cũ cứng đầu — thì biến thành điểm ảnh, ở đúng kích thước, và giữ SVG của bạn an toàn cho lần sau. Chọn đúng nước đi đó và bạn sẽ không bao giờ còn thấy một ô trống nơi logo của mình lẽ ra phải ở đó nữa.