svg

この記事は翻訳が完了していません。 この記事の翻訳にご協力ください

svg 要素は、新しい座標系とビューポートを定義するコンテナです。これは SVG ドキュメントの最も外側の要素として使用されますが、SVG または HTML ドキュメントの中に SVG フラグメントを埋め込むためにも使用できます。

注意: xmlns 属性は SVG ドキュメントの最も外側の svg 要素にのみ必要です。内部の svg 要素や 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>

属性

baseProfile 非推奨 SVG 2
文書が要求する最小のSVG言語プロファイル
値の型: <string> ; 初期値: none; Animatable: no
contentScriptType 非推奨 SVG 2
SVGフラグメントで用いられる初期記述言語
値の型: <string> ; 初期値: application/ecmascript; アニメーション可否: no
contentStyleType 非推奨 SVG 2
SVGフラグメントで用いられる初期のスタイルシート言語
値の型: <string> ; 初期値: text/css; アニメーション可否: no
height
矩形ビューポートで表示される高さ (それ自身の座標系の高さではありません)
値の型: <length>|<percentage> ; 初期値: auto; アニメーション可否: yes
preserveAspectRatio
異なるアスペクト比での表示時に、svgフラグメントがどう変形されるか
値の型: (none| xMinYMin| xMidYMin| xMaxYMin| xMinYMid| xMidYMid| xMaxYMid| xMinYMax| xMidYMax| xMaxYMax) (meet|slice)? ; 初期値: xMidYMid meet; アニメーション可否: yes
version 非推奨 SVG 2
要素内の内容にどのバージョンのSVGが用いられるか
値の型: <number> ; 初期値: none; アニメーション可否: no
viewBox
The SVG viewport coordinates for the current SVG fragment.
値の型: <list-of-numbers> ; 初期値: none; アニメーション可否: yes
width
矩形ビューポートで表示される幅 (それ自身の座標系の幅ではありません)
値の型: <length>|<percentage> ; 初期値: auto; アニメーション可否: yes
x
SVGコンテナが表示されるx座標。最も外側のSVG要素では効果ありません。
値の型: <length>|<percentage> ; 初期値: 0; アニメーション可否: yes
y
SVGコンテナが表示されるy座標。最も外側のSVG要素では効果ありません。
値の型: <length>|<percentage> ; 初期値: 0; Animatable: yes

注意: SVG2で開始する場合には、x, y, width, height は、ジオメトリプロパティです。これは、これらの属性がCSSプロパティとして用いられることを意味します。

グローバル属性

コア属性
特に: id, tabindex
スタイル属性
class, style
条件処理属性
特に: requiredExtensions, systemLanguage
イベント属性
グローバルイベント属性, グラフィカルイベント属性, 文書イベント属性, 文書要素イベント属性
プレゼンテーション属性
特に: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility
Aria属性
aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role

使用上の注意

カテゴリーコンテナー要素 、 構造的要素
許可された内容任意の数、任意の順で以下の要素を配置可能:
アニメーション要素
説明的要素
図形要素
構造的要素
グラデーション要素
<a><altGlyphDef><clipPath><color-profile><cursor><filter><font><font-face><foreignObject><image><marker><mask><pattern><script><style><switch><text><view>

仕様

仕様 状態 コメント
Scalable Vector Graphics (SVG) 2
<svg> の定義
勧告候補
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
<svg> の定義
勧告 初期の定義

ブラウザの実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
svgChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1.5IE 完全対応 9Opera 完全対応 8Safari 完全対応 3WebView Android 完全対応 3Chrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 3Samsung Internet Android 完全対応 あり
baseProfile
非推奨
Chrome 完全対応 ありEdge 完全対応 ≤79Firefox ? IE ? Opera 完全対応 ありSafari ? WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android 完全対応 あり
contentScriptType
非推奨
Chrome 未対応 なしEdge 未対応 なしFirefox ? IE ? Opera 未対応 なしSafari ? WebView Android 未対応 なしChrome Android 未対応 なしFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android 未対応 なし
contentStyleType
非推奨
Chrome 未対応 なしEdge 未対応 なしFirefox ? IE ? Opera 未対応 なしSafari ? WebView Android 未対応 なしChrome Android 未対応 なしFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android 未対応 なし
heightChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1.5IE 完全対応 9Opera 完全対応 8Safari 完全対応 3WebView Android 完全対応 3Chrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 3Samsung Internet Android 完全対応 あり
preserveAspectRatioChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1.5IE 完全対応 9Opera 完全対応 8Safari 完全対応 3WebView Android 完全対応 3Chrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 3Samsung Internet Android 完全対応 あり
version
非推奨
Chrome 完全対応 ありEdge 完全対応 ≤79Firefox ? IE ? Opera 完全対応 ありSafari ? WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android 完全対応 あり
viewBoxChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1.5IE 完全対応 9Opera 完全対応 8Safari 完全対応 3WebView Android 完全対応 3Chrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 3Samsung Internet Android 完全対応 あり
widthChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1.5IE 完全対応 9Opera 完全対応 8Safari 完全対応 3WebView Android 完全対応 3Chrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 3Samsung Internet Android 完全対応 あり
xChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1.5IE 完全対応 9Opera 完全対応 8Safari 完全対応 3WebView Android 完全対応 3Chrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 3Samsung Internet Android 完全対応 あり
yChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1.5IE 完全対応 9Opera 完全対応 8Safari 完全対応 3WebView Android 完全対応 3Chrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 3Samsung Internet Android 完全対応 あり
zoomAndPan
非推奨非標準
Chrome 完全対応 ありEdge 完全対応 ≤79Firefox ? IE ? Opera 完全対応 ありSafari ? WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
非標準。ブラウザー間の互換性が低い可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
非推奨。新しいウェブサイトでは使用しないでください。
非推奨。新しいウェブサイトでは使用しないでください。