SVG代表小型可缩放的V图形，它是一种用于描述可扩展标记语言2D图形和图形应用程序的语言，然后由SVG观察者呈现。

SVG最适用于矢量型图形(如饼图、X、Y坐标系下的二维图形等)。).

SVG成为W3C推荐14。2003年1月，可以在SVG规范中查看最新版本的SVG规范。

查看SVG文件

大多数网络浏览器可以显示像PNG，GIF和JPG一样的SVG。互联网浏览器的用户可能需要安装Adobe SVG查看器才能在浏览器中查看SVG。

在HTML5中嵌入SVG

HTML5允许使用svg直接嵌入SVG./svg标记，它具有以下简单语法-

SVG xmlns=' http://www . w3 . org/2000/SVG '

.

/svg

Firefox 3.7还引入了一个配置选项(“关于：配置”)。您可以使用以下步骤来启用HTML5-

在Firefox地址栏输入about:config。

点击“我会小心的，我保证！”在出现的警告信息上按下按钮(并确保你遵循它！)。

在页面顶部的过滤器栏中键入html5.enable。

它当前已被禁用，因此单击它可将该值切换为真。

到目前为止，您的Firefox HTML5解析器应该已经启用，您应该可以尝试以下示例。

HTML5-SVG圈

以下是SVG示例的HTML5版本，它将使用圆圈标记绘制一个圆圈-

现场演示

！声明文档类型

超文本标记语言

头

风格

#svgelem {

相对位置：

左侧：50%；

-web kit-transform : Translatex(-20%)；

-ms-transform : Translatex(-20%)；

transform : Translatex(-20%)；

}

/style

标题SVg/标题

meta charset='utf-8' /

/head

身体

h2对齐='中心' HTML5 SVG圆/h2

SVG id=' svgelem ' height=' 200 ' xmlns=' http://www . w3 . org/2000/SVG '

圆圈id=' red circle ' CX=' 50 ' cy=' 50 ' r=' 50 ' fill=' red '/

/svg

/body

/html

这将在启用HTML5的最新版本Firefox中产生以下结果。

HTML5-SVG矩形

下面是SVG示例的HTML5版本，它将使用rect标记绘制一个矩形

现场演示

！声明文档类型

超文本标记语言

头

风格

#svgelem {

相对位置：

左侧：50%；

-web kit-transform : Translatex(-50%)；

-ms-transform : Translatex(-50%)；

transform : Translatex(-50%)；

}

/style

标题SVg/标题

meta charset='utf-8' /

/head

身体

h2对齐='中心' HTML5 SVG矩形/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