Trình chuyển đổi SVG sang PNG miễn phí

SVG với PNG

SVG (Scalable Vector Graphics) là một định dạng vector, markup XML mô tả hình dạng một cách toán học. Một hình tròn trong SVG là "vẽ một hình tròn bán kính R tại (x, y) với màu tô F", hướng dẫn, không phải pixel. Trình duyệt render các hướng dẫn ở bất kỳ kích thước nào bạn hiển thị SVG, vì vậy nó vẫn sắc nét ở 1x, 2x, 3x và hơn thế. PNG (Portable Network Graphics) là một định dạng raster, một lưới cố định các pixel ở các giá trị màu cố định. PNG là những gì bạn nhận được khi bạn "đóng băng" một SVG ở một độ phân giải cụ thể. Chuyển đổi SVG sang PNG được gọi là rasterisation: chọn một lưới pixel mục tiêu và render các hướng dẫn vector ở kích thước cố định đó, sau đó kết quả là một hình ảnh raster bình thường với tất cả các ràng buộc kích thước mà điều đó ngụ ý.

SVG được phát triển bởi W3C SVG Working Group được thành lập năm 1998; SVG 1.0 trở thành W3C Recommendation vào ngày 4 tháng 9 năm 2001; SVG 1.1 theo sau vào ngày 14 tháng 1 năm 2003 và là phiên bản chiếm ưu thế trong thập kỷ tiếp theo; SVG 1.1 Second Edition đến vào ngày 16 tháng 8 năm 2011; SVG 2 đạt Candidate Recommendation vào ngày 4 tháng 10 năm 2018 nhưng đã bị đình trệ, vẫn là CR thay vì Recommendation đầy đủ tính đến năm 2026. PNG trở thành W3C Recommendation vào ngày 1 tháng 10 năm 1996 và IETF RFC 2083 vào tháng 3 năm 1997; định dạng đã ổn định kể từ đó.

Tại sao nên chuyển SVG sang PNG?

• Các email client loại bỏ hỗ trợ SVG. Microsoft bắt đầu loại bỏ hỗ trợ SVG inline trong Outlook cho web và Outlook mới cho Windows bắt đầu từ tháng 9 năm 2025, với việc triển khai hoàn thành vào tháng 10 năm 2025, SVG inline hiện được render dưới dạng không gian trống. Tệp đính kèm SVG vẫn hoạt động, nhưng các template email kiểu inline trước đây nhúng logo SVG cần fallback PNG. Giao diện web của Gmail render SVG tốt; Apple Mail cũng vậy; sự đứt gãy chính là ở phía Microsoft.
• Các nền tảng mạng xã hội. Twitter/X, Instagram, Facebook, LinkedIn hoặc từ chối các tải lên SVG hoàn toàn hoặc nén và mã hóa lại chúng thành PNG/JPEG trước khi hiển thị. Pre-rasterising ở các kích thước ưa thích của nền tảng (1200x630 cho Open Graph, 1080x1080 cho Instagram) bỏ qua chuyển đổi tự động lossy của họ.
• Tạo biểu tượng ứng dụng. Biểu tượng ứng dụng iOS phải là PNG 1024x1024 (listing App Store) cộng với các kích thước cụ thể của thiết bị khác nhau; biểu tượng thích ứng Android render in-launcher tại 432x432 (108dp ở xxxhdpi) với 512x512 cho listing Play Store; biểu tượng manifest PWA thường cần 192x192 và 512x512. SVG không được chấp nhận bởi bất kỳ cái nào trong số này.
• In theo yêu cầu và prepress. Printful, Redbubble, Society6, RedPrint và hầu hết các dịch vụ in theo yêu cầu yêu cầu PNG (hoặc PDF) ở độ phân giải cụ thể, thường là 300 DPI cho kích thước vật lý mục tiêu. SVG không được chấp nhận trong các luồng tải lên của họ.
• CMS và ứng dụng legacy. Các bản cài đặt WordPress cũ hơn, các công cụ quản trị legacy, các trình chỉnh sửa tài liệu có trước hỗ trợ SVG trình duyệt, bất cứ nơi nào "phải là PNG" là yêu cầu cứng.
• Emoji Discord và tương tự. Tải lên emoji tùy chỉnh Discord yêu cầu PNG (hoặc GIF động cho emoji động); kích thước được khuyến nghị 128x128 với giới hạn kích thước tệp 256 KB. SVG không được chấp nhận.

