使用手冊 取消

SVG

  1. Illustrator 使用手冊
  2. 認識 Illustrator
    1. Illustrator 簡介
      1. Illustrator 新增功能
      2. 常見問題
      3. Illustrator 系統需求
      4. 適用於 Apple Silicon 的 Illustrator
    2. 工作區
      1. 工作區基本介紹
      2. 建立文件
      3. 工具列
      4. 預設的鍵盤快速鍵
      5. 自訂鍵盤快速鍵
      6. 工作區域簡介
      7. 管理工作區域
      8. 自訂工作區
      9. 屬性面板
      10. 設定偏好設定
      11. 觸控工作區
      12. Illustrator 中的 Microsoft Surface Dial 支援
      13. 復原、還原、步驟記錄與自動化
      14. 旋轉檢視
      15. 尺標、格點和參考線
      16. Illustrator 協助工具
      17. 安全模式
      18. 檢視圖稿
      19. 搭配 Illustrator 使用 Touch Bar
      20. 檔案和範本
    3. Illustrator 中的工具
      1. 工具一覽
      2. 選取工具
        1. 選取範圍
        2. 直接選取
        3. 群組選取
        4. 魔術棒
        5. 套索
        6. 工作區域
      3. 導覽工具
        1. 手形
        2. 旋轉檢視
        3. 縮放顯示
      4. 上色工具
        1. 漸層
        2. 網格
        3. 形狀建立程式
      5. 文字工具
        1. 文字
        2. 路徑文字
        3. 垂直文字
      6. 繪圖工具
        1. 鋼筆
        2. 增加錨點
        3. 刪除錨點
        4. 錨點
        5. 曲線
        6. 線段區段
        7. 矩形
        8. 圓角矩形
        9. 橢圓
        10. 多邊形
        11. 星形
        12. 繪圖筆刷
        13. 點滴筆刷
        14. 鉛筆
        15. Shaper
        16. 切片
      7. 修改工具
        1. 旋轉
        2. 鏡射
        3. 縮放
        4. 傾斜
        5. 寬度
        6. 任意變形
        7. 滴管
        8. 漸變
        9. 橡皮擦
        10. 剪刀
  3. iPad 版 Illustrator
    1. iPad 版 Illustrator 簡介
      1. iPad 版 Illustrator 概觀
      2. iPad 版 Illustrator 常見問題集
      3. 系統需求 | iPad 版 Illustrator
      4. 在 iPad 版 Illustrator 上可以和不可以做的事
    2. 工作區
      1. iPad 版 Illustrator 工作區
      2. 觸控快捷鍵與手勢
      3. iPad 版 Illustrator 鍵盤快捷鍵
      4. 管理您的應用程式設定
    3. 文件
      1. 在 iPad 版 Illustrator 中處理文件
      2. 讀入 Photoshop 和 Fresco 文件
    4. 選取和排列物件
      1. 建立重複物件
      2. 建立漸變物件
    5. 繪圖
      1. 繪製及編輯路徑
      2. 繪製及編輯形狀
    6. 文字
      1. 使用類型和字體
      2. 沿路徑建立文字設計
      3. 新增自有字體
    7. 處理影像
      1. 將點陣影像向量化
    8. 顏色
      1. 套用顏色和漸層
  4. 雲端文件
    1. 基本概念
      1. 使用 Illustrator 雲端文件
      2. 共用 Illustrator 雲端文件和協作
      3. 升級 Adobe Illustrator 的雲端儲存空間
      4. Illustrator 雲端文件 | 常見問題
    2. 疑難排解
      1. 疑難排解 Illustrator 雲端文件的建立或儲存問題
      2. 疑難排解 Illustrator 雲端文件問題
  5. 新增並編輯內容
    1. 繪圖
      1. 繪圖基本介紹
      2. 編輯路徑
      3. 繪製像素級最佳化線條圖
      4. 使用筆型、曲線或鉛筆工具繪圖
      5. 繪製簡單線條和形狀
      6. 影像描圖
      7. 簡化路徑
      8. 定義透視格點
      9. 符號工具和符號組
      10. 調整路徑區段
      11. 以 5 個簡單步驟設計花朵
      12. 透視繪圖
      13. 符號
      14. 繪製網頁工作流程的像素對齊路徑
    2. 3D 效果和 Adobe Substance 素材
      1. 關於 Illustrator 的 3D 效果
      2. 製作 3D 圖形
      3. 將圖稿對應到 3D 物件
      4. 建立 3D 物件
      5. 建立 3D 文字
    3. 顏色
      1. 關於色彩
      2. 選取顏色
      3. 使用及建立色票
      4. 調整顏色
      5. 使用「Adobe Color 主題」面板
      6. 顏色群組 (調協)
      7. 顏色主題面板
      8. 重新上色您的圖稿
    4. 上色
      1. 關於上色
      2. 使用填色與筆畫上色
      3. 即時上色群組
      4. 漸層
      5. 筆刷
      6. 透明度和漸變模式
      7. 將筆畫套用至物件
      8. 建立和編輯圖樣
      9. 網格
      10. 圖樣
    5. 選取和排列物件
      1. 選取物件
      2. 圖層
      3. 群組和展開物件
      4. 移動、對齊和均分物件
      5. 堆疊物件    
      6. 鎖定、隱藏及刪除物件
      7. 複製物件
      8. 旋轉及鏡射物件
    6. 改變物件外框
      1. 裁切影像
      2. 將物件變形
      3. 組合物件
      4. 剪下、分割和剪裁物件
      5. 操控彎曲
      6. 縮放、傾斜及扭曲物件
      7. 建立漸變物件
      8. 使用封套改變外框
      9. 使用效果改變物件外框
      10. 使用 Shaper 和形狀建立程式工具建立形狀
      11. 使用即時轉角
      12. 增強型改變外框工作流程和觸控支援
      13. 編輯剪裁遮色片
      14. 即時形狀
      15. 使用「形狀建立程式」工具建立形狀
      16. 整體編輯
    7. 文字
      1. 新增文字並使用文字物件
      2. 建立項目符號和編號清單
      3. 管理文字區域
      4. 字體和印刷樣式
      5. 設定文字格式
      6. 讀入和匯出文字
      7. 格式化段落
      8. 特殊字元
      9. 建立路徑文字
      10. 字元與段落樣式
      11. 定位點
      12. 文字
      13. 尋找缺少的字體 (Typekit 工作流程)
      14. 更新來自 Illustrator 10 的文字
      15. 阿拉伯文和希伯來文文字
      16. 字體 | 常見問答和疑難排解提示
      17. 營造 3D 文字效果
      18. 創意印刷樣式設計
      19. 縮放與旋轉文字
      20. 行和字元間距
      21. 連字和分行符號
      22. 文字增強功能
      23. 拼字及語言字典
      24. 設定亞洲字元格式
      25. 亞洲撰寫程式字體
      26. 使用漸變物件建立文字設計
      27. 使用影像描圖建立文字海報
    8. 建立特效
      1. 使用效果
      2. 繪圖樣式
      3. 建立陰影
      4. 外觀屬性
      5. 建立素描和馬賽克
      6. 陰影、光暈和羽化
      7. 效果摘要
    9. 網頁圖形
      1. 建立網頁圖形的最佳作法
      2. 圖表
      3. SVG
      4. 建立動畫
      5. 切片和影像地圖
  6. 讀入、匯出及儲存
    1. 讀入
      1. 置入多個檔案
      2. 管理連結檔案和嵌入的檔案
      3. 連結資訊
      4. 取消嵌入影像
      5. 從 Photoshop 讀入圖稿
      6. 讀入點陣影像
      7. 讀入 Adobe PDF 檔案
      8. 讀入 EPS、DCS 及 AutoCAD 檔案
    2. Illustrator 中的 Creative Cloud 資料庫 
      1. Illustrator 中的 Creative Cloud Libraries
    3. 儲存
      1. 儲存圖稿
    4. 匯出
      1. 在 Photoshop 中使用 Illustrator 圖稿
      2. 匯出圖稿
      3. 以批次方式收集資產及匯出
      4. 封裝檔案
      5. 建立 Adobe PDF 檔案
      6. 摘取 Extract CSS | Illustrator CC
      7. Adobe PDF 選項
      8. 檔案資訊和中繼資料
  7. 列印
    1. 準備列印
      1. 設定列印的文件
      2. 變更頁面大小和方向
      3. 指定剪裁或對齊的裁切標記
      4. 開始使用大型畫布
    2. 列印
      1. 疊印
      2. 使用色彩管理進行列印
      3. PostScript 列印
      4. 列印預設集
      5. 印表機的標記和出血
      6. 列印和儲存透明圖稿
      7. 補漏白
      8. 分色列印
      9. 列印漸層、網格及色彩漸變
      10. 白色疊印
  8. 自動化工作
    1. 使用「變數」面板進行資料合併
    2. 以指令碼自動化
    3. 以動作自動化
  9. 疑難排解 
    1. 當機問題
    2. 當機後復原檔案
    3. 檔案問題
    4. 支援的檔案格式
    5. GPU 裝置驅動程式問題
    6. Wacom 裝置問題
    7. DLL 檔案問題
    8. 記憶體問題
    9. 偏好設定檔案問題
    10. 字體問題
    11. 印表機問題
    12. 與 Adobe 分享當機報告
    13. 改善 Illustrator 的效能

