在您的圖形設計完成之後，於 Adobe Illustrator 中選取「檔案 > 另存新檔」。
上次更新時間
Apr 29, 2021 02:40:06 PM GMT
瞭解如何在 Adobe Muse 中置入、拷貝或讀入 SVG 圖形。
註解：
Adobe Muse 不再增加新功能，並將於 2020 年 3 月 26 日停止支援。如需詳細資訊和協助，請參閱 Adobe Muse 終止服務常見問題集。
Adobe Muse 能讓您在網站設計中使用透過創作工具 (如 Adobe Illustrator) 所製作的向量圖形。目前，Adobe Muse 可原生支援可縮放向量圖形 (SVG) 格式。您可以使用 SVG 格式來建立標誌、圖示、背景填色、瀏覽器填色等等，並直接將其置入 Adobe Muse 的網頁畫布上。
以 SVG 格式儲存的圖形尺寸相當小且不受解析度影響。因此，這類圖形可以縮放為任意尺寸而不影響頁面載入時間和網站的外觀。高 DPI 顯示器也支援 SVG 檔案。
由於 SVG 檔案不受解析度影響，因此 Adobe Muse 能在標準和高解析度網站中以相同的方式處理 SVG 檔案。在「設計」視圖中將 SVG 檔案置入網頁畫布時，該檔案並不會縮放至原尺寸的 50%。
Adobe Illustrator 的 SVG 設定
若是使用 Adobe Illustrator 所建立的 SVG 檔案，請執行下列操作：
-
-
選取「另存新檔類型」下拉式清單中的「SVG」。瀏覽至您要儲存檔案的位置，接著按一下「儲存」。
-
在 SVG 選項對話框上，設定下列屬性：
- 影像位置：嵌入
- SVG 設定檔：SVG 1.1
- 字體 - 類型：轉換為外框
- CSS 屬性：呈現屬性
- 小數位數：3
- 編碼：Unicode (UTF-8)
- 影像位置：嵌入
-
按一下「確定」儲存檔案。
讀入 SVG
在您將 SVG 檔案讀入並置入 Adobe Muse 之前，請先確定您已遵循此文章中的步驟操作：準備要在 Adobe Muse 中置入的 SVG 檔案。
-
在 Adobe Muse 中，選取「檔案 > 置入」 (在 Windows 上按 Ctrl + D，在 Mac 上按 Cmd + D)。
-
瀏覽至 SVG 檔案的位置，選取該檔案，並按一下「開啟」。
-
在 Adobe Muse 中，滑鼠游標旁會顯示此 SVG 的縮圖預視。在網頁畫布上合適的位置按一下，以置入此 SVG 檔案。「資源」面板會列出您置入的檔案。
SVG 檔案置入之後，您就可以繼續設計您的網站。您無法使用裁切工具來裁切 SVG 影像。然而，您可以重新調整其尺寸至符合您的設計需求。
您可將讀入的 SVG 檔案連結到點陣影像。您也可將讀入的影像重新連結到 SVG 檔案。
從 Adobe Illustrator 拷貝 SVG
Adobe Muse 允許您從 Adobe Illustrator 拷貝內容到網頁畫布上。當您不想在網站設計中儲存並使用圖稿的完整內容時，拷貝內容就變得相當有用。
當您拷貝部份圖稿時，Illustrator 會將所選部份轉換為 SVG 並將其放置在剪貼簿中供 Adobe Muse 使用。Adobe Muse 會將拷貝的內容視為嵌入的 SVG，您可以根據設計需求重新調整圖形的尺寸大小。
-
在 Adobe Illustrator 中，請執行下列任一項作業：
- 分離群組或選取的路徑：在您要拷貝的群組或路徑上按下滑鼠右鍵，並從環境選單中選取「分離群組/選取的路徑」。
- 手動選取群組或路徑：選取您要拷貝的群組或路徑。
-
使用 Ctrl + C (Windows) 或 Cmd + C (Mac) 命令來拷貝選取的群組或路徑。
-
在 Adobe Muse 中，使用 Ctrl + V 或 Cmd +V 命令，將選取的群組或路徑貼到「設計」視圖中的網頁畫布上。
「資源面板」現在會列出已貼上的 SVG 檔案。
讀入 SVG 做為背景填色或瀏覽器填色
-
視您是要新增背景填色或瀏覽器填色而定，分別選取「填色」或「瀏覽器填色」。如需詳細資訊，請參閱使用填色與瀏覽器填色選項。
-
按一下「新增影像」。瀏覽至 SVG 檔案的位置，選取該檔案，並按一下「開啟」。
-
適當地設定「符合」與「位置」屬性。
註解：
當您將 SVG 檔案加入至背景或瀏覽器填色，且「符合」屬性設為「縮放以符合」或「縮放以填滿」時，「設計」視圖中的影像看起來會像是點陣化的影像。不過，在 Adobe Muse 內或瀏覽器上預視時，影像會以預期的效果呈現。
視訊教學課程
登入您的帳戶