實用工具
如何把 SVG 按精確像素導出為 PNG
把圖標與插畫柵格化給郵件客戶端、舊 CMS 字段或只能用位圖的幻燈——本地渲染，適合含保密圖形的路徑數據。
MoreKits 團隊
2026-05-02
6 分鐘閱讀
相關工具
與本篇教學搭配使用的更多工具：
為什麼有用
不少郵件客戶端禁用內聯 SVG；舊門戶上傳字段只收 PNG；幻燈裡嵌超大 SVG 會卡頓。按 2×、3× 導出 PNG 仍是兼容性退路。
三類場景
品牌
給合作方 PNG Logo 包
導出 512/1024 透明底方圖。
顏色可控
前端
`<picture>` 漸進增強
與現代格式同源 SVG 母版對齊尺寸。
老瀏覽器兜底
教師
DOCX 裡插圖更穩
把 Figma 導出 SVG 再柵格化嵌入文檔。
Office 兼容
操作步驟
打開 SVG 轉 PNG。
上傳 .svg 或粘貼片段
注意內嵌超大位圖會拖慢頁面。
設定寬高
Retina 需求按
devicePixelRatio倍增 CSS 像素。背景透明或鋪底
細線圖標常用透明底；需要白底再鋪色。
預覽鋸齒
細斜線若出現摩爾紋，提高分辨率或簡化路徑。
下載 PNG
logo@2x.png一類命名配合構建緩存策略。
實用技巧
- 現代 Web 仍優先直接放 SVG；PNG 只是兼容層。
- 怪異濾鏡在不同引擎表現不同——目標環境多點預覽。
- 與 SVG 轉 ICO 組合做桌面錨圖標。
常見誤區
常見陷阱
遠程字體缺失
設計稿若依賴在線字體，柵格化前請在工具裡轉曲。
常見陷阱
超大路徑性能
複雜插畫可能卡死標籤頁——先分層簡化。
常見陷阱
印刷 CMYK
瀏覽器輸出面向 RGB 屏顯——印刷請走專業流程。
不適合的場景
- CI 無頭導出：Linux 容器裡用 resvg/sharp 更可重複。
- 精靈圖打包：需要間隙與裝箱算法。
- SMIL/CSS 動畫 SVG：應截取幀序列或導出視頻。
常見問題
會上傳嗎？
本地渲染；路徑數據敏感時仍可斷網自檢。
@1x/@2x 快速出兩套？
導出兩次並立刻改名，避免緩存衝突。
PNG 比 SVG 還大？
攝影級漸變柵格會暴漲——幾何圖形才適合矢量。