了解如何搭配 SVG 以使用 XML 和 JavaScript,藉此建立回應使用者動作的網頁圖形,並為圖形加上複雜效果,例如反白、工具提示、音效和動畫等。

關於 SVG

網頁用的點陣圖影像格式 (GIF、JPEG、WBMP 和 PNG) 是以像素格點的方式描繪影像。此格式所產生的檔案通常比較龐大,並且限於單一 (通常是低) 解析度,並且佔用大量的網路頻寬。但另一方面,SVG 則是以形狀、路徑、文字和濾鏡效果描繪影像的向量格式。這種格式所產生的檔案是壓縮式的,不論是在網路上、列印中,甚至是在資源有限的環境中,或是在手持裝置上,都能提供高品質的圖像。使用者可以在螢幕上放大 SVG 影像的檢視畫面,而不會減損其銳利度、細部或清晰度。此外,SVG 提供卓越的文字和色彩支援,可確保使用者所看到的影像與 Illustrator 工作區域上的顯示完全一樣。

SVG 格式是完全以 XML 為基礎,並且提供許多優點給開發人員及使用者。透過 SVG,您可以使用 XML 和 JavaScript,建立回應使用者動作的網頁圖形,並為圖形加上複雜效果,例如反白、工具提示、音效和動畫等。

