要製作出令人驚豔的行動內容，就必須在下載的資料量與視覺效果之間取得平衡。向量圖形能在最低頻寬的情況下，提供令人驚豔的影像效果。
許多人認為在網頁上繪製向量和點陣圖的混合圖形，只有透過畫布才能完成，但其實還有其他替代方案，而且還具有一些優點。可擴充向量圖形 (SVG) 是 HTML5 的重要元素，也是繪製向量圖形的絕佳方式。
我們都知道，回應式設計是處理不同螢幕大小的重要部分，而 SVG 則是輕鬆處理不同大小螢幕的理想選擇。
SVG 是呈現向量線條圖形的絕佳方式，也是點陣圖的絕佳補充，後者更適合連續色調圖片。
SVG 最實用的地方在於它不受解析度影響，也就是說，您不必考慮裝置的像素數量，瀏覽器會在顯示結果時調整大小並進行最佳化，讓畫面看起來更美觀。
許多熱門的製作工具 (例如 Google 雲端硬碟中的繪圖應用程式、Inkscape、Illustrator、Corel Draw 和許多其他工具) 都能產生 SVG，因此產生內容的方式有很多種。我們將深入探討使用 SVG 素材資源的方式，並提供一些最佳化提示，協助您開始使用。
擴充基礎概念
我們先從簡單的情況開始說明，假設您想將全頁圖片設為網頁背景。在背景隨時顯示公司標誌或類似的圖像非常實用，但當然，要針對所有螢幕尺寸打造完美的顯示效果非常困難。為了說明這個概念，我們先從 HTML5 標誌開始。
下方顯示 HTML5 標誌，如您所見，它原本是 SVG 檔案。
按一下標誌，並在任何新式瀏覽器中查看，您會發現標誌會完美地縮放至任何大小的視窗。請嘗試在您偏好的瀏覽器中開啟圖片，調整視窗大小，並觀察圖片在任何放大倍率下是否清晰。如果我們嘗試使用位圖圖片，就必須為每個可能遇到的螢幕提供多種不同大小的圖片，或者被迫使用經過縮放處理的圖片，而這些圖片的像素會非常粗糙。
那究竟是什麼？ 您可能沒有注意到，這是唯一一種可獨立於我們用來查看的裝置縮放的格式。因此，我們只需為使用者提供一個素材資源，無須瞭解他們的螢幕或視窗大小，這真是太棒了！
等等，HTML5 標誌只有 1427 個位元組！天啊，這麼小的檔案幾乎不會影響任何行動數據方案的載入速度，因此載入速度快，使用者也能以低價快速存取！
SVG 檔案的另一個優點是，可以使用 GZIP 壓縮功能進一步縮小檔案。以這種方式壓縮 SVG 時，檔案副檔名必須變更為「.svgz」。以 HTML5 標誌為例，經過壓縮後，檔案大小只會縮減到 663 個位元組，而且大多數新式瀏覽器都能輕鬆處理！
在某些最新裝置上使用範例檔案時，我們發現使用壓縮向量資料可獲得 60 倍的優勢！另外請注意，這些比較是在 JPEG 和 SVG 之間進行，而非 PNG。不過，JPEG 是有損格式的格式，畫質低於 SVG 或 PNG。如果使用 PNG 檔案，優勢比 80 倍以上，真是太驚人了！
但 PNG 和 JPEG 的效果當然不盡相同。許多最佳化提示都會建議您使用 JPEG 而非 PNG，但這不一定是最佳做法。請參考下方圖片。左側圖片是 HTML5 標誌右上方部分的 PNG 圖片，放大 6 倍。右側圖片與左側圖片相同，但採用 JPEG 編碼。
很容易看出，JPEG 格式在節省檔案大小時會產生一些缺點，例如在銳利邊緣出現色彩瑕疵，可能會讓您的視網膜誤以為需要配戴眼鏡：-) 不過，JPEG 格式是針對相片進行最佳化處理，因此不適合用於向量圖。無論如何，SVG 版本的品質都與 PNG 相同，因此在檔案大小和清晰度方面都勝出。
建立向量背景
以下說明如何使用向量檔案做為頁面背景。 最簡單的方法是使用 CSS 固定定位來宣告背景檔案：
<style>
#bg {
position:fixed;
top:0;
left:0;
width:100%;
z-index: -1;
}
</style>
<img src="HTML5-logo.svgz" id="bg" alt="HTML5 logo"></pre>
你會發現，無論螢幕大小為何，影像都會配合清晰的邊緣調整大小。
當然，我們也值得在背景加入一些內容。
但如您所見，由於我們無法辨識文字，導致結果不理想。那麼我們該怎麼做呢？
調整背景，讓畫面看起來更美觀
我們需要做的顯而易見的動作，就是讓背景圖片中的所有顏色都變得更亮。只要使用 CSS 不透明度屬性，或在 SVG 檔案中使用不透明度，即可輕鬆達成這項目標。只要在 CSS 內容中加入這段程式碼，即可實現這個效果：
#bg {
opacity: 0.2;
}
結果如下所示：
雖然這個解決方案很簡單，但在行動裝置上可能會造成效能問題。對於大多數現有的行動瀏覽器，使用不透明度屬性比使用不透明物件，繪製速度可能會慢上許多。
更佳的解決方案
比起使用 CSS 設定不透明度，修改原始 SVG 內容的顏色會更好。以下是我們修改過的 HTML5 標誌，我們變更了使用的顏色，讓標誌看起來有淡出效果，並在這個過程中完全避免使用透明度屬性。因此，下方的背景圖片看起來與變更不透明度後的結果相同，但實際上會以更快的速度繪製，進而節省 CPU 時間，並在過程中延長寶貴的電池續航力。
我們現在已掌握一些基礎知識，現在來瞭解其他功能。
有效率地使用漸層
假設我們要建立一個按鈕，我們可以先建立一個圓角漂亮的矩形。接著，我們可以加入不錯的線性漸層，為按鈕提供不錯的紋理。這麼做的程式碼可能類似如下：
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="blueshiny">
<stop stop-color="#a0caf6" offset="0"/>
<stop stop-color="#1579df" offset="0.5" />
<stop stop-color="#1675d6" offset="0.5"/>
<stop stop-color="#115ca9" offset="1"/>
</linearGradient>
</defs>
<g id="button" onclick="alert('ouch!');">
<rect fill="url(#blueshiny)" width="198" height="83" x="3" y="4" rx="15" />
<text x="100" y="55" fill="white" font-size="18pt" text-anchor="middle">Press me</text>
</g>
</svg>
最終按鈕會變成如下所示：
請注意，我們新增的漸層從左到右。這是 SVG 中的預設漸層方向。但我們可以做得更好，原因有幾個：美觀和效能。我們可以嘗試變更漸層方向，讓外觀更清晰。在線性漸層上設定「x1」、「y1」、「x2」和「y2」屬性可控制填滿顏色的方向。
只設定 y2 屬性後，我們可以將漸層變更為對角線。因此，請進行以下簡單的程式碼變更：
<linearGradient id="blueshiny" y2="1">
我們的按鈕外觀與下圖不同，看起來會像下圖這樣。
我們也可以透過這段程式碼的簡單變更，輕鬆將漸層效果從上到下顯示：
<linearGradient id="blueshiny" x2="0" y2="1">
最終會如下圖所示。
那麼，為什麼要討論漸層的不同角度？
結果顯示，在大多數裝置上，從上到下顯示漸層效果的範例，繪製速度最快。在編寫瀏覽器程式碼的圖形專家中，很少人知道垂直 (由上而下) 漸層的繪製速度幾乎與純色相同。(原因是繪製物件時，會在頁面下方以水平線繪製，而繪圖程式碼的核心會瞭解顏色不會在每條線之間變更，因此會進行最佳化)。
因此，如果您選擇在網頁設計中使用漸層，垂直漸層會更快，且耗電量較低。這項加速功能也適用於 CSS 漸層，因此不只是 SVG 的功能。
如果您想嘗試使用新的漸層效果，不妨在 HTML5 標誌後方加入下列程式碼，為標誌增添酷炫的漸層效果：
<defs>
<linearGradient id="grad1" x2="0" y2="1">
<stop stop-color="#FBE6FB" offset="0" />
<stop stop-color="#CCCCFF" offset="0.2" />
<stop stop-color="#CCFFCC" offset="0.4" />
<stop stop-color="#FFFFCC" offset="0.6" />
<stop stop-color="#FFEDCC" offset="0.8" />
<stop stop-color="#FFCCCC" offset="1" />
</linearGradient>
</defs>
<rect x="-200" y="-160" width="910" height="830" fill="url(#grad1)"/></pre>
上述程式碼會在 HTML5 標誌的背景中加入垂直線性漸層，以便呈現精緻的多色調，並以快速的方式運作，速度與純色背景相同。
如果您在電腦版瀏覽器中載入內容，並將大小調整為極端的顯示比例，頂端/底部或左側/右側會顯示白色橫條。總之，在最終背景上進行程式碼變更後，看起來會像這樣：
輕鬆製作動畫
到目前為止，您可能會想知道為何要使用 SVG 漸層做為網頁的背景。確實，使用 CSS 漸層來做這件事可能會比較合理，但 SVG 的優點之一是漸層本身會位於 DOM 中。也就是說，你可以透過指令碼修改這個格式，更重要的是，你也可以運用 SVG 內建的動畫功能，對內容進行細微的變更。
舉例來說，我們會將線性漸層定義變更為下列程式碼，以修改色彩鮮豔的 HTML5 標誌：
<linearGradient id="grad1" x2="0" y2="1">
<stop stop-color="#FBE6FB" offset="0">
<animate attributeName="stop-color"
values="#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB"
begin="0s" dur="20s" repeatCount="indefinite"/>
</stop>
<stop stop-color="#CCCCFF" offset="0.2">
<animate attributeName="stop-color"
values="#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF"
begin="0s" dur="20s" repeatCount="indefinite"/>
</stop>
<stop stop-color="#CCFFCC" offset="0.4">
<animate attributeName="stop-color"
values="#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF;#CCFFCC"
begin="0s" dur="20s" repeatCount="indefinite"/>
</stop>
<stop stop-color="#FFFFCC" offset="0.6">
<animate attributeName="stop-color"
values="#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC"
begin="0s" dur="20s" repeatCount="indefinite"/>
</stop>
<stop stop-color="#FFEDCC" offset="0.8">
<animate attributeName="stop-color"
values="#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC"
begin="0s" dur="20s" repeatCount="indefinite"/>
</stop>
<stop stop-color="#FFCCCC" offset="1">
<animate attributeName="stop-color"
values="#FFCCCC;#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC"
begin="0s" dur="20s" repeatCount="indefinite"/>
</stop>
</linearGradient>
請參閱下圖，瞭解上述變更的結果。
程式碼會在花費 20 秒的連續循環中，變更線性漸層的顏色。這樣一來，漸層就會以不間斷的動作向上移動，看起來就像永遠不會停止一樣。
最棒的是，您無須編寫指令碼！ 因此，這個圖片會以本頁面參照圖片的形式執行，但由於不需要使用指令碼，因此可減少行動裝置 CPU 的工作負載。
此外，瀏覽器本身可利用其繪圖知識，確保使用最少的 CPU 負載來執行精緻的動畫。
有一個值得注意的是：某些瀏覽器根本無法處理這種動畫樣式，但在這種情況下，您還是會看到良好的彩色背景，但背景不會改變。只要使用指令碼 (和 requestAnimationFrame) 就能解決這個問題，但還有一些文章已超出本文範圍。
另外要注意的是，這個未壓縮的 SVG 檔案只有 2922 個位元組，提供如此豐富的圖形效果，可讓使用者和資料方案在過程中都感到滿意。
接下來要做什麼？
在許多情況下，SVG 都不是最佳選擇，相片和影片以其他格式呈現會更理想。文字是另一種，因為原生 HTML 和 CSS 通常表現得更好。不過，如果您是繪製線條圖片，這款工具會是理想的選擇。
我們已介紹 SVG 圖形的幾項基本用途，說明如何輕鬆產生小型內容，以最少的下載量提供全螢幕鮮豔圖形。只要稍微強化內容，就能輕鬆產生精彩的圖形結果，而且標記量也不多。在下一篇文章中，我們將進一步探討如何使用內建於 SVG 的動畫，打造更簡單且強大的效果，並比較使用畫布與 SVG 的效果，以便選擇適合用於製作行動圖像網站的工具。
其他實用資源
- Inkscape 使用 SVG 做為檔案格式的開放原始碼繪圖應用程式。
- Open Clip Art：龐大的開放原始碼插圖庫，內含數千張 SVG 圖片。
- W3C SVG 頁面，包含規格、資源等連結。
- Raphaël：JavaScript 程式庫，提供方便的 API 來繪製和製作 SVG 內容動畫，並提供舊版瀏覽器的絕佳備用方案。
- Slippery Rock University 的 SVG 資源 - 包含一個很棒的 SVG 入門連結。