位圖，亦稱爲點陣圖像或繪製圖像，是由稱作像素（圖片元素）的單個點組成的。這些點可以進行不同的排列和染色以構成圖樣。當放大位圖時，可以看見賴以構成整個圖像的無數單個方塊。擴大位圖尺寸的效果是增大單個像素，從而使線條和形狀顯得參差不齊。然而，如果從稍遠的位置觀看它，位圖圖像的顏色和形狀又顯得是連續的。
提到SVG，我想大多數人的第一印象是矢量縮放。是的，SVG是製作Logo、圖標及按鈕的理想選擇。和位圖不同，SVG可以在不失真情況下進行任意的縮放。同時，和傳統Web字體不同的是，SVG可以使用多種顏色、漸變甚至複雜的過濾器來處理文字。
位圖和SVG有哪些優缺點呢？
圖像類型 | 組成 | 優點 | 缺點 |
位圖 | 像素 | 只要有足夠多的不同色彩的像素，就可以製作出色彩豐富的圖象，逼真地表現自然界的景象 | 縮放和旋轉容易失真，同時文件容量較大 |
SVG | 數學向量 | 文件容量較小，在進行放大、縮小或旋轉等操作時圖象不會失真 | 不易製作色彩變化太多的圖象 |
下面讓我們來對比一下位圖和SVG圖片使用方法的異同。
位圖使用方法
位圖在Web項目中的應用已經非常成熟了，如果需要常規的圖片展示，我們通常不會使用多個圖片，而是把需要的圖片放置在一張圖片中，例如：
這個例子裏集合8個24×24 圖標在一個大小爲192×24 圖片中。這樣做的好處是，我們只需要發送一次 HTTP請求即可下載我們所需要的所有圖標，減少瀏覽器請求併發數的壓力，提高網頁加載速度，增強用戶體驗。
當我們需要引用其中一個圖標時，我們可以使用以下這段 CSS 代碼來顯示圖片：
#print
{
width: 24px;
height: 24px;
url("sprite.png" ) -168px 0;
}SVG 使用方法
SVG同樣可以把多個圖像集成到一個文件中。而且在交互性上要優於位圖圖片；你可以使用圖片名稱來引用SVG對象，相比於通過手動計算像素位置通過CSS樣式定位圖片，顯然方便了很多。
在使用之前，我們先創建一個很簡單的SVG，包含三個獨立圖標：一個綠色的圓形、一個紅色的方形和一個藍色的三角形。
<?xml version="1.0"?>
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<g class="sprite" id="circle">
<ellipse cy="50" cx="50" ry="45" rx="45" stroke-width="5" stroke="#00ff00" fill="#00ff00" fill-opacity="0.75" />
</g>
<g class="sprite" id="square">
<rect y="5" x="5" width="90" height="90" stroke-width="5" stroke="#ff0000" fill="#ff0000" fill-opacity="0.75" />
</g>
<g class="sprite" id="triangle">
<path d="M20,7 L92,50 L6,93 z" stroke-width="5" stroke="#0000ff" fill="#0000ff" fill-opacity="0.75" />
</g>
</svg>XML代碼中，每個形狀被指定了SpriteClass和ID。當前可以看到一個堆疊效果。如圖：
有一個小技巧-你可以通過CSS樣式來控制只顯示當前目標圖層，隱藏其它圖層：
<defs>
<style><![CDATA[
.sprite { display: none; }
.sprite:target { display: inline; }
]]></style>
</defs>因此，如果我們可以通過定製鏈接來顯示目標對象，例如，SVG文件名稱爲 sprite.xml，我們通過在URL中添加哈希值來指定目標對象，如sprite.xml#circle ，我們就可以僅顯示圓形所在圖層。
我們可以通過很多途徑添加 SVG文件，如Object、iframe、img標籤或者是作爲CSS背景添加（Chrome、Safari和Opera 15+都不支持以img標籤或者CSS背景添加形式添加SVG）。
<html lang="en">
<head>
<meta charset="utf-8" />
</head>
<style>
body
{
font-family: sans-serif;
margin: 10px;
color: #222;
background-color: #eee;
}
div.sprite
{
display: inline-block;
width: 100px;
height: 100px;
}
div#circle { background-image: url("sprite.svg#circle"); }
div#square { background-image: url("sprite.svg#square"); }
div#triangle { background-image: url("sprite.svg#triangle"); }
</style>
<body>
<h2>object</h2>
<object type="image/svg+xml" width="100" height="100" data="sprite.svg#circle"></object>
<object type="image/svg+xml" width="100" height="100" data="sprite.svg#square"></object>
<object type="image/svg+xml" width="100" height="100" data="sprite.svg#triangle"></object>
<h2>iframe</h2>
<iframe src="sprite.svg#circle" width="100" height="100" frameborder="0"></iframe>
<iframe src="sprite.svg#square" width="100" height="100" frameborder="0"></iframe>
<iframe src="sprite.svg#triangle" width="100" height="100" frameborder="0"></iframe>
<h2>img</h2>
<img src="sprite.svg#circle" width="100" height="100" />
<img src="sprite.svg#square" width="100" height="100" />
<img src="sprite.svg#triangle" width="100" height="100" />
<h2>CSS background</h2>
<div id="circle" class="sprite"></div>
<div id="square" class="sprite"></div>
<div id="triangle" class="sprite"></div>
</body>
</html>IE9和Chrome中看到的效果如下：
通過以上的描述，你現在大概瞭解 SVG 的使用方法及優勢了吧？儘管它是如此的實用，但是關於SVG技術的前景衆說紛紜。儘管SVG具有可擴展、易交互並且節省網
絡資源等諸多優勢，SVG還是沒有在Web項目中被廣泛應用。這是什麼原因呢？
SVG 不支持早期的 IE 瀏覽器 -僅支持IE9及更高版本。
SVG誕生於1999年-至今仍然不溫不火，給人感覺像一門既古老又不受歡迎的技術。
設計工具稀少-導致使用起來很困難。
SVG基於XML-給大多初學者的印象很複雜，望而卻步。
SVG將何去何從，讓我們拭目以待。