# SVG 轉圖片 向量圖轉 PNG、JPEG 或 WebP，尺寸隨你定
說個尺寸。向量圖本來就沒有尺寸可丟。
> 在瀏覽器裡把 SVG 轉成 PNG、JPEG 或 WebP，尺寸隨你定。給寬度、給倍數，或者給一個框，還能順手出 @2x 和 @3x。透明保住，什麼都不上傳。
本頁是一個完全在你的瀏覽器裡執行的互動式工具，地址是 https://abox.tools/zh-TW/svg-to-image/。你交給它的任何內容都不會被上傳。下面是這個頁面用文字對該工具的全部說明；要使用它，請開啟這個地址。
## 你的 SVG 檔案**不會上傳**。這裡根本沒有伺服器。
光柵化用的，就是剛把這張圖顯示在你螢幕上的那個引擎。檔案從你的硬碟上讀進來，根標籤由 `src/svg.js` 裡一百來行你能讀的程式碼改寫成你要的尺寸，再畫到瀏覽器內建的畫布上。這個工具沒有任何聯網功能，不取東西，也不發東西。就算真有，這個頁面的另一頭也沒有伺服器能接住一個 logo。
- ✗ 不上傳
- ✗ 不註冊
- ✗ 沒有水印
- ✓ 斷網能用
- ✓ 開源
## 不上傳怎麼把 SVG 轉成 PNG
1. **選 SVG。** 拖一個到下面的方框裡，或者挑一整個資料夾一次轉完。瀏覽器直接從你的硬碟上讀，這期間沒有東西發出去。每一行都寫著這個檔案認為自己有多大，而且會分清這個尺寸是來自它的 `viewBox`，還是因為檔案根本沒宣告尺寸而替它假定的。
2. **定多大。** 給個倍數最省事，整批處理時也最合適：每張圖都從自己的尺寸出發去放大，所以一套圖示之間的比例關係不會亂。其他辦法是給寬、給高、給最長邊，或者給一個兩邊都定死的框。這裡填個大數字不像處理照片那樣要付代價，因為圖是按那個尺寸重畫一遍，不是硬拉過去的。
3. **需要高解析度螢幕的那幾份，就一起出了。** 手機和 Retina 筆記本每個 CSS 畫素要畫兩到三個裝置畫素，所以一個 200 畫素的 logo，背後得墊一張 400 或者 600 畫素的檔案。勾上 `@2x` 和 `@3x`，出來的檔名正是 Xcode、安卓工具鏈和 CSS `image-set()` 各自期待的那種，而且每一份都嚴格是第一份的兩倍或三倍，不是各自取整。
4. **挑格式，順便定透明怎麼辦。** 沒有特別理由就用 PNG：無損，保得住透明，大片純色在它裡面壓得也好。JPEG 根本沒有透明可言，所以不管你挑不挑，都會給它墊一個背景色，不墊的話每一個透明畫素都會變黑。WebP 兩樣都行，檔案還更小，代價是老一點的軟體讀不了。
5. **下載之前先看預覽。** 預覽由寫檔案的同一段程式碼、拿你的檔案、在你的機器上畫出來。一張圖變成畫素時有兩件事會變，而這兩件在預覽裡都看得見：只有半個畫素寬的髮絲線會發灰，文字則用這臺電腦上有的字型來畫，而不是從網上取一個。
6. **把檔案拿走。** 一個檔案一個下載，或者整批打成一個 zip。名字跟著來源的 SVG 走，多出來的那幾份帶 `@2x` 和 `@3x` 字尾。兩個檔案要是會重名，會給它們編號，而不是讓其中一個悄悄把另一個蓋掉。
## 說得更細的版本
[怎麼把 SVG 轉成合適尺寸的 PNG](https://abox.tools/zh-TW/guides/convert-an-svg-to-png/): 向量圖自己沒有畫素尺寸，所以這個數字由你定。螢幕、應用圖示和印刷各自的數字從哪裡來，以及一張圖紙變成畫素那一刻會發生什麼變化。
## 工具箱裡還有
- [圖片轉 SVG](https://abox.tools/zh-TW/image-to-svg/): 一個形狀，一條輪廓。不該有的東西，點一下就好。
- [身高對比圖](https://abox.tools/zh-TW/compare-heights/): 把身高打進去，把圖帶走。為了畫它，不會往外送任何東西。
- [圖片壓縮](https://abox.tools/zh-TW/compress-image/): 說個大小，剩下的它來算。
- [圖片縮放](https://abox.tools/zh-TW/resize-image/): 說個尺寸，拉個框，挑個格式。
## 常見問題
### 我的 SVG 會傳到什麼地方去嗎？
不會。檔案由你自己的瀏覽器在你自己的硬體上讀進來，再由那個負責渲染你看到的每一張圖的引擎畫到畫布上，然後作為下載還給你。這個工具沒有任何聯網功能，不取東西，也不發東西。頁面的 `Content-Security-Policy` 把它可能聯的地址全列了出來，沒有一個是本站的。
### SVG 該轉成多大？
讀它的那個東西要多大，就乘上它將要出現的那塊螢幕的裝置畫素比。一個佔 200 CSS 畫素的 logo，Retina 筆記本上要 400，近幾年的手機上要 600，這裡的 `@2x` 和 `@3x` 就是做這個的。做應用圖示或者商店素材，那是商店給你一個確切數字，照著填。什麼依據都沒有的時候，最長邊 1024 是個好用的預設值，夠大多數場合用，也還發得動郵件。
### 放大會掉畫質嗎？
不會。這也是唯一一處這個回答能老老實實說「不會」的地方。向量圖是指令，不是畫素，瀏覽器會按要的尺寸把曲線重畫一遍。從一個 24 畫素的圖示出發畫到 4000 畫素，跟 24 畫素時一樣銳利。反過來就不行了：一旦變成 PNG，它就跟別的圖一樣是畫素，所以要多大就直接按多大轉，別轉完再去縮放。
### 我的 SVG 沒寫寬高，出來是多大？
看 `viewBox`，有的話就用它。它的寬高是使用者單位而不是畫素，但那是檔案裡僅有的數字，瀏覽器也就把它當成這張圖的自然尺寸。要是連 viewBox 都沒有，頁面會在那一行旁邊標上*假定*，並按 300 × 150 處理，一個 `![]()
` 本來也是這麼畫它的。哪種情況都不妨礙你自己指定尺寸，指定了就按那個畫。
### 為什麼 PNG 裡的文字變了樣？
因為字型不在 SVG 裡。一個畫文字的 SVG 只是點了字型的名字，剩下的交給機器自己去找，而那種用 `@import` 從 Google Fonts 拉字型的檔案，在這裡什麼都拉不到：經由 `![]()
` 繪製的 SVG 不許取任何東西，這跟攔住它偷偷把你檔案送出去的是同一條規則。解決辦法每個設計師都知道：匯出之前在繪圖軟體裡把文字轉成路徑。轉完它就是幾何圖形了，到哪裡都長一個樣。
### 能一次轉好幾個檔案嗎？
能。列表上每個 SVG 都按同一套設定渲染，整批打成一個 zip。整批處理時通常該選倍數，比如「按檔案自己宣告的尺寸放大 4 倍」，因為這樣每張圖都是從自己的尺寸出發，而不是被一起硬拽到同一個畫素數上。點任意一行，就能把那張換進預覽。
### 有尺寸上限嗎？
有，是瀏覽器的上限，不是我們的。畫布過了每邊 16384 畫素左右就撐不住，iPhone 和 iPad 上的 Safari 大約停在 1670 萬畫素的面積，也就是 4096 × 4096。超過這個數，頁面會先警告你，而不是甩給你一張空白圖，而空白正是瀏覽器撐不住時的表現：`toBlob` 什麼都不返回，連個說明原因的報錯都沒有。超過一億畫素的，工具直接拒絕，因為那還沒編碼一個位元組，畫布本身就已經 400 MB 了。
### 透明會怎麼樣？
PNG 和 WebP 都保住。JPEG 根本沒有 alpha 通道，所以不管你要不要，都會在整張圖後面墊一層顏色，不墊的話所有透明的地方都會變黑，那看起來像個 bug，而不像 JPEG 該有的樣子。選 PNG 時也想墊個背景色，同樣是很正常的需求：它會把圖壓平到那個顏色上，而不是留一個洞。
### SVG 裡帶指令碼或者外部圖片，它能讀嗎？
能讀，而且瀏覽器肯畫的部分它都會畫出來。經由 `![]()
` 載入的 SVG 處在*安全靜態模式*：指令碼不跑，外部引用不取，動畫也不播，你拿到的是第一幀。所以一個裡面引了遠端 `` 的檔案，出來會缺那一塊。那是瀏覽器替你拒掉的，也正因如此，這個頁面才敢放心開啟一個從沒見過的檔案。
### 這個跟圖片縮放有什麼區別？
區別在源頭。[圖片縮放](https://abox.tools/zh-TW/resize-image/)從畫素出發，JPEG 或者 PNG，所以放大就得編造本來不存在的細節。這個從一張圖紙出發，沒什麼可編造，也沒有值得操心的上限。你手上是 SVG，這邊能給你銳利的結果；你手上是照片，那邊才對路。
### 免費嗎？要註冊嗎？
免費，沒有帳號，不用登入，沒有試用期，也沒有水印。檔案的數量和大小同樣沒有上限，因為沒有哪臺伺服器在為它們掏錢，工作是在你自己的機器上乾的。本站帶廣告，經費就是這麼來的，廣告拿不到關於你檔案的任何資訊。
### 斷網能用嗎？
能。頁面開一次之後斷網，它照常運作。這也是證明「什麼都沒上傳」最省事的辦法。一個把圖稿送出去渲染的工具，拔線那一刻就停了。
## 這條隱私承諾怎麼核實
- **你的圖稿沒地方可去。** Content-Security-Policy 把這個頁面允許聯的地址全列了出來，沒有一個是本站的。這裡沒有能收檔案的介面，程式碼裡也沒有一行會把檔案發出去，就算真有那麼個介面也一樣。
- **這裡沒有任何東西會去聯網取資料。** 整個 `src/` 裡，一個 `fetch`、一個 `XMLHttpRequest`、一個 `sendBeacon` 都找不到。整個光柵化就是一個裝著你自己檔案 blob 的 `![]()
`、一次往畫布上的 `drawImage`，再加一次 `canvas.toBlob`。
- **SVG 是文件，而這是它動彈不得的那種模式。** 一個 SVG 裡可以裝 `