svg

<svg>

该svg元素可用于将SVG片段嵌入当前文档（例如，HTML文档）中。这个SVG片段有自己的视口和坐标系统。

用法上下文

分类	集装箱元素，结构元素
允许的内容	任意数量的下列元素，以任何顺序排列：动画元素描述元素图形元素结构元素渐变元素<a>, <altGlyphDef>, <clipPath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignObject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view>

例

考虑下面的SVG图像（代表意大利国旗）：

<svg xmlns="http://www.w3.org/2000/svg" 
     width="150" height="100" viewBox="0 0 3 2">

  <rect width="1" height="2" x="0" fill="#008d46" />
  <rect width="1" height="2" x="1" fill="#ffffff" />
  <rect width="1" height="2" x="2" fill="#d2232c" />
</svg>

它可以包含在HTML5文档中，如下所示：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>HTML/SVG Example</title>
</head>

<body>

  <svg xmlns="http://www.w3.org/2000/svg"
       width="150" height="100" viewBox="0 0 3 2">
    <rect width="1" height="2" x="0" fill="#008d46" />
    <rect width="1" height="2" x="1" fill="#ffffff" />
    <rect width="1" height="2" x="2" fill="#d2232c" />
  </svg>

</body>
</html>

属性

全局属性

Conditional processing attributes »

Core attributes »

Document event attributes »

Graphical event attributes »

Presentation attributes »

class

style

externalResourcesRequired

具体属性

version

baseProfile

width

height

preserveAspectRatio

contentScriptType

contentStyleType

viewBox

DOM接口

这个元素实现了SVGSVGElement接口。

产品规格

Specification	Status	Comment
Scalable Vector Graphics (SVG) 2The definition of '<svg>' in that specification.	Candidate Recommendation
Scalable Vector Graphics (SVG) 1.1 (Second Edition)The definition of '<svg>' in that specification.	Recommendation	Initial definition

浏览器兼容性

Feature	Chrome	Edge	Firefox (Gecko)	IE	Opera	Safari
Basic support	1.0	(Yes)	1.5 (1.8)	9.0	8.0	3.0.4

Feature	Android	Edge	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	3.0	(Yes)	1.0 (1.8)	No support	(Yes)	3.0.4