使用手冊 取消

匯出 SVG 檔案

搜尋
Animate

Animate

開啟應用程式
  1. Adobe Animate 使用手冊
  2. Animate 簡介
    1. Animate 的新功能
    2. 視覺詞彙
    3. Animate 系統需求
    4. Animate 鍵盤快速鍵
    5. 在 Animate 中使用多種檔案類型
  3. 動畫
    1. Animate 中的動畫基本概念
    2. 如何在 Animate 中使用影格及關鍵影格
    3. Animate 中的逐格動畫
    4. 如何在 Animate 中使用傳統補間動畫
    5. 筆刷工具
    6. 移動導引線
    7. 移動補間動畫與 ActionScript 3.0
    8. 關於移動補間動畫
    9. 移動補間動畫
    10. 建立移動補間動畫
    11. 使用屬性關鍵影格
    12. 使用補間動畫將位置製成動畫
    13. 如何使用移動編輯器編輯移動補間動畫
    14. 編輯補間動畫的移動路徑
    15. 操作移動補間動畫
    16. 新增自訂加/減速
    17. 建立和套用移動預設效果
    18. 設定動畫補間動畫範圍
    19. 使用儲存為 XML 檔案的移動補間動畫
    20. 移動補間動畫與傳統補間動畫
    21. 形狀補間動畫
    22. 在 Animate 中使用骨塊工具動畫
    23. 在 Animate 進行角色製作
    24. 如何在 Adobe Animate 中使用遮色片圖層
    25. 如何在 Animate 中使用場景
  4. 互動
    1. 如何使用 Animate 建立按鈕
    2. 將 Animate 專案轉換成其他文件類型格式
    3. 在 Animate 中建立及發佈 HTML5 Canvas 文件
    4. 在 Animate 中使用程式碼片段增加互動功能
    5. 建立自訂 HTML5 組件
    6. 在 HTML5 Canvas 中使用組件
    7. 建立自訂組件：範例
    8. 自訂組件的程式碼片段
    9. 最佳作法 - 使用 Animate 做廣告
    10. 虛擬實境編寫和發佈
  5. 工作區和工作流程
    1. 建立和管理繪圖筆刷
    2. 在 HTML5 Canvas 文件中使用 Google 字體
    3. 使用 Creative Cloud Libraries 和 Adobe Animate
    4. 使用 Animate 的舞台和工具面板
    5. Animate 工作流程和工作區
    6. 在 HTML5 Canvas 文件中使用網頁字體
    7. 時間軸與 ActionScript
    8. 使用多重時間軸
    9. 設定偏好設定
    10. 使用 Animate 編寫面板
    11. 使用 Animate 建立時間軸圖層
    12. 匯出適用於行動裝置應用程式和遊戲引擎的動畫
    13. 移動和複製物件
    14. 範本
    15. Animate 中的尋找和取代
    16. 還原、重做和操作記錄面板
    17. 鍵盤快速鍵
    18. 如何在 Animate 中使用時間軸
    19. 建立 HTML 擴充功能
    20. 影像和 GIF 動畫的最佳化選項
    21. 匯出影像和 GIF 的設定
    22. Animate 中的資源面板
  6. 多媒體和視訊
    1. 在 Animate 中變形及結合圖像物件
    2. 在 Animate 中建立並使用元件實體
    3. 影像描圖
    4. 如何在 Adobe Animate 中使用聲音
    5. 匯出 SVG 檔案
    6. 建立要在 Animate 中使用的視訊檔案
    7. 如何在 Animate 增加視訊
    8. 使用 Animate 繪製及建立物件
    9. 調整線條和形狀
    10. 使用 Animate CC 中的筆畫、填色和漸層
    11. 使用 Adobe Premiere Pro 和 After Effects
    12. Animate CC 中的色彩面板
    13. 使用 Animate 開啟 Flash CS6 檔案
    14. 在 Animate 中使用傳統文字
    15. 將圖案放入 Animate 中
    16. Animate 中匯入的點陣圖
    17. 3D 圖像
    18. 在 Animate 中使用元件
    19. 使用 Adobe Animate 繪製線條和形狀
    20. 使用 Animate 中的元件庫
    21. 匯出聲音
    22. 在 Animate CC 中選取物件
    23. 在 Animate 中使用 Illustrator AI 檔案
    24. 套用混合模式
    25. 排列物件
    26. 使用命令選單自動執行工作
    27. 多國語言文字
    28. 使用 Animate 中的攝影機
    29. 圖像濾鏡
    30. 聲音和 ActionScript
    31. 繪圖偏好設定
    32. 使用鋼筆工具繪圖
  7. 平台
    1. 將 Animate 專案轉換成其他文件類型格式
    2. 自訂平台支援
    3. 在 Animate 中建立及發佈 HTML5 Canvas 文件
    4. 建立並發佈 WebGL 文件
    5. 如何封裝 AIR for iOS 的應用程式
    6. 發佈 AIR for Android 應用程式
    7. Adobe AIR for Desktop 的發佈功能
    8. ActionScript 發佈設定
    9. 最佳作法 - 在應用程式中組織 ActionScript
    10. 如何搭配使用 ActionScript 與 Animate
    11. Animate 工作區中的輔助功能
    12. 撰寫和管理指令碼
    13. 啟用自訂平台的支援
    14. 自訂平台支援概觀
    15. 使用自訂平台支援外掛程式
    16. ActionScript 3.0 的除錯
    17. 啟用自訂平台的支援
  8. 匯出與發佈
    1. 如何從 Animate CC 匯出檔案
    2. OAM 發佈
    3. 匯出 SVG 檔案
    4. 使用 Animate 匯出圖像和視訊
    5. 發佈 AS3 文件
    6. 匯出適用於行動裝置應用程式和遊戲引擎的動畫
    7. 匯出聲音
    8. 最佳作法 - 建立行動裝置內容的秘訣
    9. 最佳作法 - 視訊慣例
    10. 最佳作法 - SWF 應用程式編寫原則
    11. 最佳作法 - 建構 FLA 檔
    12. 最佳化 Animate 的 FLA 檔案的最佳作法
    13. ActionScript 發佈設定
    14. 指定 Animate 的發佈設定
    15. 匯出放映檔
    16. 匯出影像和 GIF 動畫
    17. HTML 發佈範本
    18. 使用 Adobe Premiere Pro 和 After Effects
    19. 快速分享和發佈您的動畫
  9. 疑難排解
    1. 已修正問題
    2. 已知問題

 

