svg 即 scalable vector graphics，是一種用來繪製向量圖的 html5 標籤。你只需定義好xml屬性，就能獲得一致的影象元素。 使用svg之前先將標籤加入到html body中。就像其他的html標籤一樣，你可以...
svg 即 scalable vector graphics，是一種用來繪製向量圖的 html5 標籤。你只需定義好xml屬性，就能獲得一致的影象元素。
使用svg之前先將標籤加入到html body中。就像其他的html標籤一樣，你可以為svg標籤為之新增id屬性。也可以為之新增css樣式，例如「border-style:solid;border-width:2px;」。svg標籤跟其它的html標籤有通用的屬性。你可以用height="100px" width="200px" 為其新增高度和寬度。
現在就將svg元素加入到我們html**中，svg提供很多繪圖形狀，例如線條、圓、多邊形等。
svg線條：
svg線條用標籤定義，在此標籤內你還可以定義其他的屬性。
該標籤包括像起點座標(x1,y1)和終點座標(x2,y2)這樣的屬性。指定x1,y1,x2,y2值來設定起點終點座標。在指定好座標後，可以為之新增一些樣式，在style屬性中使用「stroke:green;」為線條指定顏色。同樣你也可以用stroke-width:2為線條設定寬度。
**1：使用svg畫線
svg畫圓：
svg提供了一種不同的標籤來畫圓。正如你看到的下面**，circle有個id為mycircle。為了定義圓的中心以及半徑，使用cx="55" cy="55"以及r="50"屬性分別定義。使用fill="#219e3e"為圓填充顏色。同樣你可以用stroke="#17301d" stroke-width="2"定義圓周線條顏色和寬度。
**2:使用svg畫圓
svg矩形:
同樣的使用標籤來畫矩形，我們同樣設定了 id 屬性 「myrectangle」 ,用 width="300" height="100" 定義高寬，使用 fills 屬性定義填充顏色。用 strock 定義邊框。還有一點需要注意，我用 fill-opacity="0.5" stroke-opacity="0.5" 為 stroke 和 filling 都新增了透明度。
**3:svg畫矩形
svg橢圓：
我們同樣是用標籤來繪製橢圓。設定其 id="myellipse" ，給定起中心座標 cx="120"cy="60"，長軸短軸半徑 rx="100" ry="50",並用設定填充顏色、邊框寬度以及邊框顏色style="fill:#3f5208;stroke:black;stroke-width:3"。
**4:svg畫橢圓
svg多邊形：
我們使用特定標籤繪製多邊形,points屬性用來定義多邊形的幾個頂點，用左邊對來定義，形如 points="10,10 75,150 150,60" ，這裡定義了三個頂點(10,10),(75,150),(150,60)。同上面一樣，用 style="fill:#63bcf7;stroke:black;stroke-width:3" 定義多邊形填充顏色、邊框以及邊框寬度。
**5：svg畫多邊形
HTML5如何使用SVG
幾個svg小例子 我們來看一下第三個分享圖示的 不了解svg的同學現在一定一臉問號，就跟我第一次見他們一樣，別著急，我們從基礎看起。svg 是一種基於 xml 語法的影象格式，全稱是可縮放向量圖 scalable vector graphics 其他影象格式都是基於畫素處理的，svg 則是屬於對影象...
HTML5如何使用SVG的方法示例
優化永遠是程式設計師亙古不變的需求，而合理的利用svg來代替部分png jpg等格式的則是前端優化重要的一環，既然是優化，那我們先來看看svg都有哪些優勢 svg 可被非常多的工具讀取和修改 比如記事本 幾個svg小例子 我們來看一下第三個分享圖示的 不了解svg的同學現在一定一臉問號，就跟我第一次...
HTML5中的SVG學習
什麼是svg？svg 的優勢 與其他影象格式相比 比如 jpeg 和 gif 使用 svg 的優勢在於 瀏覽器支援 internet explorer 9 firefox opera chrome 以及 safari 支援內聯 svg。把 svg 直接嵌入 html 頁面 在 html5 中，您能夠...