資訊專欄INFORMATION COLUMN
摘要：標簽標簽用于將多個形狀組成一個組，方便復用。表示的寬度和長度是實際的像素值。標簽標簽對的屬性不起作用，如果需要變形，就要使用標簽。注意，如果使用標簽插入文件，就無法獲取。
代碼優(yōu)化永遠是程序員亙古不變的需求，而合理的利用SVG圖片來代替部分PNG/JPG等格式的圖片則是前端優(yōu)化重要的一環(huán)，既然是優(yōu)化，那我們先來看看SVG圖片都有哪些優(yōu)勢：
SVG 可被非常多的工具讀取和修改（比如記事本）
SVG 與 JPEG 和 GIF 圖像比起來，尺寸更小，且可壓縮性更強。
SVG 是可伸縮的
SVG 圖像可在任何的分辨率下被高質量地打印
SVG 可在圖像質量不下降的情況下被放大
SVG 圖像中的文本是可選的，同時也是可搜索的（很適合制作地圖）
SVG 可以與 Java 技術一起運行
SVG 是開放的標準
SVG 文件是純粹的 XML
不了解SVG的同學現(xiàn)在一定一臉問號，就跟我第一次見他們一樣，別著急，我們從基礎看起。
什么是SVG？SVG 是一種基于 XML 語法的圖像格式，全稱是可縮放矢量圖（Scalable Vector Graphics）。其他圖像格式都是基于像素處理的，SVG 則是屬于對圖像的形狀描述，所以它本質上是文本文件，體積較小，且不管放大多少倍都不會失真。此外SVG 是萬維網聯(lián)盟的標準，SVG 與諸如 DOM 和 XSL 之類的 W3C 標準是一個整體。
怎么使用？在 HTML5 中，您能夠將 SVG 元素直接嵌入 HTML 頁面中,例如上面的那顆小紅心：
SVG 代碼也可以寫在一個以.svg結尾的文件中，然后用
的width屬性和height屬性，指定了 SVG 圖像在 HTML 元素中所占據的寬度和高度。除了相對單位，也可以采用絕對單位（單位：像素）。如果不指定這兩個屬性，SVG 圖像默認大小是300像素（寬） x 150像素（高）。 如果只想展示 SVG 圖像的一部分，就要指定viewBox屬性。 注意，視口必須適配所在的空間。上面代碼中，視口的大小是 50 x 50，由于 SVG 圖像的大小是 100 x 100，所以視口會放大去適配 SVG 圖像的大小，即放大了四倍。 如果不指定width屬性和height屬性，只指定viewBox屬性，則相當于只給定 SVG 圖像的長寬比。這時，SVG 圖像的默認大小將等于所在的 HTML 元素的大小。 2. 上面的代碼定義了三個圓。 class屬性用來指定對應的 CSS 類。 SVG 的 CSS 屬性與網頁元素有所不同。 fill：填充色 3. 上面代碼中， 4. 5. 6. 7. 8. M：移動到（moveto） 10. 標簽 的href屬性指定所要復制的節(jié)點，x屬性和y屬性是左上角的坐標。另外，還可以指定width和height坐標。 11. 12. 13. 上面代碼中， 14. 上面代碼中， 15. 上面代碼中，矩形會不斷移動，產生動畫效果。 attributeName：發(fā)生動畫效果的屬性名。 16. 上面代碼中， 1. DOM操作 上面代碼插入網頁之后，就可以用 CSS 定制樣式。 然后，可以用 JavaScript 代碼操作 SVG。 上面代碼指定，如果點擊圖形，就改寫circle元素的r屬性。 2. 獲取 SVG DOM.red {
fill: red;
}
.fancy {
fill: none;
stroke: black;
stroke-width: 3pt;
}
stroke：描邊色
stroke-width：邊框寬度
L：畫直線到（lineto）
Z：閉合路徑
9.
標簽用于復制一個形狀。
from：單次動畫的初始值。
to：單次動畫的結束值。
dur：單次動畫的持續(xù)時間。
repeatCount：動畫的循環(huán)模式。
可以在多個屬性上面定義動畫。
如果 SVG 代碼直接寫在 HTML 網頁之中，它就成為網頁 DOM 的一部分，可以直接用 DOM 操作。circle {
stroke-width: 5;
stroke: #f00;
fill: #ff0;
}
circle:hover {
stroke: #090;
fill: #f8f8f8;
}
var mycircle = document.getElementById("mycircle");
mycircle.addEventListener("click", function(e) {
console.log("circle clicked - enlarging");
mycircle.setAttribute("r", 60);
}, false);
使用、