SVG

  1. Illustrator 使用手冊
  2. 認識 Illustrator
    1. Illustrator 簡介
      1. Illustrator 新增功能
      2. 常見問題
      3. Illustrator 系統需求
      4. 適用於 Apple Silicon 的 Illustrator
    2. 工作區
      1. 工作區基本介紹
      2. 建立文件
      3. 工具預設鍵盤快捷鍵 | Illustrator
      4. 自訂鍵盤快速鍵
      5. 工作區域
      6. 自訂工作區
      7. 屬性面板
      8. 工具收藏館
      9. 設定偏好設定
      10. 觸控工作區
      11. Illustrator 中的 Microsoft Surface Dial 支援
      12. 復原、還原與自動化
      13. 旋轉檢視
      14. 尺標、格點和參考線
      15. Illustrator 協助工具
      16. 安全模式
      17. 檢視圖稿
      18. 搭配 Illustrator 使用 Touch Bar
      19. 檔案和範本
      20. 使用 Adobe Creative Cloud 進行同步設定
  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. Documents
      1. 在 iPad 版 Illustrator 中處理文件
      2. 讀入 Photoshop 和 Fresco 文件
    4. 選取和排列物件
      1. 建立重複物件
    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. 建立 3D 物件
      10. 符號工具和符號組
      11. 調整路徑區段
      12. 以 5 個簡單步驟設計花朵
      13. 透視繪圖
      14. 符號
      15. 繪製網頁工作流程的像素對齊路徑
    2. 顏色
      1. 關於色彩
      2. 選取顏色
      3. 使用及建立色票
      4. 調整顏色
      5. 使用「Adobe Color 主題」面板
      6. 顏色群組 (調協)
      7. 顏色主題面板
      8. 重新上色您的圖稿
    3. 上色
      1. 關於上色
      2. 使用填色與筆畫上色
      3. 即時上色群組
      4. 漸層
      5. 筆刷
      6. 透明度和漸變模式
      7. 將筆畫套用至物件
      8. 建立和編輯圖樣
      9. 網格
      10. 圖樣
    4. 選取和排列物件
      1. 選取物件
      2. 圖層
      3. 群組和展開物件
      4. 移動、對齊和均分物件
      5. 堆疊物件    
      6. 鎖定、隱藏及刪除物件
      7. 複製物件
      8. 旋轉及鏡射物件
    5. 改變物件外框
      1. 裁切影像
      2. 將物件變形
      3. 組合物件
      4. 剪下、分割和剪裁物件
      5. 操控彎曲
      6. 縮放、傾斜及扭曲物件
      7. 漸變物件
      8. 使用封套改變外框
      9. 使用效果改變物件外框
      10. 使用 Shaper 和形狀建立程式工具建立形狀
      11. 使用即時轉角
      12. 增強型改變外框工作流程和觸控支援
      13. 編輯剪裁遮色片
      14. 即時形狀
      15. 使用「形狀建立程式」工具建立形狀
      16. 整體編輯
    6. 文字
      1. 建立文字
      2. 字體和印刷樣式
      3. 設定文字格式
      4. 讀入和轉存文字
      5. 格式化段落
      6. 特殊字元
      7. 建立路徑文字
      8. 字元與段落樣式
      9. 定位點
      10. 文字
      11. 尋找遺失字體 (Typekit 工作流程)
      12. 更新來自 Illustrator 10 的文字
      13. 阿拉伯文和希伯來文文字
      14. 字體 | 常見問答和疑難排解提示
      15. 營造 3D 文字效果
      16. 創意印刷樣式設計
      17. 縮放與旋轉文字
      18. 行和字元間距
      19. 連字和分行符號
      20. 文字增強功能
      21. 拼字及語言字典
      22. 設定亞洲字元格式
      23. 亞洲撰寫程式字體
      24. 使用漸變物件建立文字設計
      25. 使用影像描圖建立文字海報
    7. 建立特效
      1. 使用效果
      2. 繪圖樣式
      3. 建立陰影
      4. 外觀屬性
      5. 建立素描和馬賽克
      6. 陰影、光暈和羽化
      7. 效果摘要
    8. 網頁圖形
      1. 建立網頁圖形的最佳作法
      2. 圖表
      3. SVG
      4. 建立動畫
      5. 切片和影像地圖
  6. 讀入、轉存及儲存
    1. 讀入
      1. 讀入圖稿檔案
      2. 讀入點陣影像
      3. 從 Photoshop 讀入圖稿
      4. 置入多個檔案 | Illustrator CC
      5. 取消嵌入影像
      6. 讀入 Adobe PDF 檔案
      7. 讀入 EPS、DCS 及 AutoCAD 檔案
      8. 連結資訊
    2. Illustrator 中的 Creative Cloud 資料庫 
      1. Illustrator 中的 Creative Cloud Libraries
    3. 儲存
      1. 儲存圖稿
    4. 轉存
      1. 轉存圖稿
      2. 以批次方式收集資產及轉存
      3. 封裝檔案
      4. 建立 Adobe PDF 檔案
      5. 摘取 Extract CSS | Illustrator CC
      6. Adobe PDF 選項
      7. 檔案資訊和中繼資料
  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. GPU 裝置驅動程式問題
    5. Wacom 裝置問題
    6. DLL 檔案問題
    7. 記憶體問題
    8. 偏好設定檔案問題
    9. 字體問題
    10. 印表機問題
    11. 與 Adobe 分享當機報告

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

登入您的帳戶