位圖與矢量圖 　　以前，瀏覽器中顯示的圖形，例如jpeg、gif等，都是位圖，這些圖像格式是基於光柵的。在光柵圖像中，圖像文件定義了圖像中每個像素的顏色值。瀏覽器需要讀取這些值並做出相應行動。這種圖 ...

使用腳本可以很方便的完成各種復雜的任務，也是完成動畫和交互的一種主流方式。由於SVG是html的元素，所以支持普通的DOM操作，又由於SVG本質上是xml文檔，所以也有一種特殊的DOM操作，大多稱之為SVG DOM。當然了，由於目前IE不支持SVG，開發基於IE的SVG頁面需要采用 ...

SVG中渲染文本 　　SVG的強大能力之一是它可以將文本控制到標准HTML頁面不可能有的程度，而無須求助圖像或其它插件。任何可以在形狀或路徑上執行的操作（如繪制或濾鏡）都可以在文本上執行。盡管SVG的文本渲染如此強大，但是還是有一個不足之處：SVG不能執行自動換行。如果文本比允許空間長，則簡單 ...

　　前面我們重點都在總結各類形狀，文本和圖片，接下來，我們還是和討論canvas一樣，總結一下顏色處理，也就是填充和邊框效果；你會發現這里的內容與canvas基本上是一致的。這些屬性既可以以屬性的形式寫在元素中，也可以以CSS的形式保存(這是與canvas不一樣的地方)。填充色 - fill屬性 ...

　　SVG和canvas中是一樣的，都是使用標准的HTML/CSS中的顏色表示方法，這些顏色都可以用於fill和stroke屬性。基本有下面這些定義顏色的方式：1. 顏色名字： 直接使用顏色名字red, blue, black...2. rgba/rgb值： 這個也很好理解，例如#ff0000 ...

基本形狀　　SVG提供了很多的基本形狀，這些元素可以直接使用，這一點比canvas好多了。廢話不說了，直接看例子，這個最直接： < svg width ="200" height ="250" > < rect x ...

前面介紹了很多的圖形元素，如果很多圖形本身是一樣的，需要每次都去定義一個新的么？我們能否共用一些圖形呢？這是這節的重點 - SVG元素的重用。 組合 - g元素 g元素是一種容器，它組合一組相關的圖形元素成為一個整體；這樣，我們就可以對這個整體進行操作。這個元素通常 ...

濾鏡稱得上是SVG最強大的功能了，它允許你給圖形(圖形元素和容器元素)添加各種專業軟件中才有的濾鏡特效。這樣你就很容易在客戶端生成和修改圖像了。而且濾鏡並沒有破壞原有文檔的結構，所以維護性也很好。 濾鏡用filter元素定義；需要使用的時候，在需要濾鏡效果的圖形或容器上添加 ...