svg

This translation is incomplete. この記事の翻訳にご協力ください

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
The minimum SVG language profile that the document requires.
Value type: <string> ; Default value: none; Animatable: no
contentScriptType 非推奨 SVG 2
The default scripting language used by the SVG fragment.
Value type: <string> ; Default value: application/ecmascript; Animatable: no
contentStyleType 非推奨 SVG 2
The default style sheet language used by the SVG fragment.
Value type: <string> ; Default value: text/css; Animatable: no
height
The displayed height of the rectangular viewport. (Not the height of its coordinate system.)
Value type: <length>|<percentage> ; Default value: auto; Animatable: yes
preserveAspectRatio
How the svg fragment must be deformed if it is displayed with a different aspect ratio.
Value type: (none| xMinYMin| xMidYMin| xMaxYMin| xMinYMid| xMidYMid| xMaxYMid| xMinYMax| xMidYMax| xMaxYMax) (meet|slice)? ; Default value: xMidYMid meet; Animatable: yes
version 非推奨 SVG 2
Which version of SVG is used for the inner content of the element.
Value type: <number> ; Default value: none; Animatable: no
viewBox
The SVG viewport coordinates for the current SVG fragment.
Value type: <list-of-numbers> ; Default value: none; Animatable: yes
width
The displayed width of the rectangular viewport. (Not the width of its coordinate system.)
Value type: <length>|<percentage> ; Default value: auto; Animatable: yes
x
The displayed x coordinate of the svg container. No effect on outermost svg elements.
Value type: <length>|<percentage> ; Default value: 0; Animatable: yes
y
The displayed y coordinate of the svg container. No effect on outermost svg elements.
Value type: <length>|<percentage> ; Default value: 0; Animatable: yes

Note: Starting with SVG2, x, y, width, and height are Geometry Properties, meaning these attributes can also be used as CSS properties.

グローバル属性

Core Attributes
Most notably: id, tabindex
Styling Attributes
class, style
Conditional Processing Attributes
Most notably: requiredExtensions, systemLanguage
Event 属性
Global event attributes, Graphical event attributes, Document event attributes, Document element event attributes
Presentation Attributes
Most notably: 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 ? Firefox ? 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 ? Firefox ? 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 完全対応 あり
zoomAndPanChrome 完全対応 ありEdge ? Firefox ? IE ? Opera 完全対応 ありSafari ? WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
非推奨。新しいウェブサイトでは使用しないでください。
非推奨。新しいウェブサイトでは使用しないでください。