關於 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 在瀏覽器中產生縮放。尚未寫入任何絕對尺寸值。
  • 「顯示程式碼」: 在預設文字編輯器中開啟轉存內容。
  • 「在瀏覽器中顯示」 (圖示): 在預設的網頁瀏覽器中顯示影像。

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

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