Photoshop 怎麼存 SVG？專業指南與步驟解析

Photoshop 雖然主要以像素為基礎，但也能夠透過特定方法將向量圖形以 SVG（Scalable Vector Graphics）格式儲存。 SVG 是一種基於 XML 的向量影像格式，允許圖像以無限解析度縮放而不失真，非常適合用於網頁設計、圖示製作及標誌設計。

為什麼要在 Photoshop 中儲存 SVG？

儘管 Illustrator 是 Adobe 專為向量設計開發的軟體，許多使用者習慣在 Photoshop 中進行影像編輯或繪製，希望將這些成果轉換為 SVG 格式。這樣做的好處包括：

• 可無限縮放： SVG 檔案可以任意放大或縮小，圖像邊緣始終保持清晰銳利，不像點陣圖（如 JPEG, PNG）在放大後會出現像素化。
• 檔案較小： 對於簡單的圖形和圖示，SVG 檔案通常比點陣圖檔案小，有助於網頁載入速度。
• 可編輯性： SVG 檔案可以用文字編輯器打開，直接修改其 XML 結構，或者在支援 SVG 的設計軟體中進行進一步編輯。
• 網頁兼容性： SVG 是網頁標準，瀏覽器原生支援，無需插件即可顯示。
• SEO 友好： SVG 內容是文本，搜索引擎可以讀取和索引，有助於提升網頁的 SEO 表現。

Photoshop 匯出 SVG 的主要方法

Photoshop 本身並沒有直接的「另存為 SVG」選項，但可以透過以下兩種主要方法來實現：

方法一：使用「匯出為」功能（適用於較新版本的 Photoshop）

從 Photoshop CC 2018 開始，Adobe 加入了更完善的 SVG 匯出功能，讓操作變得更加直觀。

1. 準備您的圖稿： 確保您的圖稿是向量圖層，或者至少是您希望轉換為向量的部分。如果您繪製的是像素畫，它將被栅格化（rasterized）並轉換為點陣圖 SVG，這並非 SVG 的最佳應用場景。對於純向量圖形，建議使用鋼筆工具（Pen Tool）繪製，或者將現有的向量形狀圖層（Shape Layers）匯出。
2. 選擇要匯出的圖層或畫板：
   • 如果您想匯出單個向量圖層，請選中該圖層。
   • 如果您想匯出整個畫板（Artboard）或多個圖層組，請確保它們已經組織好。
3. 執行匯出操作：
   • 前往選單列，點擊「檔案」（File）>「匯出」（Export）>「匯出為...」（Export As...）。
   • 在彈出的「匯出為」對話框中，找到「格式」（Format）選項。
   • 從下拉選單中選擇「SVG」。
4. 設定 SVG 選項： 選擇 SVG 後，您可能會看到一些額外的選項：
   • CSS 屬性（CSS Properties）： 這裡通常有兩種選項：「與 Photoshop 相同」（Presentation Attributes）或「樣式屬性」（Style Attributes）。
     • 與 Photoshop 相同（Presentation Attributes）： 這是較傳統的 SVG 匯出方式，將樣式直接應用於 SVG 元素本身。對於簡單的圖形，這通常是個不錯的選擇。
     • 樣式屬性（Style Attributes）： 這種方式會將樣式定義在獨立的 CSS 區塊中，更符合網頁開發的習慣，也更容易管理。

     一般情況下，推薦選擇「樣式屬性」，以便於後續的網頁開發與修改。

   • 字體（Font Sublime）： 您可以選擇將字體嵌入（Embed）到 SVG 中，或者轉換為輪廓（Convert to Outline）。如果您的 SVG 會在多個裝置上顯示，且不確定使用者是否安裝了您的字體，建議選擇「轉換為輪廓」。這樣，文字將會被轉換成向量路徑，保證在任何地方顯示都一致，但同時也喪失了文字的可搜尋性和可選性。
   • 影像（Images）： 如果您的圖稿中包含點陣圖元素，這裡會有選項決定如何處理它們。對於純向量圖稿，此選項影響不大。
   • 回應式（Responsive）： 勾選此選項可以讓 SVG 具有響應式佈局特性，能自動適應其容器的大小。
5. 匯出檔案： 設定好所有選項後，點擊「匯出畫板」（Export Artboard）或「匯出」（Export）按鈕。選擇您要儲存 SVG 檔案的位置，然後點擊「儲存」（Save）。

