SVG代表小号calable V厄克托ģ raphics并且它是用于描述在XML 2D图形和图形应用程序的语言和XML然后通过SVG观察者呈现。
SVG对于矢量类型图（例如饼图，X，Y坐标系中的二维图等）最有用。
SVG成为W3C建议书14。2003年1月，您可以在SVG Specification中查看SVG规范的最新版本。
查看SVG文件
大多数网络浏览器都可以显示SVG，就像显示PNG，GIF和JPG一样。Internet Explorer用户可能必须安装Adobe SVG Viewer才能在浏览器中查看SVG。
在HTML5中嵌入SVG
HTML5允许使用<svg> ... </ svg>标签直接嵌入SVG ，该标签具有以下简单语法-
<svg xmlns = "http://www.w3.org/2000/svg">
...
</svg>
Firefox 3.7还引入了一个配置选项（“ about：config”），您可以使用以下步骤启用HTML5-
输入about：config中在Firefox地址栏中。
单击“我会小心，我保证！” 出现的警告消息上的按钮（并确保您遵守！）。
在页面顶部的过滤器栏中键入html5.enable。
当前将禁用它，因此单击它可将值切换为true。
现在，您的Firefox HTML5解析器应该已启用，并且您应该能够尝试以下示例。
HTML5-SVG圈
以下是SVG示例的HTML5版本，该示例将使用<circle>标签绘制一个圆圈-
现场演示
<!DOCTYPE html>
<html>
<head>
<style>
#svgelem {
position: relative;
left: 50%;
-webkit-transform: translateX(-20%);
-ms-transform: translateX(-20%);
transform: translateX(-20%);
}
</style>
<title>SVG</title>
<meta charset = "utf-8" />
</head>
<body>
<h2 align = "center">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>
<html>
<head>
<style>
#svgelem {
position: relative;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
</style>
<title>SVG</title>
<meta charset = "utf-8" />
</head>
<body>
<h2 align = "center">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>
如果您觉得本文的内容对您的学习有所帮助：
关键字：
SVG