<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 上檢視此頁面 • 報告此內容的問題