方法二：將圖層轉換為智慧物件後匯出（適用於較舊版本的 Photoshop 或特定需求）

在較舊版本的 Photoshop 中，或當您希望更精確地控制向量內容時，可以先將圖層轉換為智慧物件（Smart Object），然後再匯出。

1. 準備向量圖層： 創建或導入您的向量圖形，確保它們位於單獨的圖層上。使用鋼筆工具繪製的形狀圖層（Shape Layers）或文字圖層（Type Layers）是最佳的來源。
2. 將圖層轉換為智慧物件：
   • 在圖層面板中，右鍵點擊您要匯出的向量圖層。
   • 選擇「轉換為智慧物件」（Convert to Smart Object）。

   這樣做的好處是，即使圖層包含向量數據，Photoshop 也能將其保留為可編輯的智慧物件，並且在匯出時可以更靈活地處理。

3. 匯出智慧物件：
   • 再次前往選單列，點擊「檔案」（File）>「匯出」（Export）>「匯出為...」（Export As...）。
   • 在「匯出為」對話框中，找到「格式」（Format）選項。
   • 從下拉選單中選擇「SVG」。

   此時，您會看到與方法一類似的 SVG 選項，請根據您的需求進行設定。對於智慧物件，Photoshop 會嘗試將其內容提取並轉換為 SVG 向量數據。

4. 儲存檔案： 設定完畢後，點擊「匯出」並選擇儲存位置。

注意事項與進階技巧

在 Photoshop 中儲存 SVG 時，有幾個重要的注意事項和進階技巧可以幫助您獲得更好的結果：

• 向量圖層是關鍵： 始終記住，SVG 是向量格式。Photoshop 的強項在於像素編輯，因此，為了獲得真正意義上的 SVG，您的圖稿最好是使用 Photoshop 的向量工具（如鋼筆工具、形狀工具）創建的向量圖層。如果您嘗試匯出一個像素化的圖層，它將被栅格化，然後以點陣圖的形式嵌入到 SVG 中，這會喪失 SVG 的主要優勢。
• 清理圖層結構： 在匯出之前，花點時間整理您的圖層。移除不必要的圖層、將相關圖層合併或分組，可以讓導出的 SVG 結構更清晰，更容易在其他軟體中編輯。
• 避免複雜效果： Photoshop 中的一些複雜圖層效果（如陰影、光澤、濾鏡等）在轉換為 SVG 時可能會出現問題，或者導致 SVG 檔案變得非常龐大且難以編輯。盡量使用簡單的顏色、漸變和輪廓來構建您的向量圖形。
• 文字的可編輯性： 如前所述，如果您希望 SVG 中的文字在網頁上可以被搜尋、複製或修改，請確保在匯出時選擇「保留文字」（如果 Photoshop 提供此選項）或在其他向量編輯軟體（如 Illustrator）中處理。如果將文字轉換為輪廓，它就變成了路徑，失去了文字的特性。
• 檢查 SVG 尺寸： 在匯出 SVG 後，最好在瀏覽器或向量編輯軟體中打開檢查其尺寸和渲染效果。有時，Photoshop 的匯出設定可能會與您的預期略有差異。
• 使用 Illustrator 進行後續編輯： 如果您的圖稿比較複雜，或者您需要對 SVG 進行更精確的向量編輯，強烈建議在 Photoshop 中完成基本設計後，將其匯出為 SVG，然後在 Adobe Illustrator 中打開進行進一步的優化和編輯。Illustrator 在向量處理方面擁有更專業的功能。
• Inkscape 是免費替代方案： 如果您沒有 Illustrator，Inkscape 是一個功能強大的免費開源向量圖形編輯軟體，同樣支援 SVG 格式，並且可以很好地編輯從 Photoshop 匯出的 SVG 檔案。

總結

雖然 Photoshop 不是專門的向量編輯軟體，但透過「匯出為 SVG」功能，您可以有效地將 Photoshop 中的向量圖稿轉換為 SVG 格式。掌握正確的步驟和注意事項，能夠幫助您創建出高質量的、可擴展的向量圖形，為您的網頁設計和數位專案增添更多靈活性和專業性。

請記住，關鍵在於使用 Photoshop 的向量工具來創建您的圖稿，並在匯出時仔細檢查相關選項，以確保獲得最佳的 SVG 檔案。