如何使用HTML5进行SVG矢量图形替换(html5,svg,web开发)

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，下面是简单的语法：

XML / HTML代码将内容复制到文本

< svg xmlns = “ http://www.w3.org/2000/svg” >

...

</ svg >

HTML5-SVG圆

下面是一个SVG示例的HTML5版本，用<circle>标签放置一个圆：

XML / HTML代码将内容复制到文本

<！DOCTYPE html >

<头>

< title > SVG </ title >

< meta charset = “ utf-8” />

</头>

<身体>

< h3 > HTML5 SVG圈子</ h3 >

< svg id = “ svgelem” height = “ 200” xmlns = “ https://qixn-bj.oss-cn-beijing.aliyuncs.com/seosjz/uploadfile/all/jpg/i1b2fgzlypq.jpg（223&times;186）

HTML5-SVG矩形

下面是一个SVG示例的HTML5版本，用<rect>标签放置一个矩形：

XML / HTML代码将内容复制到文本

<！DOCTYPE html >

<头>

< title > SVG </ title >

< meta charset = “ utf-8” />

</头>

<身体>

< h3 > HTML5 SVG矩形</ h3 >

< svg id = “ svgelem” height = “ 200” xmlns = “ https://qixn-bj.oss-cn-beijing.aliyuncs.com/seosjz/uploadfile/all/jpg/2pzfewdrmy3.jpg（316&times;152）

HTML5-SVG

线条下面是一个SVG示例的HTML5版本，用<line>标签放置一个线条：

XML / HTML代码将内容复制到文本

<！DOCTYPE html >

<头>

< title > SVG </ title >

< meta charset = “ utf-8” />

</头>

<身体>

< h3 > HTML5 SVG行</ h3 >

< svg id = “ svgelem” height = “ 200” xmlns = “ https://qixn-bj.oss-cn-beijing.aliyuncs.com/seosjz/uploadfile/all/jpg/kmkbnga2hzo.jpg（217&times;159）

HTML5-SVG椭圆

下面是一个SVG示例的HTML5版本，用<ellipse>标签放置一个椭圆：

XML / HTML代码将内容复制到文本

<！DOCTYPE html >

<头>

< title > SVG </ title >

< meta charset = “ utf-8” />

</头>

<身体>

< h3 > HTML5 SVG椭圆</ h3 >

< svg id = “ svgelem” height = “ 200” xmlns = “ https://qixn-bj.oss-cn-beijing.aliyuncs.com/seosjz/uploadfile/all/jpg/dj52qsxxrpf.jpg（225&times;148）

HTML5-SVG

顶部下面是一个SVG示例的HTML5版本，用<polygon>标签放置一个附加：

XML / HTML代码将内容复制到文本

<！DOCTYPE html >

<头>

< title > SVG </ title >

< meta charset = “ utf-8” />

</头>

<身体>

< h3 > HTML5 SVG多边形</ h3 >

< svg id = “ svgelem” height = “ 200” xmlns = “ https://qixn-bj.oss-cn-beijing.aliyuncs.com/seosjz/uploadfile/all/jpg/ews1eg053jr.jpg（310&times;118）

HTML5-SVG折线

下面是一个SVG示例的HTML5版本，用<polyline>标签放置一个折线图：

XML / HTML代码将内容复制到文本

<！DOCTYPE html >

<头>

< title > SVG </ title >

< meta charset = “ utf-8” />

</头>

<身体>

< h3 > HTML5 SVG折线</ h3 >

< svg id = “ svgelem” height = “ 200” xmlns = “ https://qixn-bj.oss-cn-beijing.aliyuncs.com/seosjz/uploadfile/all/jpg/1qicyomqm0k.jpg（245&times;114）

HTML5-SVG

滚动下方是一个SVG示例的HTML5版本，用<ellipse>标签放置一个椭圆，使用<radialGradient>标签定义一个SVG径向尺寸。

我们可以以类似的方式用<linearGradient>标签创建SVG线性变量。

XML / HTML代码将内容复制到文本

<！DOCTYPE html >

<头>

< title > SVG </ title >

< meta charset = “ utf-8” />

</头>

<身体>

< h3 > HTML5 SVG渐变椭圆</ h3 >

< 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 >

<椭圆cx = “ 100” cy = “ 50” rx = “ 100” ry = “ 50”

样式= “ fill：url（#gradient）” />

</ svg >

</ body >

</ html >