SVG to PNG - Chuyển SVG Sang PNG Online

Tính năng nổi bật

• Đọc kích thước thật của tệp SVG từ thuộc tính width, height, và lấy viewBox làm nguồn dự phòng khi tệp không khai báo kích thước
• Hệ số phóng từ 1x đến 8x, kích thước PNG sắp xuất hiện ngay trên giao diện trước khi bấm chuyển đổi
• Chế độ kích thước tùy chỉnh cho phép nhập thẳng chiều rộng và chiều cao khi cần con số chính xác
• Bốn nền dựng sẵn gồm trong suốt, trắng, đen, xám nhạt, kèm bảng chọn màu tùy ý
• Khung xem trước nạp SVG qua thẻ ảnh, hiển thị đúng thứ canvas sẽ dựng nên bạn phát hiện sớm phần bị thiếu
• Chặn trước các kích thước vượt giới hạn canvas của trình duyệt và báo rõ mức tối đa thay vì trả về tệp rỗng
• Thông báo lỗi cụ thể khi tệp hỏng cú pháp, thiếu kích thước hoặc tham chiếu tài nguyên bên ngoài
• Tên tệp PNG tải về lấy theo tên tệp SVG gốc, giữ nguyên cách đặt tên của bạn

Vì sao vẫn cần PNG khi đã có SVG

SVG là định dạng lý tưởng cho web vì phóng bao nhiêu cũng không vỡ và dung lượng thường nhỏ, nhưng có những nơi đơn giản là không nhận nó. Phần mềm gửi thư điện tử chặn SVG vì tệp này có thể chứa mã kịch bản, nên hình trong bản tin quảng cáo bắt buộc phải là PNG hoặc JPG. Nhiều sàn thương mại điện tử, cổng nộp hồ sơ và biểu mẫu tải ảnh chỉ chấp nhận đuôi png, jpg. Ứng dụng di động cần bộ biểu tượng ở các mật độ điểm ảnh cố định. Phần mềm soạn thảo văn phòng cũ chèn SVG vào là hỏng bố cục. Khi in ấn, nhà in đôi khi yêu cầu bản điểm ảnh ở độ phân giải cụ thể để tránh rủi ro phông chữ bị thay thế. Trong tất cả những trường hợp đó, bạn không cần mở phần mềm thiết kế nặng chỉ để bấm xuất một tệp. Việc dựng SVG thành PNG là một phép toán mà chính trình duyệt đã làm được từ lâu, và công cụ này chỉ đưa nó ra thành vài nút bấm.

Lợi ích khi sử dụng

• •Tệp SVG không được tải lên máy chủ nào, phù hợp với logo và bộ nhận diện chưa công bố
• •Xuất được nhiều mức kích thước từ cùng một tệp mà không phải mở phần mềm thiết kế
• •Biết trước kích thước PNG sẽ xuất nên không phải chuyển đổi rồi mới phát hiện sai
• •Nền trong suốt được giữ đúng nên hình dùng lại được trên mọi màu nền
• •Lỗi được nói rõ nguyên nhân thay vì im lặng trả về ảnh trắng
• •Chạy được trên điện thoại khi cần gấp một tệp PNG lúc đang di chuyển

Cách chuyển SVG sang PNG

1. 1Bấm vào khung chọn tệp ở cột trái rồi chọn tệp SVG từ máy. Kích thước gốc của tệp hiện ngay dưới tên tệp.
2. 2Nhìn khung xem trước để chắc chắn hình hiện đủ. Nếu chữ biến mất hoặc một phần hình trống, tệp đang tham chiếu tài nguyên bên ngoài và bản PNG cũng sẽ thiếu y như vậy.
3. 3Kéo thanh hệ số phóng để chọn mức từ 1x đến 8x, hoặc bật công tắc kích thước tùy chỉnh rồi nhập chiều rộng và chiều cao cụ thể.
4. 4Chọn nền: giữ trong suốt nếu định đặt hình lên nền màu khác, chọn trắng nếu định in hoặc chèn vào tài liệu.
5. 5Bấm nút chuyển sang PNG, xem lại ảnh kết quả ở cột phải rồi bấm tải về máy.

