何謂 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 CC 中的匯出 SVG 工作流程

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

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

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

具有濾鏡效果的圖案

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

處理多個元件

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

以 SVG 格式匯出圖案

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

註解:

SVG 格式不支援某些 Animate 功能。使用這些功能所建立的內容會在匯出時遭到移除,或是預設為支援的功能。如需詳細資訊,請參閱這篇文章

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

註解:

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

與 Adobe Illustrator 交換 SVG 檔案

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

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

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

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

此産品由 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 授權  Creative Commons 條款未涵蓋 Twitter™ 與 Facebook 文章。

法律說明   |   線上隱私權政策