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，下面是简单的语法：
xml/html code复制内容到剪贴板
svg xmlns=http://www.w3.org/2000/svg> ... svg>
html5 - svg 圆
下面是一个 svg 示例的 html5 版本，用 标签绘制一个圆：
xml/html code复制内容到剪贴板
nbsp;html> head> title>svgtitle> meta charset=utf-8 /> head> body> h2>html5 svg circleh2> 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 版本，用 标签绘制一个矩形：
xml/html code复制内容到剪贴板
nbsp;html> head> title>svgtitle> meta charset=utf-8 /> head> body> h2>html5 svg rectangleh2> 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 版本，用 标签绘制一个线条：
xml/html code复制内容到剪贴板
nbsp;html> head> title>svgtitle> meta charset=utf-8 /> head> body> h2>html5 svg lineh2> svg id=svgelem height=200 xmlns=http://www.w3.org/2000/svg> line x1=0 y1=0 x2=200 y2=100 style=stroke:red;stroke-width:2/> svg> body> html>
你可以使用 style 属性给它设置额外的样式信息，比如笔画，填充色，笔画宽度等等。
在启用 html5 的最新版 firefox 中会生成如下结果：
html5 - svg 椭圆
下面是一个 svg 示例的 html5 版本，用 标签绘制一个椭圆：
xml/html code复制内容到剪贴板
nbsp;html> head> title>svgtitle> meta charset=utf-8 /> head> body> h2>html5 svg ellipseh2> 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 版本，用 标签绘制一个多边形：
xml/html code复制内容到剪贴板
nbsp;html> head> title>svgtitle> meta charset=utf-8 /> head> body> h2>html5 svg polygonh2> 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 版本，用 标签绘制一个折线图：
xml/html code复制内容到剪贴板
nbsp;html> head> title>svgtitle> meta charset=utf-8 /> head> body> h2>html5 svg polylineh2> 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 版本，用 标签绘制一个椭圆，使用 标签定义一个 svg 径向渐变。
我们可以以类似的方式用 标签创建 svg 线性渐变。
xml/html code复制内容到剪贴板
nbsp;html> head> title>svgtitle> meta charset=utf-8 /> head> body> h2>html5 svg gradient ellipseh2> 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% style=stop-color:rgb(200,200,200); stop-opacity:0/> stop offset=100% style=stop-color:rgb(0,0,255); stop-opacity:1/> radialgradient> defs> ellipse cx=100 cy=50 rx=100 ry=50 style=fill:url(#gradient) /> svg> body> html>
在启用 html5 的最新版 firefox 中会生成如下结果：