这篇文章主要讲解了“如何使用HTML5进行SVG矢量图形替换”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“如何使用HTML5进行SVG矢量图形替换”吧！
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 = “ http://www.w3.org/2000/svg” >
< circle id = “ redcircle” cx = “ 50” cy = “ 50” r = “ 50” fill = “ red” />
</ svg >
</ body >
</ html >
在启用HTML5的最新版本FireFox中会生成如下结果：
2016219112130340.jpg（223×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 = “ http://www.w3.org/2000/svg” >
< rect id = “ redrect”宽度= “ 300”高度= “ 100” fill = “ red” />
</ svg >
</ body >
</ html >
在启用HTML5的最新版本FireFox中会生成如下结果：
2016219112200272.jpg（316×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 = “ http://www.w3.org/2000/svg” >
<行x1 = “ 0” y1 = “ 0” x2 = “ 200” y2 = “ 100”
style = “ stroke：red; stroke-width：2” />
</ svg >
</ body >
</ html >
您可以使用style属性给它设置额外的样式信息，某些笔画，填充色，笔画宽度等等。
在启用HTML5的最新版本FireFox中会生成如下结果：
2016219112220725.jpg（217×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 = “ http://www.w3.org/2000/svg” >
<椭圆cx = “ 100” cy = “ 50” rx = “ 100” ry = “ 50” fill = “红色” />
</ svg >
</ body >
</ html >
在启用HTML5的最新版本FireFox中会生成如下结果：
2016219112240763.jpg（225×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 = “ http://www.w3.org/2000/svg” >
<多边形点= “ 20,10 300,20，170,50”填充= “红色” />
</ svg >
</ body >
</ html >
在启用HTML5的最新版本FireFox中会生成如下结果：
2016219112258796.jpg（310×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 = “ http://www.w3.org/2000/svg” >
<折线点= “ 0,0 0,20 20,20 20,40 40,40 40,60”填充= “红色” />
</ svg >
</ body >
</ html >
在启用HTML5的最新版本FireFox中会生成如下结果：
2016219112318049.jpg（245×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 >
感谢各位的阅读，以上就是“如何使用HTML5进行SVG矢量图形替换”的内容了，经过本文的学习后，相信大家对如何使用HTML5进行SVG矢量图形替换这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！
