SVG(Scalable Vector Graphics):可縮放矢量圖形，一種二維圖形表示語言。
借助SVG，我們可以實現很多同Canvas API類型的繪制操作，但在Canvas元素上繪制文本的時候，字符會以像素的方式固定到上面。文本成為了圖像的一部分，除非重新繪制Canvas繪制區域，否則無法改變文本內容。正因為如此，Canvas上面的文本無法被搜索引擎獲取，而SVG上的文本卻是可搜索的。例如，Google會對Web上的SVG內容中的文本進行索引。
在頁面中添加SVG
內聯方式：像HTML中的其它元素一樣使用，在此基礎上可以編寫HTML，JavaScript和SVG的交互應用。
<body> <svg width="200" height="200"> </svg> </body>
外聯方式：通過<img>元素，在HTML導入外部SVG文件，缺點是無法編寫與SVG元素進行交互的腳本。
<img src="example.svg" />
簡單的形狀
SVG包含了基本的形狀元素，如矩形、圓形和橢圓。形狀元素的尺寸和位置被定義成了屬性。矩形的屬性有width和height。圓形有一個表示半徑的r屬性。它們都應用CSS語法表示距離，因此單位包括了px 、point 、em等。
矩形：x="50" y="20"表示矩形的起點為(50,20)
<body> <svg width="200" height="200"> <rect x="50" y="20" width="100" height="80" stroke="red" fill="#ccc"></rect> </svg> </body>
SVG繪制開關對象是按對象文檔中出現的順序進行的。如果我們在畫完矩形之后再畫圓，那么圓形會顯示在矩形之上。
增加一個圓形：
<body> <svg width="200" height="200"> <rect x="50" y="20" width="100" height="80" stroke="red" fill="#ccc"></rect> <circle cx="120" cy="80" r="40" stroke="#00f" fill="none" stroke-width="8"></circle> </svg> </body>
變換SVG元素
SVG中可以將多個元素結合起來，使它們形成一個組，變為一個整體。
<g>元素代表“組”，可以用來結合多個相關的元素。組內成員可以由通過ID來引用。些外，組也可以作為一個整體進行變換。如果你為組添加了變換屬性，那么組中所有內容都會進行變換。變換屬性包含了旋轉、變形、縮放和斜切。
<svg width="200" height="200"> <g transform="translate(60,0) rotate(30) scale(0.75)" id="ShapeGroup"> <rect x="50" y="20" width="100" height="80" stroke="red" fill="#ccc"></rect> <circle cx="120" cy="80" r="40" stroke="#00f" fill="none" stroke-width="8"></circle> </g> </svg>
復用內容
SVG中的<defs>元素用於定義留待將來使用的內容。可以用<use>元素將<defs>定義的內容鏈接到需要展示的地方。借助這兩個元素，你可以多次復用同一內容，消除冗余。
<svg width="200" height="200"> <defs> <g id="ShapeGroup"> <rect x="50" y="20" width="100" height="80" stroke="red" fill="#ccc"></rect> <circle cx="120" cy="80" r="40" stroke="#00f" fill="none" stroke-width="8"></circle> </g> </defs> <use xlink:href="#ShapeGroup" transform="translate(60,0) scale(0.4)"></use> <use xlink:href="#ShapeGroup" transform="translate(120,80) scale(0.75)"></use> <use xlink:href="#ShapeGroup" transform="translate(20,60) scale(0.25)"></use> </svg>
圖案和漸變
<defs> <pattern id="GravelPattern" patternContentUnits="userSpaceOnUse" x="0" y="0" width="100" height="67" viewBox="0 0 100 67"> <image x="0" y="0" width="100" height="67" xlink:href="gravel.jpg" /> </pattern> <%--漸變--%> <linearGradient id="RedBlackGradient"> <stop offset="0%" stop-color="#000"></stop> <stop offset="100%" stop-color="#f00"></stop> </linearGradient> </defs> <rect x="0" y="20" width="100" height="80" stroke="red" fill="url(#RedBlackGradient)" /> <circle cx="120" cy="80" r="40" stroke="#00f" stroke-width="8" fill="url(#GravelPattern)" /> </svg>
路徑
SVG不公包含簡單的形狀，還包含自由形態的路徑。path元素有一個d屬性，代表路徑數據。在d的值中，M代表移至(Move to)，L代表划線至(Line to),Q代表二次曲線，Z代表閉合路徑。
<svg width="200" height="200"> <path d="M25,50 L10,80 L20,80 L5,110,L15,110,L20,80 Z" /> </svg>
文本
SVG中文本有點類型於CSS中對於樣式的定義
<svg width="200" height="200"> <text x="10" y="80" font-family="Droid Sans" stroke="#00f" fill="#00f" font-size="40px" font-weight="bold">Hello SVG</text> </svg>