<svg>
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
* Some parts of this feature may have varying levels of support.
<svg> は SVG の要素で、新しい座標系とビューポートを定義するコンテナーです。これは SVG 文書の最も外側の要素として使用されますが、SVG または HTML 文書の中に SVG の断片を埋め込むためにも使用できます。
メモ: xmlns 属性は SVG 文書の最も外側の svg 要素、または XML シリアライズによる HTML 文書内にのみ必要です。内部の svg 要素や HTML シリアライズによる HTML 文書の内部には不要です。
使用コンテキスト
属性
baseProfile非推奨;-
この文書が要求する最小の SVG 言語プロファイルです。 値の型: <string>、デフォルト値: なし、アニメーション: 不可
height-
矩形ビューポートで表示される高さです。（それ自身の座標系の高さではありません。） 値の型: <length>|<percentage>、デフォルト値:
auto、アニメーション: 可 preserveAspectRatio-
svgフラグメントが、異なるアスペクト比での表示時にどう変形されるか。 値の型: (none|xMinYMin|xMidYMin|xMaxYMin|xMinYMid|xMidYMid|xMaxYMid|xMinYMax|xMidYMax|xMaxYMax) (meet|slice)?、デフォルト値:xMidYMid meet、アニメーション: 可 version非推奨;-
要素の内部の内容にどのバージョンの SVG が用いられるか。 値の型: <number>、デフォルト値: none、アニメーション: 不可
viewBox-
現在の SVG の断片の SVG ビューポート座標。 値の型: <list-of-numbers>。、デフォルト値: none、アニメーション: 可
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 属性が必要ないことを示しています。
<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 属性は、ビューポートの幅または高さの小さい方の 60% に相当する動的ビューポート値 60vmin を使用して設定されます。
<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 の寸法を変更するには、右下の赤い点線の枠のサイズを変更してみてください。
仕様書
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # NewDocument |