Cách Chuyển đổi Hoạt động trong Trình duyệt của Bạn

Kỹ thuật rasterisation Canvas API đơn giản nhưng có những cạm bẫy tinh tế. Pipeline tiêu chuẩn: tải SVG dưới dạng phần tử Image qua Blob URL (URL.createObjectURL(svgBlob)) hoặc trực tiếp dưới dạng data URI (data:image/svg+xml;base64,...); chờ sự kiện onload; tạo một canvas ở kích thước đầu ra mong muốn; gọi ctx.drawImage(image, 0, 0, width, height) để rasterise SVG ở kích thước đã chọn; xuất qua canvas.toBlob('image/png'). Trình render SVG của trình duyệt xử lý gradient, mask, filter, văn bản và hầu hết bộ tính năng SVG một cách chính xác trong quá trình rasterisation này. Ba lưu ý quan trọng. Tài nguyên bên ngoài thất bại dưới CORS: SVG tham chiếu hình ảnh bên ngoài (<image href="https://other-domain.com/photo.jpg">) hoặc font bên ngoài có thể không tải nếu máy chủ cross-origin không trả về các tiêu đề CORS thích hợp, canvas trở nên "bị ô nhiễm" và toBlob ném SecurityError. Nhúng hình ảnh dưới dạng data URI và font dưới dạng @font-face với src data URI để tránh điều này. SVG chứa thẻ <script> không thực thi khi được tải dưới dạng Image, bộ giải mã hình ảnh của trình duyệt loại bỏ ngữ cảnh script vì bảo mật. Hoạt hình SMIL bị phẳng hóa thành một khung duy nhất tại time=0; nếu SVG phụ thuộc vào hoạt hình cho trạng thái hình ảnh của nó, PNG được rasterised sẽ không nắm bắt được. Sự khác biệt pixel giữa các trình duyệt: Chrome, Firefox và Safari tạo ra đầu ra rasterised hơi khác nhau cho cùng một SVG do sự khác biệt trong trình render vector tương ứng của họ; cho biểu tượng sản xuất, render một lần và giao PNG thay vì dựa vào chuyển đổi theo trình duyệt khi chạy.

Chọn Độ phân giải Đầu ra Phù hợp

SVG không có độ phân giải cố hữu, lựa chọn là của bạn. Các mục tiêu phổ biến: biểu tượng listing iOS App Store 1024x1024; biểu tượng listing Android Play Store 512x512 (với biểu tượng thích ứng in-launcher tại 432x432, được thiết kế trong vùng an toàn 264x264); biểu tượng manifest PWA 192x192 và 512x512; favicon lịch sử 16x16, 32x32, 48x48 (favicon.ico hiện đại gói cả ba kích thước; thực hành tốt nhất hiện đại giao icon.svg cho các trình duyệt hỗ trợ nó cộng với fallback apple-touch-icon.png 192x192); thẻ xã hội Open Graph 1200x630; thẻ Twitter 1200x675; vuông Instagram 1080x1080; emoji Discord 128x128; emoji Slack 128x128; in tại 300 DPI yêu cầu 3x kích thước inch trong pixel (một bản in logo 4 inch cần 1200x1200). Đối với render chất lượng Retina trên màn hình, mục tiêu 2x kích thước hiển thị, một biểu tượng hiển thị 100x100 nên được xuất ở 200x200 để giữ sắc nét trên màn hình Retina.

Cách sử dụng Bộ chuyển đổi này