您可以 使用 「儲存」、「另存新檔」、「儲存拷貝」或「儲存為網頁及裝置用」指令,以 SVG 格式儲存圖稿。若要存取完整的一組 SVG 轉存選項,請使用「儲存」、「另存新檔」或「儲存拷貝」指令。「儲存為網頁及裝置用」指令提供 SVG 轉存選項的子集,適用於網頁導向作品

您在 Illustrator 中設定圖稿的方式,將會影響所產生的 SVG 檔案。請牢記下列準則:

  • 使用圖層將結構加入 SVG 檔案中。當您將圖稿存成 SVG 格式時,每一個圖層都會轉換成群組 (<g>) 元素(例如,名為 Button1 的圖層將在 SVG 檔案中變成 <g id="Button1_ver3.0">)。巢狀圖層會變成 SVG 巢狀群組,而隱藏的圖層則保留,並且其 SVG 樣式內容仍維持為「display="none"」。

  • 如果要讓不同圖層中的物件顯示為透明,請調整各物件的不透明度,而不是調整各圖層的不透明度。如果在圖層層級變更不透明度,則所產生的 SVG 檔案將無法以 Illustrator 中的透明度顯示。

  • 點陣資料無法在 SVG 檢視器中縮放,也無法像其他 SVG 元素般編輯。請盡可能避免建立將點陣化為 SVG 檔案的圖稿。漸層網格和使用「點陣化」、「藝術風」、「模糊」、「筆觸」、「扭曲」、「像素」、「銳利化」、「素描」、「風格化」、「紋理」和「視訊」效果的物件,將在存成 SVG 格式時點陣化。包含這些效果的圖形樣式也同樣會產生點陣化。使用 SVG 效果加入圖形效果不會產生點陣化。

  • 在圖稿中使用符號並簡化路徑,可改善 SVG 效能。如果效能為您的優先考量,也請避免使用會產生大量路徑資料的筆刷,如「炭筆」、「灰燼」、和「捲軸筆」。

  • 使用切片、影像地圖和指令碼,將網頁連結加入 SVG 檔案中。

  • 指令語言 (如 JavaScript) 可在 SVG 檔案中開啟無限的功能。移動指標和鍵盤可以呼叫指令功能,如滑鼠指向效果。指令檔也可以使用「文件物件模型」(Document Object Model,DOM) 來存取和修改 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 檔案。您可以修改現有的濾鏡定義、刪除濾鏡定義,並新增濾鏡定義。

  1. 選取物件或群組 (或在「圖層」面板中指定圖層為目標)。
  2. 執行下列任一操作:
    • 若要以濾鏡預設設定套用效果,請從「效果 > SVG 濾鏡」子選單的底部區段選取效果。

    • 若要以自訂設定套用效果,則請選擇「效果 > SVG 濾鏡 > 套用 SVG 濾鏡」。在對話框中,選取效果,然後按一下「編輯 SVG 濾鏡」 按鈕  。 編輯預設代碼,然後按一下「確定」

    • 若要建立和套用新效果,請選擇「效果 > SVG 濾鏡 > 套用 SVG 濾鏡」。在對話框中,按一下「新增 SVG 濾鏡」 按鈕  , 輸入新的代碼,並按一下「確定」

      當您套用 SVG 濾鏡效果時,Illustrator 會在畫板上顯示該效果的點陣化版本。您可以透過修改文件的點陣化解析度設定,控制此預視影像的解析度。

      注意:當物件使用多種效果時,SVG 效果必須是最後一個效果,也就是說,它必須顯示在「外觀」面板的底部 (「透明度」項目的上方)。若 SVG 效果之後還有其他效果,SVG 輸出將由點陣物件組成。