Chuyện gì thực sự xảy ra khi tệp SVG được dựng thành PNG

SVG không phải là ảnh theo nghĩa thông thường mà là một tài liệu mô tả hình bằng chữ: đường tròn này tâm ở đâu bán kính bao nhiêu, đường path kia đi qua những điểm nào, tô màu gì. Muốn có PNG, ai đó phải đọc bản mô tả ấy rồi tính ra màu của từng điểm ảnh, và việc đó gọi là dựng ảnh. Công cụ này giao phần việc ấy cho chính trình duyệt: nội dung tệp được đóng thành một đối tượng blob, tạo địa chỉ tạm, nạp vào một thẻ ảnh trong bộ nhớ, rồi vẽ thẻ ảnh đó lên canvas ở kích thước bạn chọn và đọc ngược ra chuỗi dữ liệu PNG. Điểm mấu chốt nằm ở chỗ ảnh SVG nạp qua thẻ ảnh bị đặt trong một hộp kín: nó không được tải phông chữ từ máy chủ khác, không được nạp ảnh liên kết bằng địa chỉ tuyệt đối, không chạy mã kịch bản và không truy cập được kiểu dáng của trang chứa nó. Đây là quy định bảo mật của trình duyệt chứ không phải hạn chế của công cụ, và nó giải thích gần như toàn bộ các trường hợp PNG xuất ra bị thiếu chữ hoặc thiếu một mảng hình.

Chọn hệ số phóng theo nơi sẽ dùng ảnh

Hệ số phóng nhân trực tiếp vào kích thước gốc của tệp, nên một tệp SVG khai báo 512 nhân 512 chọn mức 2x sẽ cho ra ảnh 1024 nhân 1024. Mức 1x chỉ đủ dùng khi ảnh hiển thị đúng bằng kích thước gốc trên màn hình thường, ngày nay hiếm khi là lựa chọn tốt. Mức 2x là mặc định hợp lý cho web vì gần như mọi điện thoại và phần lớn máy tính xách tay đời mới đều có mật độ điểm ảnh gấp đôi, ảnh 1x đặt lên các màn hình đó sẽ trông mềm nhũn. Mức 3x và 4x dành cho bộ tài nguyên ứng dụng di động, nơi hệ điều hành yêu cầu sẵn nhiều bản cho từng mật độ màn hình. Mức 6x đến 8x chỉ nên dùng khi ảnh sẽ được in hoặc sẽ bị phóng to để soi chi tiết. Cần nhớ rằng dung lượng tăng theo bình phương chứ không tăng tuyến tính: nhân đôi hệ số phóng làm số điểm ảnh tăng gấp bốn, nên một tệp xuất ở 8x có thể nặng gấp mười sáu lần bản 2x mà mắt thường không phân biệt được khi xem trên web. Hãy chọn mức vừa đủ rồi dừng lại.

Nền trong suốt, kênh alpha và viền răng cưa

PNG lưu được kênh alpha, tức mỗi điểm ảnh ngoài ba giá trị màu còn có thêm một giá trị độ đục. Nhờ vậy ảnh có thể có nền hoàn toàn trong suốt và đặt lên bất kỳ màu nền nào cũng khớp. Khi bạn chọn nền trong suốt, công cụ không tô gì lên canvas trước khi vẽ, phần nào tệp SVG không phủ đến sẽ giữ nguyên độ đục bằng không. Có một nhầm lẫn rất phổ biến ở bước này: nếu bản thân tệp SVG chứa sẵn một hình chữ nhật màu trắng phủ toàn khung, ảnh xuất ra vẫn có nền trắng dù bạn đã chọn trong suốt, bởi màu trắng đó là nội dung của tệp chứ không phải nền canvas. Muốn bỏ, phải mở tệp SVG ra xóa hình chữ nhật ấy. Một điểm nữa cần biết là viền của hình cong được làm mượt bằng cách pha các điểm ảnh rìa với nền phía sau. Nếu bạn xuất ảnh trên nền trắng rồi dán lên nền tối, viền sẽ hiện một quầng sáng mảnh quanh hình. Cách tránh duy nhất là xuất với nền trong suốt và để phần mềm đích tự pha viền với nền thật của nó.