1. Cung cấp SVG. Thả tệp .svg vào vùng tải lên, hoặc dán markup SVG thô vào vùng văn bản. Cả hai con đường đều hoạt động theo cùng cách.
2. Đặt kích thước đầu ra. Chiều rộng và chiều cao tính bằng pixel; toggle lock-aspect-ratio giữ tỷ lệ khi bạn thay đổi một kích thước. Tối đa 8192x8192 (giới hạn kích thước canvas trên hầu hết các trình duyệt hiện đại; một số phần cứng giới hạn ở 4096 hoặc 8192).
3. Chọn nền. Trong suốt (mặc định, bảo tồn kênh alpha của SVG), trắng đặc, đen đặc, hoặc bất kỳ màu tùy chỉnh nào. Hữu ích khi đích đến không hỗ trợ trong suốt (một số ngữ cảnh in legacy).
4. Chuyển đổi và tải xuống. Nút Convert rasterises SVG ở kích thước đã chọn và hiển thị bản xem trước; Download lưu PNG vào thiết bị của bạn.

Phạm vi Trung thực: Công cụ này Làm gì và Không Làm gì

Công cụ này rasterises một SVG đơn lẻ thành một PNG đơn lẻ ở kích thước đã chọn. Nó không tạo ra bộ biểu tượng đa kích thước đầy đủ mà các app store yêu cầu (1024x1024 + 180x180 + 167x167 + 152x152 + 120x120 + 87x87 + 80x80 + 60x60 + 58x58 + 40x40 + 29x29 + 20x20 chỉ riêng cho iOS), cho điều đó, hãy sử dụng một công cụ chuyên dụng như RealFaviconGenerator hoặc App Icon Generator. Nó không tối ưu hóa PNG kết quả (sử dụng công cụ SVG Optimizer để dọn dẹp SVG nguồn trước; cho tối ưu hóa PNG sử dụng bộ nén riêng). Nó không gói đầu ra favicon.ico đa kích thước. Nó không hoạt hình, PNG được xuất là single-frame, ngay cả khi SVG có hoạt hình SMIL. Để tạo hàng loạt nhiều kích thước từ một SVG, hãy sử dụng CLI như sharp-cli (Node.js) hoặc resvg-cli (Rust); chuyển đổi theo kích thước mà họ thực hiện giống như công cụ này, chỉ có thể scriptable.

Quyền riêng tư: Tại sao chỉ-Trình duyệt Quan trọng ở đây

Các tệp SVG thường chứa tài sản thương hiệu độc quyền, các logo đang trong quá trình thực hiện, các biểu tượng sản phẩm nội bộ hoặc các tệp nguồn do nhà thiết kế cung cấp theo NDA. Các dịch vụ chuyển đổi phía máy chủ (CloudConvert, Online-Convert, Convertio) tải SVG của bạn lên cơ sở hạ tầng của họ nơi nó nằm trong logs. Công cụ này chạy toàn bộ pipeline rasterisation trong trình duyệt của bạn qua Canvas API, xác minh trong tab Network của DevTools khi bạn nhấp Convert, hoặc đưa trang offline (chế độ máy bay) sau khi tải và bộ chuyển đổi vẫn hoạt động. An toàn cho công việc thương hiệu chưa được phát hành, các biểu tượng sản phẩm nội bộ, các tệp nhà thiết kế ràng buộc NDA hoặc bất kỳ SVG nào bạn không muốn được sao chép vào ổ cứng của người lạ.

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

Tại sao chuyển đổi SVG sang PNG thay vì sử dụng SVG trực tiếp?

Đối với hầu hết các trình duyệt hiện đại, bạn không cần phải. SVG render nguyên gốc trong Chrome, Firefox, Safari, Edge và Opera, và là định dạng phù hợp cho hầu hết các trường hợp sử dụng web. Chuyển đổi cần thiết khi đích đến không hỗ trợ SVG: Microsoft đã ngừng SVG inline trong Outlook web và Outlook mới cho Windows vào tháng 9-tháng 10 năm 2025; biểu tượng ứng dụng iOS / Android phải là PNG; các dịch vụ in theo yêu cầu yêu cầu PNG; emoji tùy chỉnh Discord và Slack tải lên PNG; một số CMS legacy vẫn từ chối các tải lên SVG. Đối với các ngữ cảnh đó, bạn rasterise một lần và giao PNG.

