<svg>

Baseline 广泛可用 *

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来，各浏览器均已提供此特性。

* 此特性的某些部分可能存在不同级别的支持。

<svg> SVG 元素是一个容器，它定义了一个新的坐标系和视口。它用作 SVG 文档的最外层元素，但也可以用在 SVG 或 HTML 文档中嵌入 SVG 片段。

注意： xmlns 属性仅在 SVG 文档的最外层 svg 元素上是必需的，或者在 XML 序列化的 HTML 文档中使用。对于内部的 svg 元素或 HTML 序列化的 HTML 文档则不需要。

使用语境

分类	容器元素，结构元素
允许内容	可包含任意数量、任意顺序的下列元素动画元素描述性元素形状元素结构元素渐变元素 `<a>`, `<clipPath>`, `<filter>`, `<foreignObject>`, `<image>`, `<marker>`, `<mask>`, `<pattern>`, `<script>`, `<style>`, `<switch>`, `<text>`, `<view>`

属性

baseProfile 已弃用: 文档所需的最低 SVG 语言配置文件。值类型：<string>；默认值：无；可动画：否
height: 矩形视口的显示高度。（不是其坐标系的高度。）值类型：<length> | <percentage>；默认值：auto；可动画：是
保持长宽比: 如果 svg 片段以不同的纵横比显示，则必须如何变形。值类型：(none | xMinYMin | xMidYMin | xMaxYMin | xMinYMid | xMidYMid | xMaxYMid | xMinYMax | xMidYMax | xMaxYMax) (meet | slice)？；默认值：xMidYMid meet；可动画：是
version 已弃用: 用于元素内部内容的 SVG 版本。值类型：<number>；默认值：无；可动画：否
视图框: 当前 SVG 片段的 SVG 视口坐标。值类型：<list-of-numbers>；默认值：无；可动画：是
width: 矩形视口的显示宽度。（不是其坐标系的宽度。）值类型：<length> | <percentage>；默认值：auto；可动画：是
x: SVG 容器的显示 x 坐标。对最外层的 svg 元素无影响。值类型：<length> | <percentage>；默认值：0；可动画：是
y: SVG 容器的显示 y 坐标。对最外层的 svg 元素无影响。值类型：<length> | <percentage>；默认值：0；可动画：是

注意： 从 SVG2 开始，x、y、width 和 height 是几何属性，这意味着这些属性也可以用作 CSS 属性。

DOM 接口

此元素实现了 SVGSVGElement 接口。

示例

嵌套的 `svg` 元素

此示例显示嵌套的 svg 元素不需要 xmlns 属性。

html,
body,
svg {
  height: 100%;
}

html

<svg
  viewBox="0 0 300 100"
  xmlns="http://www.w3.org/2000/svg"
  stroke="red"
  fill="grey">
  <circle cx="50" cy="50" r="40" />
  <circle cx="150" cy="50" r="4" />

  <svg viewBox="0 0 10 10" x="200" width="100">
    <circle cx="5" cy="5" r="4" />
  </svg>
</svg>

使用动态视口单位

在此示例中，svg 元素上的 height 和 width 属性使用动态视口值 60vmin 设置，它等同于视口宽度或高度的 60%，以较小者为准。

<div class="resizer">
  <iframe
    class="resized"
    srcdoc='

html

<svg
  viewBox="0 0 400 400"
  xmlns="http://www.w3.org/2000/svg"
  height="60vmin"
  width="60vmin">
  <rect x="0" y="0" width="50%" height="50%" fill="tomato" opacity="0.75" />
  <rect
    x="25%"
    y="25%"
    width="50%"
    height="50%"
    fill="slategrey"
    opacity="0.75" />
  <rect x="50%" y="50%" width="50%" height="50%" fill="olive" opacity="0.75" />
  <rect
    x="0"
    y="0"
    width="100%"
    height="100%"
    stroke="cadetblue"
    stroke-width="0.5%"
    fill="none" />
</svg>

  '></iframe>
</div>

.resizer {
  display: flex;
  margin: 1rem;
  padding: 0;
  resize: both;
  overflow: hidden;
  border: 5px dotted red;
  height: 400px;
}
.resizer > .resized {
  flex-grow: 1;
  margin: 0;
  padding: 0;
  border: 0;
}

要更改 iframe 的尺寸，请尝试从右下角调整虚线红框的大小。

规范

规范
Scalable Vector Graphics (SVG) 2 # NewDocument

浏览器兼容性

帮助改进 MDN

了解如何贡献

本页面最后修改时间为 ⁨2025年6月6日⁩，由 MDN 贡献者修改。

在 GitHub 上查看此页面 • 报告此内容的问题