VG 表示可伸縮矢量圖形，這是一門用于描述 2D 圖形的語言，圖形應用使用 XML 編寫，然后 XML 由 SVG 閱讀器程序呈現。

SVG 主要用于矢量類型的圖表，比如餅圖，X，Y 坐標系統中的二維圖等等。

SVG 在 2003 年 1 月 14 日成為 W3C 推薦標準，你可以在 SVG 規范 頁面中查看最新版本的 SVG 規范。

查看 SVG 文件
大多數 Web 瀏覽器都可以顯示 SVG，就像它們可以顯示 PNG，GIF 以及 JPG 圖形。IE 用戶可能需要安裝 Adobe SVG 閱讀器 以便能夠在瀏覽器中查看 SVG。

在 HTML5 中嵌入 SVG
HTML5 允許我們直接使用 __ svg ... /svg 標簽嵌入 SVG，下面是簡單的語法：

 svg xmlns= http://www.w3.org/2000/svg  /svg 

HTML5 - SVG 圓

下面是一個 SVG 示例的 HTML5 版本，用 circle 標簽繪制一個圓：

 !DOCTYPE html  head  title SVG /title  meta charset= utf-8 /  /head  body  h2 HTML5 SVG Circle /h2  svg id= svgelem height= 200 xmlns= http://www.w3.org/2000/svg  circle id= redcircle cx= 50 cy= 50 r= 50 fill= red /  /svg  /body  /html 

在啟用 HTML5 的最新版 FireFox 中會生成如下結果：

HTML5 - SVG 矩形
下面是一個 SVG 示例的 HTML5 版本，用 rect 標簽繪制一個矩形：

 !DOCTYPE html  head  title SVG /title  meta charset= utf-8 /  /head  body  h2 HTML5 SVG Rectangle /h2  svg id= svgelem height= 200 xmlns= http://www.w3.org/2000/svg  rect id= redrect width= 300 height= 100 fill= red /  /svg  /body  /html 

在啟用 HTML5 的最新版 FireFox 中會生成如下結果：

HTML5 - SVG 線條
下面是一個 SVG 示例的 HTML5 版本，用 line 標簽繪制一個線條：

 !DOCTYPE html  head  title SVG /title  meta charset= utf-8 /  /head  body  h2 HTML5 SVG Line /h2  svg id= svgelem height= 200 xmlns= http://www.w3.org/2000/svg  line x1= 0 y1= 0 x2= 200 y2= 100  >
你可以使用 style 屬性給它設置額外的樣式信息，比如筆畫，填充色，筆畫寬度等等。
在啟用 HTML5 的最新版 FireFox 中會生成如下結果：

HTML5 - SVG 橢圓
下面是一個 SVG 示例的 HTML5 版本，用 ellipse 標簽繪制一個橢圓：
 !DOCTYPE html  head  title SVG /title  meta charset= utf-8 /  /head  body  h2 HTML5 SVG Ellipse /h2  svg id= svgelem height= 200 xmlns= http://www.w3.org/2000/svg  ellipse cx= 100 cy= 50 rx= 100 ry= 50 fill= red /  /svg  /body  /html 
在啟用 HTML5 的最新版 FireFox 中會生成如下結果：

HTML5 - SVG 多邊形
下面是一個 SVG 示例的 HTML5 版本，用 polygon 標簽繪制一個多邊形：
 !DOCTYPE html  head  title SVG /title  meta charset= utf-8 /  /head  body  h2 HTML5 SVG Polygon /h2  svg id= svgelem height= 200 xmlns= http://www.w3.org/2000/svg  polygon points= 20,10 300,20, 170,50 fill= red /  /svg  /body  /html 
在啟用 HTML5 的最新版 FireFox 中會生成如下結果：

HTML5 - SVG 折線
下面是一個 SVG 示例的 HTML5 版本，用 polyline 標簽繪制一個折線圖：
 !DOCTYPE html  head  title SVG /title  meta charset= utf-8 /  /head  body  h2 HTML5 SVG Polyline /h2  svg id= svgelem height= 200 xmlns= http://www.w3.org/2000/svg  polyline points= 0,0 0,20 20,20 20,40 40,40 40,60 fill= red /  /svg  /body  /html 
在啟用 HTML5 的最新版 FireFox 中會生成如下結果：

HTML5 - SVG 漸變
下面是一個 SVG 示例的 HTML5 版本，用 ellipse 標簽繪制一個橢圓，使用 radialGradient 標簽定義一個 SVG 徑向漸變。
我們可以以類似的方式用 linearGradient 標簽創建 SVG 線性漸變。
 !DOCTYPE html  head  title SVG /title  meta charset= utf-8 /  /head  body  h2 HTML5 SVG Gradient Ellipse /h2  svg id= svgelem height= 200 xmlns= http://www.w3.org/2000/svg  defs  radialGradient id= gradient cx= 50% cy= 50% r= 50%  fx= 50% fy= 50%  stop offset= 0% >
在啟用 HTML5 的最新版 FireFox 中會生成如下結果：
以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP ！
相關推薦：
如何使用HTML5 File接口在web頁面上使用文件下載
html5如何實現圖片轉圈的動畫效果
HTML5的Canvas實現繪制曲線的方法
以上就是關于使用HTML5進行SVG矢量圖形繪制的代碼的詳細內容，其它編程語言        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。