從 SVG 檔案讀入效果

  1. 選擇「效果 > SVG 濾鏡 > 讀入 SVG 濾鏡」

  2. 選取要從中讀入效果的 SVG 檔案,然後按一下「開啟」

SVG 互動面板概觀

將圖稿轉存供網頁瀏覽器檢視時,可以使用「SVG 互動」面板 (「視窗 > SVG 互動」) 為圖稿增加互動功能。例如,您可以建立觸發 JavaScript 指令的事件,在使用者執行將滑鼠游標移過物件之類動作時,在網頁上迅速移動。「SVG 互動」面板也可以讓您看到與目前檔案相關的所有事件和 JavaScript 檔案。

從 SVG 互動面板刪除事件

  • 若要刪除一個事件,請選取該事件,然後按一下「刪除」按鈕,或從面板選單選擇「刪除事件」
  • 若要刪除所有事件,請從面板選單中選擇「清除事件」

列出、增加或移除連結至檔案的事件

  1. 按一下「連結 JavaScript 檔案」按鈕
  2. 在「JavaScript 檔案」對話框中,選取 JavaScript 項目,然後執行下列任一項:
    • 按一下「增加」,瀏覽其他 JavaScript 檔案。

    • 按一下「移除」,移除所選取的 JavaScript 項目。

在圖稿中增加 SVG 互動

  1. 在「SVG 互動」面板中選取事件。(請參閱 SVG 事件)。

  2. 輸入對應的 JavaScript,然後按「輸入」。

SVG 事件

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」) 選項。新的工作流程能讓您針對您的網頁和畫面設計專案產生標準化、網頁最佳化的 SVG 檔案。

可用選項如下:

  • 樣式:選擇視覺樣式資訊儲存在 SVG 標註中的方式。
    • 簡報屬性:在每一個 SVG 標籤上,為個別樣式內容使用不同 XML 屬性。您必須使用此格式,才能在 Android Studio 中使用 SVG 資產。
    • 內部 CSS:在 CSS 類別中使用單一 `<style>` 標籤,使樣式相同的物件擁有同樣的樣式設定。這麼做可能會導致檔案縮小。
    • 內嵌樣式:根據 SVG 標籤使用單一「樣式」屬性,其中包含 CSS 語法中所有標籤的樣式屬性。

注意:SVG 的預設樣式設為「簡報屬性」,原因在於這可以改善與 Android Studio 等常見開發人員工具的相容性。

  • 字體。選擇字體在 SVG 檔案中顯示的方式。外框會保留路徑的定義 , 且大多相容。
  • 影像:如果想將要儲存的影像嵌入文件或文件外部連結的檔案中,可選擇此選項。
  • 物件 ID:選擇將 ID 類型 (名稱) 指定至 SVG 檔案中物件的方式。選擇「圖層名稱」、「最基本」或「唯一」。此選項將決定系統將如何處理重複的物件名稱,以及如何在轉存的 CSS 中命名物件。
  • 小數:選擇您要保留多少有關物件位置精確度的資訊。小數的値越高將會提高物件呈現的精確度,這會提升演算 SVG 逼真的視覺效果。然而,小數值增加,也會增加轉存 SVG 結果的檔案大小。
  • 縮小:移除空的群組及空格可將 SVG 的檔案大小最佳化。選擇此選項也會使 SVG 產生程式碼的不易解讀。
  • 回應式。請檢查此選項,以確保 SVG 在瀏覽器中產生縮放。尚未寫入任何絕對尺寸值。
  • 顯示程式碼:在預設文字編輯器中開啟轉存內容。
  • 在瀏覽器中 顯示 (圖示):在預設的網頁瀏覽器中顯示影像。
Adobe 標誌

登入您的帳戶