Tôi nên xuất ở độ phân giải nào?

Khớp với đích đến. Listing iOS app store: 1024x1024. Android Play Store: 512x512 (biểu tượng thích ứng in-launcher: 432x432). Manifest PWA: 192 và 512. Thẻ xã hội Open Graph: 1200x630. Vuông Instagram: 1080x1080. Đối với màn hình Retina, xuất ở 2x kích thước CSS hiển thị, một biểu tượng 100x100 phải là PNG 200x200 để giữ sắc nét. Đối với in, 300 DPI nghĩa là 300 pixel mỗi inch hiển thị (một bản in logo 4 inch = PNG 1200x1200). Tối đa ở đây là 8192x8192, đó là giới hạn canvas trình duyệt hiện đại.

Tại sao SVG của tôi mất các phần sau khi chuyển đổi?

Ba nguyên nhân phổ biến. Tài nguyên bên ngoài bị chặn bởi CORS: nếu SVG tham chiếu hình ảnh hoặc font trên miền khác không trả về tiêu đề CORS thích hợp, canvas trở nên "bị ô nhiễm" và xuất khẩu âm thầm loại bỏ chúng. Nhúng hình ảnh dưới dạng data URI và font dưới dạng @font-face với src data URI. Scripts bên trong SVG không thực thi: thẻ <script> bị loại bỏ bởi mô hình bảo mật bộ giải mã hình ảnh của trình duyệt, bất cứ điều gì script tạo ra sẽ không xuất hiện. Hoạt hình SMIL render tại time=0 (khung bắt đầu); trạng thái hình ảnh hoạt hình không được nắm bắt. Đối với SVG phụ thuộc vào JavaScript hoặc hoạt hình, render trước trong trình duyệt thực rồi chụp ảnh màn hình, hoặc sử dụng Puppeteer ở chế độ headless.

Nó có bảo toàn tính trong suốt không?

Có khi "Trong suốt" được chọn làm nền, PNG giữ lại kênh alpha của SVG, với các pixel bán trong suốt được bảo toàn hoàn toàn. Chọn một màu đặc (trắng, đen, tùy chỉnh) khi đích đến không hỗ trợ tính trong suốt hoặc khi bạn cần một màu xung quanh cụ thể được nung vào (một số ngữ cảnh in legacy).

Tôi có thể tạo nhiều kích thước từ một SVG không?

Không trong một cú nhấp chuột, công cụ này tạo một PNG duy nhất cho mỗi chuyển đổi. Đối với việc tạo bộ biểu tượng app-store (khoảng một tá kích thước iOS và Android yêu cầu), sử dụng một công cụ chuyên dụng như RealFaviconGenerator (web), App Icon Generator (web), hoặc một CLI như sharp-cli (Node.js) hoặc resvg-cli (Rust), chuyển đổi theo kích thước mà họ thực hiện là cùng một rasterisation phong cách Canvas, chỉ được scripted qua nhiều kích thước.

Các tệp SVG của tôi có được tải lên không?

Không. Rasterisation chạy hoàn toàn trong trình duyệt của bạn qua Canvas API. SVG của bạn và PNG kết quả không bao giờ băng qua mạng, xác minh trong tab Network của DevTools khi bạn nhấp Convert, hoặc đưa trang offline (chế độ máy bay) sau khi tải và bộ chuyển đổi vẫn hoạt động. An toàn cho công việc thương hiệu chưa được phát hành, các biểu tượng sản phẩm nội bộ, các tệp nguồn nhà thiết kế ràng buộc NDA hoặc bất kỳ SVG nào bạn không muốn được sao chép vào ổ cứng của người lạ.

Công cụ liên quan