何謂 SVG？

可縮放向量圖形 (SVG) 是一種描述二維影像的 XML 標記語言。SVG 檔案與解析度無關，並且不論是在網路上、列印中及行動裝置上，都能以壓縮格式提供 HiDPI 圖形。您可以使用 CSS 設定 SVG 的樣式，而且對指令碼和動畫的支援讓 SVG 成為網路平台不可或缺的一部分。

某些如 GIF、JPEG 和 PNG 等網路上常見的影像格式大小太大，而且通常屬於低解析度。SVG 格式可讓您以向量形狀、文字和濾鏡效果來描述影像，這種方式為您帶來的好處多更多。SVG 檔案會經過壓縮，並且在網路上及資源有限的手持裝置上，都能提供高品質的圖形。您可以在螢幕上放大 SVG 影像的檢視畫面，而不會減損其銳利度、細部或清晰度。此外，SVG 提供卓越的文字和色彩支援，可確保您所看到的影像與「舞台」上顯示的完全一樣。SVG 格式是完全以 XML 為基礎，並且提供許多優點給開發人員及其他使用者。

現在，您可以從 Animate 匯出 SVG 檔案，而不需建立任何不必要的定義或 ID。SVG 中的構圖已在 Animate 19.1 版本進行改良。這個匯出選項將會加強在 Character Animator 中匯入的 SVG 品質。

Animate 中的匯出 SVG 工作流程

Animate 可讓您匯出為 SVG 格式，版本 1.1。您可以使用 Animate 中提供的強大設計工具，建立視覺效果豐富的圖案，然後匯出為 SVG。

在 Animate 中，您可以從動畫中匯出選取的影格和關鍵影格。而且，由於匯出的圖案是向量，因此，即使縮放為不同大小，影像的解析度仍是高。

SVG 匯出功能會取代過去的 FXG 匯出 (已自 Animate 中丟棄 (2013 年 6 月))。您將會發現 SVG 匯出功能的表現及輸出品質更為出色。此外，與 FXG 相比，SVG 遺失的內容「最少」。

