SVG可縮放矢量圖形（Scalable Vector Graphics）是基於可擴展標記語言（XML），用於描述二維矢量圖形的一種圖形格式。 SVG是W3C制定的一種新的二維矢量圖形格式，也是規範中的網絡矢量圖形標準。 SVG嚴格遵從XML語法，並用文本格式的描述性語言來描述圖像內容，因此是一種和圖像分辨率無關的矢量圖形格式。
什麼是SVG？SVG 指可伸縮矢量圖形(Scalable Vector Graphics)
SVG 用來定義用於網絡的基於矢量的圖形
SVG 使用XML 格式定義圖形
SVG 圖像在放大或改變尺寸的情況下其圖形質量不會有所損失
SVG 是萬維網聯盟的標準
SVG 與諸如DOM 和XSL 之類的W3C 標準是一個整體
Canvas 和SVG 的區別： SVGSVG 是一種使用XML 描述2D 圖形的語言。
SVG 基於XML，這意味著SVG DOM 中的每個元素都是可用的。您可以為某個元素附加JavaScript 事件處理器。
在SVG 中，每個被繪製的圖形均被視為對象。如果SVG 對象的屬性發生變化，那麼瀏覽器能夠自動重現圖形。
特點：
不依賴分辨率
支持事件處理器
最適合帶有大型渲染區域的應用程序（比如穀歌地圖）
複雜度高會減慢渲染速度（任何過度使用DOM 的應用都不快）
不適合遊戲應用
CanvasCanvas 通過JavaScript 來繪製2D 圖形。
Canvas 是逐像素進行渲染的。
在canvas 中，一旦圖形被繪製完成，它就不會繼續得到瀏覽器的關注。如果其位置發生變化，那麼整個場景也需要重新繪製，包括任何或許已被圖形覆蓋的對象。
特點：
依賴分辨率
不支持事件處理器
弱的文本渲染能力
能夠以.png 或.jpg 格式保存結果圖像
最適合圖像密集型的遊戲，其中的許多對象會被頻繁重繪
簡單例子：
<svg width=100% height=100% > <circle cx=300 cy=60 r=50 stroke=#ff0 stroke-width=3 fill=red /></svg>位圖與矢量圖
以前，瀏覽器中顯示的圖形，例如jpeg、gif等，都是位圖，這些圖像格式是基於光柵的。在光柵圖像中，圖像文件定義了圖像中每個像素的顏色值。瀏覽器需要讀取這些值並做出相應行動。這種圖像的再現能力比較強，但是在某些情形下會顯得不足。例如，當瀏覽器以不同大小顯示一副圖像時，通常會產生鋸齒邊緣，這時，瀏覽器不得不為那些在原始圖像中不存在的像素插入或猜測數值；這樣會導致圖像失真。此外，針對位圖進行動畫，最多也僅限於生成翻動書本類型的動畫，即快速連續地顯示單獨圖像。
矢量圖通過指定為確定每個像素的值所需的指令而不是指定這些值本身，克服了這些困難中的一部分。例如，向量圖形不再為一個直徑一英寸的圓提供像素值，而是告訴瀏覽器創建一個直徑一英寸的圓，然後讓瀏覽器（或插件）做其餘事情。這消除了光柵圖形的許多限制；使用向量圖形，瀏覽器只要知道它必須畫一個圓。如果圖像需要以正常大小的三倍來顯示，那麼瀏覽器只要按正確的大小畫圓而不必執行光柵圖像通常的插入法。類似地，瀏覽器接收的指令可以更容易地與外部信息源（如應用程序和數據庫）綁定，要對圖像製作動畫，瀏覽器只要接收有關如何操縱屬性（如半徑或顏色）的指令即可。
HTML體系中，最常用的繪製矢量圖的技術是SVG和HTML5新增加的canvas元素。這兩種技術都支持繪製矢量圖和光柵圖。
SVG概述可縮放矢量圖形(Scalable Vector Graphics，簡稱SVG)是一種使用XML來描述二維圖形的語言(SVG嚴格遵從XML語法)。 SVG允許三種類型的圖形對象：矢量圖形形狀（例如由直線和曲線組成的路徑）、圖像和文本。 可以將圖形對象（包括文本）分組、樣式化、轉換和組合到以前呈現的對像中。 SVG 功能集包括嵌套轉換、剪切路徑、alpha 蒙板和模闆對象。
SVG繪圖是交互式和動態的。 例如，可使用腳本來定義和触發動畫。這一點與Flash相比很強大。 Flash是二進製文件，動態創建和修改都比較困難。而SVG是文本文件，動態操作是相當容易的。而且，SVG直接提供了完成動畫的相關元素，操作起來非常方便。
SVG與其他Web標準兼容，並直接支持文檔對像模型DOM。這一點也是與HTML5中的canvas相比很強大的地方(這裡註意，SVG內部也是用一個類似的canvas這樣的東西來展示SVG圖形，到後面你會發現很多特性和HTML5的canvas還有點像；文中如果沒明確說明是SVG的canvas的話，都代指HTML5中的canvas元素)。因而，可以很方便的使用腳本實現SVG的很多高級應用。而且SVG的圖形元素基本上都支持DOM中的標準事件。可將大量事件處理程序(如onmouseover和onclick)分配給任何SVG圖形對象。 雖然SVG的渲染速度比不上canvas元素，但是勝在DOM操作很靈活，這個優勢完全可以彌補速度上的劣勢。
SVG既可以說是一種協議，也可以說是一門語言；既是HTML的一個標準元素，也是一種圖片格式。
SVG並不是HTML5中的東西，但是也算頁面時興的技術之一，姑且也放到這個專題下了。
SVG與其它圖片格式的比較SVG與其它的圖片格式相比，有很多優點(很多優點來源於矢量圖的優點)：
• SVG文件是純粹的XML， 可被非常多的工具讀取和修改(比如記事本)。
• SVG 與JPEG 和GIF圖像比起來，尺寸更小，且可壓縮性更強，總結，矢量圖，內存小，放大不失真。
• SVG 是可伸縮的，可在圖像質量不下降的情況下被放大，可在任何的分辨率下被高質量地打印。
• SVG 圖像中的文本是可選的，同時也是可搜索的(很適合製作地圖)。
• SVG 可以與Java 技術一起運行。
• SVG 是開放的標準。
SVG與Flash的比較SVG 的主要競爭者是Flash。與Flash相比，SVG 最大的優勢是它與其他標準(比如XSL和DOM)相兼容，操作方便，而Flash則是未開源的私有技術。其它的比如存儲的格式，動態生成圖形等方面，SVG也佔有很大的優勢。
SVG的呈現方式關於支持HTML5與SVG的瀏覽器不是這裡討論的重點，基本上裝上最新的Chrome或者FireFox瀏覽器就差不多了(IE用戶請裝IE9就對了，至於IE9之前的版本，需要裝SVG的插件，這裡就直接略過了)。對於直接支持SVG的瀏覽器，SVG主要採用兩面兩種呈現的方式。
內聯到HTML
SVG是標準的HTML元素，直接寫到HTML中就可以了，看下面的例子：
<?xml version=1.0 encoding=UTF-8?><!DOCTYPE html><html><head> <!-- <meta content=text/html; charset=utf-8 http-equiv=Content-Type /> --> <title> My First SVG Page</title></head><body> <svg xmlns=http://www.w3.org/2000/svg version=1.1 width=200px height=200px> <rect x=0 y=0 width=100% height=100% fill=none stroke=black/> <circle cx=100 cy=100 r=50 style=stroke: black; fill: red;/> </svg>< /body></html>
請注意開頭的部分xml聲明，與svg的命名空間xmlns、版本version等部分，主要是考慮兼容性的問題；這些部分在HTML5中基本都可以不用寫了(寫不寫還是自己瞧著辦吧) 。
獨立SVG文件
獨立SVG指的是通過使用svg文件擴展名來提供向量圖形文件格式。在瀏覽器中嵌入這個svg文件就可以使用了。
1.獨立的SVG文件/頁面，定義的模板基本就像下面的一樣：
<svg width=100% height=100%> <!-- SVG markup here. --> </svg>
把這樣的文本文件保存成以svg為擴展名的文件，例如sun.svg，這樣的文件可以直接用瀏覽器打開瀏覽，也可以作為引用嵌入到別的頁面中。
2.HTML引用外部的SVG文件。
使用object或者img元素嵌入svg圖形就可以了，例如下面的小例子：
<!DOCTYPE html><html><head> <title> My First SVG Page</title></head><body> <object data=sun.svg type=image/svg+xml width=300px height=300px> <!-- Implement fallback code here, or display a message: --> <p>Your browser does not support SVG - please upgrade to a modern browser.</p> </object> <img src=sun.svg < rect x=10 y=10 width=30 height=30 stroke=black fill=transparent stroke-width=5/> <rect x=60 y=10 rx=10 ry=10 width=30 height=30 stroke=black fill =transparent stroke-width=5/> <circle cx=25 cy=75 r=20 stroke=red fill=transparent stroke-width=5/> <ellipse cx=75 cy=75 rx=20 ry=5 stroke=red fill=transparent stroke-width=5/> <line x1=10 x2=50 y1=110 y2=150 stroke=orange fill=transparent stroke-width=5/> <polyline points=60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145 stroke=orange fill=transparent stroke-width=5/> <polygon points=50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180 stroke=green fill =transparent stroke-width=5/> <path d=M20,230 Q40,205 50,230 T90,230 fill=none stroke=blue stroke-width=5/></svg>
這個例子畫了很多形狀：正常的矩形，帶圓角的矩形，圓形，橢圓形，直線，折線，多邊形，還有路徑。這些都屬於基本的圖形元素。雖然繪製一個圖形有很多種方式，比如矩形可以用rect實現，也可以用path等實現，但是我們還是應該盡量保持SVG的內容短小精悍，易於閱讀。