製作令人驚豔的行動內容，意味著能平衡下載的資料量與最大視覺衝擊。向量圖形是用最少頻寬產生絕美視覺效果的絕佳方式。
許多人認為畫布是網路上繪製向量和光柵的唯一方法，但還有其他有一些優點的替代方案。要建立向量繪圖，使用可縮放向量圖形 (SVG) 是 HTML5 的重點。
我們都知道回應式設計是處理不同螢幕大小的一大關鍵，而 SVG 就非常適合用於處理各種尺寸的螢幕。
SVG 是對向量線繪圖的好方法，它非常適合搭配點陣圖，後者更適合連續色調圖片。
SVG 最有用的特色之一，就是可獨立解析度。也就是說，您不必考量裝置上有多少像素，結果會一律縮放，並由瀏覽器進行最佳化調整，以呈現最佳視覺效果。
熱門創作工具 (例如 Google 雲端硬碟中的繪圖應用程式、Inkscape、插畫家、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;
}
結果如下：
這個解決方案雖然簡單，卻可能是行動裝置上的效能問題。就大部分的現有行動瀏覽器而言，與不透明物件相比，使用不透明度屬性的繪製速度會比較慢。
更理想的解決方案
直接修改原始 SVG 內容的顏色，比透過 CSS 設定不透明度更好。這裡的 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 標誌增添了新奇的快感，不妨加入以下程式碼，在 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 Primer 的連結。