具有濾鏡效果的圖案

使用 SVG 時，濾鏡效果可能不會與 Animate 中顯示的完全一樣，因為 Animate 和 SVG 中提供的濾鏡沒有一對一的對應功能。不過，Animate 會搭配組合 SVG 內提供的不同基本濾鏡，以模擬類似的效果。

處理多個元件

SVG 匯出可以順暢地處理多個元件，而不會遺失任何內容。輸出幾乎接近 Animate 內「舞台」上的圖案。

以 SVG 格式匯出圖案

  1. 在 Animate 中，將播放磁頭拖曳或移動到適當的影格。
  2. 選取「檔案 > 匯出 > 匯出影像」。或者，選取「檔案 > 發佈設定」(選取「其他格式」區段中的「SVG 影像」選項)。
  3. 進入或瀏覽到您要儲存 SVG 檔案的位置。確定您選取 SVG 做為「另存新檔」類型。
  4. 按一下「確定」。
  5. 在「匯出 SVG」對話方塊中，選擇「嵌入」或「連結」至您的 SVG 檔案。
    • 包含隱藏圖層：匯出 Animate 文件中所有的隱藏圖層。取消選取「匯出隱藏圖層」可防止標記為隱藏的所有圖層 (包括以巢狀方式位於影片片段中的圖層) 匯出至產生的 SVG。這個選項可讓您透過隱藏圖層，輕鬆地測試不同版本的 Animate 文件。
    • 嵌入：在 SVG 檔案中嵌入點陣圖。如果您想要在 SVG 檔案內直接嵌入點陣圖，請使用這個選項。
    • 連結：提供點陣圖檔案的路徑連結。當您不想嵌入但想要提供 SVG 檔案中的點陣圖連結時，請使用這個選項。如果選取「將影像複製至資料夾」選項，點陣圖將會儲存在匯出 SVG 檔案所在位置建立的 images 資料夾內。若未選取「將影像複製至資料夾」選項，點陣圖將可從其原始來源位置中的 SVG 檔案參考。萬一點陣圖來源位置無法使用，則會嵌入 svg 檔案內。
    • 將影像複製至 /Images 資料夾：讓您可以將點陣圖複製到 /Images。/Images 資料夾 (如果尚未存在) 是建立在 SVG 的匯出位置。
    • Character Animator 最佳化：讓您匯出適用於 Character Animator 的 SVG。

  1. 按一下「確定」。

SVG 格式不支援某些 Animate 功能。使用這些功能所建立的內容會在匯出時遭到移除，或是預設為支援的功能。

或者，您也可以使用「發佈設定」對話方塊，從 Animate 內匯出 SVG 檔案 (「檔案 > 發佈設定」)。選取「其他格式」區段中的「SVG」選項，即可匯出 SVG 檔案。

建議您，只在具有最新更新的現代瀏覽器上檢視 SVG。這是因為有些圖像濾鏡和顏色效果可能無法在舊版瀏覽器正確顯示，例如 Internet Explorer 9。

與 Adobe Illustrator 交換 SVG 檔案

Animate 允許與 Adobe Illustrator 交換內容。這個工作流程取代了 Animate (13.0) 中捨棄的 FXG 匯出功能。您可以從 Animate 中匯出 SVG 檔案，然後在 Adobe Illustrator 內匯入檔案。如需有關在 Adobe Illustrator 內使用 SVG 檔案的詳細資訊，請參閱這個說明主題。

如果您想要對圖案進行細部編輯並加入豐富的細節，請使用這個工作流程。此外，您也可以使用 Illustrator 為圖案新增效果，例如陰影。

若要在 Adobe Illustrator 內編輯 SVG 檔案並在 Animate 中使用編輯過的內容，請執行下列動作：

  1. 在 Animate 中，匯出為 SVG。
  2. 使用 Adobe Illustrator 開啟 SVG 檔案，以編輯您的圖案。
  3. 將 SVG 檔案另存為 .ai 檔案，並在 Animate 中匯入。如需詳細資訊，請參閱在 Animate 中使用 Illustrator 檔案。

更快、更輕鬆地獲得協助

新的使用者？

快速連結

檢視您的所有計劃 管理您的計劃
檢視快速連結
隱藏快速連結

法律注意事項    |    線上隱私政策