UltKit

PSD 轉 SVG 轉換器

有些工具只接受 SVG,就把 Photoshop 設計存成 .svg 檔吧。轉換器會將 PSD 平面化,再把圖片包進 SVG 檔中。下文說明這樣何時就夠用,何時 Logo 需要描圖向量化。

圖片轉換器

或將JPG, JPEG, JPE … 檔案拖曳到這裡 ·

每個檔案最大 95 MB· 最多 20 個檔案· 30 分鐘後刪除

輸出

檔案會在我們的伺服器上處理,並於 30 分鐘後刪除。

使用方式

  1. 1

    上傳 PSD

    選擇一個或多個 .psd 檔案,每批最多 20 個,每個檔案最大 95 MB。

  2. 2

    按下「轉換為 SVG」

    可見的設計會依畫布尺寸合併為單一圖層,並嵌入 SVG 文件中。這裡沒有品質滑桿,因為內嵌的點陣圖是以無損方式儲存。

  3. 3

    開啟轉換結果

    將 .svg 檔拖進瀏覽器、Figma 或 Inkscape。外觀會和 PSD 一樣;放大到很大時會看到像素,這是正常現象。

PSD 轉 SVG:轉換器實際寫入的內容

PSD 是由多個圖層堆疊而成:來自照片和筆刷的像素圖層、會改變下層像素的調整圖層、文字圖層、智慧型物件,以及形狀圖層;自 2000 年的 6.0 版起,Photoshop 就以向量路徑儲存形狀圖層。Photoshop 本身於 1990 年 2 月問世,而 PSD 格式至今仍帶有可見圖層堆疊的合併預覽,讓其他程式不必理解每種圖層類型也能顯示設計。

這個轉換器使用的就是合併後的設計。它會依畫布尺寸將可見圖層轉繪成一張圖片,再寫出內容只有這張圖片的 SVG 文件。SVG 具有正確的寬度、高度和透明度,因此能像原稿一樣放進網頁或版面。它沒有的是任何一個可編輯的形狀:每條邊緣,包括形狀圖層的邊緣,都是像素。特效、遮色片和混合模式在 SVG 中沒有一對一的對應,所以轉繪後的結果才是最誠實的輸出。

PSD 寬度或高度的上限
30,000 px
PSD 檔案大小上限(更大的設計會使用 PSB)
2 GB
此轉換器接受的最大 PSD
95 MB
每批 PSD 檔案數
20

PSD

Adobe Photoshop 文件

PSD 是 Adobe Photoshop 的原生檔案格式,自 1990 年起使用。它會儲存圖層、遮色片、調整圖層、文字、智慧型物件、色板色版與色彩描述檔,讓設計稿日後可無損地重新編輯。檔案通常非常大,要完整呈現必須使用 Photoshop;GIMP、Photopea 和 Affinity 等其他編輯軟體開啟 PSD 的準確度不一。瀏覽器、手機和多數上傳表單無法直接顯示 PSD。

壓縮方式
無損
透明度
支援
動畫
不支援
推出年份
1990 · Adobe
PSD 轉檔工具

SVG

可縮放向量圖形(SVG)

SVG 是 W3C 於 2001 年標準化、以 XML 為基礎的向量格式。它描述的是形狀、路徑和文字而非像素,因此任何尺寸都保持清晰,用於標誌和圖示時檔案通常非常小。它支援透明度、CSS 樣式、指令碼和動畫,所有瀏覽器都能原生顯示。SVG 不適合照片,複雜的插圖也可能繪製得很慢。Illustrator、Inkscape、Figma 和瀏覽器都能開啟與編輯。

壓縮方式
–
透明度
支援
動畫
支援
推出年份
2001 · W3C
SVG 轉檔工具

當網頁建置工具、範本平台或割字機要求 SVG,而設計只有 Photoshop 檔案時,大家就會搜尋 PSD 轉 SVG;實際得到的是裝在 SVG 容器裡的合併後作品。

PSD 中的形狀圖層、智慧型物件與像素

迷思存成 .svg 就能讓任何設計可以無限縮放。

事實可縮放來自路徑。內含點陣圖的 SVG 超過像素尺寸後,會和 PNG 一樣變模糊。

迷思用 Photoshop 形狀繪製的標誌會自動轉成向量。

事實此工具會先合併圖層,所以形狀會變成像素。向量形狀必須另外匯出或描繪。

迷思智慧型物件會保留連結的向量內容。

事實置入的 Illustrator 檔案會依其在畫布上的顯示大小轉繪,再與其餘內容合併。

從 Photoshop 設計取得真正的向量路徑

如果標誌、圖示或字樣需要在任何尺寸下都保持清晰,你需要的是描繪。先用 PSD 轉 PNG 將 PSD 轉成透明 PNG,再交給圖片轉 SVG 轉換器,它會沿著邊緣產生真正的路徑。描繪適合純色和乾淨的輪廓;照片則會變成數千個細小的形狀。我們的教學PNG 轉 SVG 教學介紹了讓曲線保持平滑的設定。

如果原始向量圖存在於 Illustrator、Affinity Designer 或 Figma,請先索取該檔案,再考慮描繪合併後的複本。

PSD 轉 SVG 常見問題

Photoshop 的形狀圖層會變成可編輯的 SVG 路徑嗎?

這個轉換器無法做到。形狀圖層在 Photoshop 裡是向量,但 PSD 會先合併成一張點陣圖再寫入 SVG,因此所有圖層(包括形狀)都會變成像素。若要保留路徑,請從向量編輯軟體匯出形狀,或對結果進行描繪。

為什麼 SVG 檔案大小和同一設計的 PNG 差不多?

因為這個 SVG 其實大部分就是一張 PNG。點陣圖以編碼文字的形式存放在 SVG 內,檔案大小會多出約三分之一。真正的向量標誌只有幾 KB。

這個 SVG 可以送進 Cricut 或雷射切割機嗎?

可以匯入,但沒有可裁切的內容。割字機依路徑輪廓裁切,而包裹的點陣圖沒有路徑,所以 Design Space 和雷射軟體只會看到一張平面圖片。請用圖片轉 SVG 轉換器描繪標誌,取得裁切線。

Photoshop 文字圖層的文字在 SVG 裡還是文字嗎?

不行。文字圖層會連同字型一起轉繪並與其他內容合併,因此無法搜尋、選取或重新輸入文字。請在 SVG 編輯軟體中用相同字型重新建立可編輯的文字。

把點陣圖包進 SVG 什麼時候真的有用?

當系統要求副檔名必須是 .svg,但只是用來顯示檔案時,例如部分佈景主題建置工具和範本平台。在正式向量圖準備好之前,也可以先當作預留圖使用。

PSD 畫布越大,SVG 就越清晰嗎?

可以。SVG 會保留畫布尺寸,所以 4000 px 的 PSD 在較大的顯示尺寸下,會比 1000 px 的更清晰。超過原始尺寸後,內嵌圖片就和一般點陣圖一樣會變模糊。

Photoshop 檔案的其他轉換方式
PSD 轉 PNGPSD 轉 JPGPSD 轉 PDF
PNG 轉 SVGEPS 轉 SVG圖片轉 SVG