小技巧：如何用 Chrome 將 SVG 轉成 PNG

怎么把 SVG 轉成 PNG ？用 Chrome 吧，非常好用，還能設定自己想要的尺寸。

什么是 SVG ？

SVG （Scalable Vector Graphics，可縮放矢量圖形） 是基於 XML 、用於描述二維矢量圖形的一種圖形格式。 SVG 由 W3C 制定，是一個開放標准。

SVG 轉 PNG 有哪些辦法？

1. 在線轉換
2. 在線編輯器
3. 本地軟件，如: AI, Inkscape 等
4. 代碼轉換

但都會有些問題：

1. 在線轉換：改不了顏色、尺寸。
   • 尤其 SVG 圖標，一般 24x24 黑色。
2. 在線編輯器：編輯不好，用着總不怎么靈光。
3. 本地軟件：需要下載安裝，可能操作不好。就簡單轉 PNG 而已。
   • Sketch 導入 SVG 圖標（ path 屬性描述）效果異常； AI 也是，也可能是操作不熟。
4. 代碼轉換：算了吧。

現代瀏覽器

現代瀏覽器（Chrome, Edge 等）本身就能預覽 SVG ，不如直接截圖？也是個辦法。

不過，發現 Microsoft Edge 可以直接另存 SVG ，但尺寸只能跟隨窗口改變，不精確。

那 Google Chrome 呢？首先想到的是插件，但沒找到一個好用的。后來發現，「開發者工具」里就能夠導出。

Chrome 將 SVG 轉 PNG

准備一個 SVG 圖標

准備了一個 svg.svg 做演示。你也可以到 Simple Icons: https://simpleicons.org 下載一個。

Chrome 打開 SVG 圖標

直接把 SVG 圖標拖動到 Chrome 頁面，打開：

F12 或右鍵「審查元素」打開「開發者工具」

頁面右側頂部工具欄，打開第二個按鈕「Toggle device toolbar」（Elements 左側那個）。

調整 SVG 的尺寸和顏色

1. 頁面左側上部，設定尺寸
   • 如 500x500
2. 頁面右側上部，修改顏色
   • svg 添加屬性 style="background-color:#FFB13B" ，設定背景色
   • path 添加屬性 fill="#ffffff" ，設定前景色

將 SVG 轉成 PNG

頁面左側右上角打開「更多」，選擇「Capture screenshot」：

就會保存成 PNG 到下載目錄。

但 macOS 上 PNG 尺寸會放大一倍：

可以設定尺寸時減小一倍，或者用 PS 編輯。

此外，「Capture full size screenshot」可以截取頁面長圖。

結語

什么時候用上了這個小技巧，想得起 GoCoding 就最好了。