選取物件或群組 (或在「圖層」面板中指定圖層為目標)。
上次更新時間
2023年10月25日
- Illustrator 使用手冊
- 認識 Illustrator
- Illustrator 簡介
- 工作區
- Illustrator 中的工具
- 生成式 AI (在中國大陸無法使用)
- 快速動作
- 網頁版 Illustrator (Beta)
- iPad 版 Illustrator
- iPad 版 Illustrator 簡介
- 工作區
- 文件
- 選取和排列物件
- 繪圖
- 文字
- 處理影像
- 顏色
- 雲端文件
- 新增並編輯內容
- 繪圖
- 測量
- 3D 物件和素材
- 顏色
- 上色
- 選取和排列物件
- 改變物件外框
- 文字
- 建立特效
- 網頁圖形
- 讀入、轉存及儲存
- 讀入
- Illustrator 中的 Creative Cloud Libraries
- 儲存和轉存
- 列印
- 自動化工作
- 疑難排解
了解如何搭配 SVG 以使用 XML 和 JavaScript，藉此建立回應使用者動作的網頁圖形，並為圖形加上複雜效果，例如反白、工具提示、音效和動畫等。
關於 SVG
SVG 是以形狀、路徑、文字和濾鏡效果來描繪影像的向量格式。產生的檔案非常精簡，可以在網頁、印刷甚至資源受限的手持裝置上提供高品質的圖形，不同於 GIF、JPEG、WBMP 和 PNG 這類大型檔案。使用者可以在螢幕上放大 SVG 影像的檢視畫面，而不會減損其銳利度、細部或清晰度。此外，SVG 提供卓越的文字和色彩支援，可確保使用者所看到的影像與 Illustrator 工作區域上的顯示完全一樣。
SVG 格式是完全以 XML 為基礎，並且提供許多優點給開發人員及使用者。
您可以使用「儲存」、「另存新檔」、「儲存拷貝」或儲存為網頁及裝置用等指令，以 SVG 格式儲存圖稿。若要存取完整的一組 SVG 匯出選項，請使用「儲存」、「另存新檔」或「儲存拷貝」指令。「儲存為網頁及裝置用」指令會提供 SVG 匯出選項的子集，適用於網頁導向作品。
套用 SVG 效果
您可以使用 SVG 效果加入圖形屬性，例如在圖稿中製作陰影。SVG 效果與點陣圖對應項目之間的差別是：SVG 效果是以 XML 為基礎，與解析度無關。其實 SVG 效果只是一系列描述各種數學運算的 XML 屬性。最後產生的效果是呈現在目標物件，而不在來源圖形上。
Illustrator 提供一組預設的 SVG 效果。您可以用含預設屬性的效果編輯 XML 程式碼，以產生自訂效果，或編寫新的 SVG 效果。
註解：
若要修改 Illustrator 的預設 SVG 濾鏡，請使用文字編輯器，以編輯 Documents and Settings/<userdir>/Application Data/Adobe/Adobe Illustrator <版本編號> Settings/<location> 檔案夾中的 Adobe SVG 濾鏡. svg 檔案。您可以修改現有的濾鏡定義、刪除濾鏡定義，並新增濾鏡定義。
-
-
若要套用效果，請執行下列其中一項作業：
使用預設設定
移至「效果 > SVG 濾鏡 > 套用 SVG 濾鏡」。
使用自訂設定
-
移至「效果 > SVG 濾鏡 > 套用 SVG 濾鏡」。
-
在對話框中，選取效果，然後選取「編輯 SVG 濾鏡」。編輯預設代碼，然後選取「確定」。
建立並套用新效果
-
移至「效果 > SVG 濾鏡 > 套用 SVG 濾鏡」。
-
在對話框中，選取效果，然後選取「新 SVG 濾鏡」。輸入新的代碼，然後選取「確定」。
-
當您套用 SVG 濾鏡效果時，Illustrator 會在畫板上顯示該效果的點陣化版本。您可以透過修改文件的點陣化解析度設定，控制此預視影像的解析度。
註解：
當物件使用多種效果時，SVG 效果必須是最後一個效果，也就是說，SVG 效果必須顯示在「外觀」面板的底部 (「透明度」項目的正上方)。若 SVG 效果之後還有其他效果，SVG 輸出將由點陣物件組成。
從 SVG 檔案讀入效果
-
選擇「效果 > SVG 濾鏡 > 讀入 SVG 濾鏡」。
-
選取要從中讀入效果的 SVG 檔案，然後選取「開啟」。
SVG 互動面板概觀
「SVG 互動」面板可以讓您看到與目前檔案相關的所有事件和 JavaScript 檔案。
將圖稿匯出供網頁瀏覽器檢視時，可以使用「SVG 互動」面板 (視窗 > SVG 互動) 為圖稿增加互動功能。例如，您可以建立觸發 JavaScript 指令的事件，在使用者執行將滑鼠游標移過物件之類動作時，在網頁上迅速移動。
從 SVG 互動面板刪除事件
您可以使用「SVG 互動」面板刪除一個或所有事件。
若要刪除一個事件
- 選取事件並選取「移除所選項目」。
若要刪除所有事件
- 從面板選單中選取「清除事件」。
列出、增加或移除連結至檔案的事件
選取「連結 JavaScript 檔案」並選取「新增」以新增其他 JavaScript 檔案，若要刪除所選 JavaScript 項目，請選取「移除」。
在圖稿中增加 SVG 互動
-
在「SVG 互動」面板中選取「事件」。(請參閱 SVG 事件)。
-
輸入對應的 JavaScript，然後按 Enter 鍵。
onfocusin
在元素獲得焦點時觸發動作，例如指標選取動作。
onfocusout
在元素失去焦點時觸發動作 (通常是另一個元素獲得焦點時)。
onactivate
以滑鼠按一下或按鍵觸發動作，依 SVG 元素而定。
onmousedown
在元素上方按下滑鼠按鈕時觸發動作。
onmouseup
在元素上方釋放滑鼠按鈕時觸發動作。
onclick
在元素上方點選滑鼠按鈕時觸發動作。
onmouseover
在指標移至元素上方時觸發動作。
onmousemove
在指標置於元素上方時觸發動作。
onmouseout
從元素移開指標時觸發動作。
onkeydown
按下按鍵時觸發動作。
onkeypress
按下按鍵時觸發動作。
onkeyup
釋放按鍵時觸發動作。
onload
瀏覽器已將 SVG 文件完全剖析之後觸發動作。使用這個事件只能呼叫一次初始化功能。
onerror
在元素未正確載入或發生其他錯誤時觸發動作。
onabort
在網頁未完全載入元素之前停止載入時觸發動作。
onunload
在 SVG 文件自視窗或影格中移除時觸發動作。
onzoom
在文件的縮放顯示層級變更時觸發動作。
onresize
在調整文件檢視大小時觸發動作。
onscroll
在文件捲動或平移時觸發動作。
建立 SVG 檔案的技巧
使用圖層將結構加入 SVG 檔案中。當您以 SVG 格式儲存圖稿時，每個圖層都會轉換為群組 (<g>) 元素。(例如，名為 Button1 的圖層將在 SVG 檔案中變成 <g id="Button1_ver3.0">。) 巢狀圖層會變成 SVG 巢狀群組，而隱藏的圖層則保留，並且其 SVG 樣式內容仍維持為「display="none"」。
如果要讓不同圖層中的物件顯示為透明，請調整各物件的不透明度，而不是調整各圖層的不透明度。
點陣資料無法在 SVG 檢視器中縮放，也無法像其他 SVG 元素般編輯。您可以避免建立將點陣化為 SVG 檔案的圖稿。使用 SVG 效果加入圖形效果不會產生點陣化。
在圖稿中使用符號並簡化路徑，可改善 SVG 效能。如果效能為您的優先考量，也請避免使用會產生大量路徑資料的筆刷，如「炭筆」、「灰燼」、和「捲軸筆」。
使用切片、影像地圖和指令碼，將網頁連結加入 SVG 檔案中。
指令語言 (如 JavaScript) 可在 SVG 檔案中開啟無限的功能。移動指標和鍵盤可以呼叫指令功能，如滑鼠指向效果。
針對網頁最佳化的 SVG 匯出選項
有新的 SVG 匯出 (「檔案 > 匯出 > 另匯出為 > SVG」) 選項可使用。新的工作流程能讓您針對您的網頁和畫面設計專案產生標準化、網頁最佳化的 SVG 檔案。如需詳細資訊，請參閱 SVG 匯出選項。
相關資源
聯繫我們
如果您想提出問題或分享心得，請加入並參與 Adobe Illustrator 社群。我們很樂意聆聽您的意見。