Cặp công cụ ngược chiều: sang PNG thì chính xác, ngược lại thì chỉ xấp xỉ

Trang này và công cụ Image to SVG trên cùng website làm hai chiều đối nhau của một trục, nhưng độ tin cậy của hai chiều rất khác nhau. Chiều từ vector sang điểm ảnh là chiều xuôi: mọi hình dạng trong tệp SVG đã được mô tả bằng công thức toán học nên máy chỉ việc tính ra màu từng điểm ảnh, kết quả luôn đúng và lặp lại được, chạy mười lần cho ra mười tệp giống hệt nhau. Chiều ngược lại là chiều khó: từ một mảng điểm ảnh, phần mềm phải đoán xem đâu là đường viền của hình, gom các vùng cùng màu lại rồi vẽ đường path bám theo, và mọi kết quả đều là xấp xỉ phụ thuộc vào tham số bạn đặt. Vì vậy nếu bạn còn giữ tệp SVG gốc, đừng bao giờ xuất PNG rồi vector hóa ngược lại khi cần bản vector, hãy quay về tệp gốc. Trong cùng nhóm còn có SVG Optimizer để giảm dung lượng tệp vector trước khi dùng, SVG to CSS khi bạn muốn nhúng hình thẳng vào giao diện web mà vẫn giữ dạng vector, và SVG Path Editor khi cần chỉnh lại đường nét trước lúc xuất.

Giới hạn kỹ thuật nên biết trước khi xuất tệp lớn

Vùng canvas của trình duyệt có trần cứng và trần này thay đổi theo thiết bị. Máy tính để bàn thường chịu được cạnh khoảng mười sáu nghìn điểm ảnh, nhưng trình duyệt trên điện thoại của Apple tụt xuống quanh mức bốn nghìn và còn khống chế thêm tổng diện tích. Vượt trần thì canvas không báo lỗi mà lặng lẽ trả về một tệp rỗng hoặc toàn màu đen, đây là cái bẫy khiến nhiều người tưởng công cụ hỏng. Vì thế trang này chặn trước ở mức tám nghìn điểm ảnh mỗi cạnh và bốn mươi triệu điểm ảnh tổng cộng, kèm thông báo nói rõ nên giảm xuống bao nhiêu. Ngoài trần kích thước còn ba giới hạn khác đáng nhớ. Thứ nhất, thẻ foreignObject dùng để nhúng nội dung HTML vào SVG không được dựng khi nạp qua thẻ ảnh, phần đó sẽ trống. Thứ hai, hoạt ảnh trong tệp SVG chỉ được chụp lại ở khung hình đầu tiên vì PNG không lưu được chuyển động. Thứ ba, phông chữ phải được nhúng thẳng vào tệp hoặc chữ phải được chuyển thành đường path, nếu chỉ ghi tên phông thì máy khác mở ra sẽ thay bằng phông mặc định và bố cục chữ xô lệch.

Câu hỏi thường gặp (FAQ)

Từ khóa liên quan

• chuyển svg sang png
• svg to png online
• đổi file svg sang png
• xuất png từ svg
• svg to png transparent
• png nền trong suốt từ svg
• chuyển svg sang png chất lượng cao
• svg to png 2x 3x
• convert svg to png free
• svg to png converter tiếng việt
• xuất logo svg ra png
• svg sang png cho email marketing
• svg to png không cần cài phần mềm
• đổi svg sang png trên điện thoại
• kích thước png xuất từ svg
• svg mất chữ khi xuất png
• rasterize svg
• svg to png canvas trình duyệt