文書構造に関する要素
- 構造上の要素 (Structural Element)
SVG文書の主要な構成を成すもの - 構造的に外部の要素 (Structurally External Element)
href属性でインラインまたは外部ファイルから要素を読み込めるもの - コンテナ要素 (Container Element)
他の描画要素を子要素として持てるもの
- 図形要素 (Shpe Element)
直線や曲線を組み合わせて定義される基本的な図形要素 - グラフィックを参照する要素 (Graphics Referencing Element)
use: 別途定義されているSVG要素をhref属性で参照するもの
image: 外部のリソース (PNG, JPEG, SVGなど)をhref属性で読み込むもの - グラフィック要素 (Graphics Element)
個別に描画されるもの
描画モデルに関する要素
- 描画可能要素 (Renderable Element)
描画ツリーに書き込まれるもの
ただし下記の場合は書き込まれない (除外される)- スタイル属性として display: none が指定されている
- <switch>の条件により選択されていない
- 他の描画されていない要素の子孫である
例: <defs>要素の定義に含まれている場合
- 決して描画されない要素 (Never-rendered Element)
描画ツリーに書き込まれないもの (個別に描画される対象ではない)
描画ツリー:
SVG要素はHTML要素と共にDOMツリーに収容される。SVG要素については、これとは別に描画ツリーが作られそこにも収容される。ただし全てのSVG要素が対象ではなく、直接描画されるものが対象となる。
決して描画されない要素であっても、<marker>要素や<mask>要素のように、他の描画可能要素の一部として間接的に描画に影響する要素もある。
- 描画される (されている) 要素 (Rendered Element)
描画ツリー上に存在する要素 - 描画されない (されていない) 要素 (Non-rendered Element)
描画ツリー上に存在しない要素 - 決して描画されない要素 (Never-rendered Element)
参考資料
Scalable Vector Graphics (SVG) 2
www.w3.org
Web 関連仕様 日本語訳
triple-underscore.github.io
SVG: スケーラブルベクターグラフィック | MDN
スケーラブルベクターグラフィック (SVG) は XML ベースのマークアップ言語で、二次元ベースのベクターグラフィックを記述します。
developer.mozilla.org
変更履歴
| 日付 | 内容 |
| 2024/08/25 | グラフィック要素に<use>要素も含むように修正 |
| 2024/07/13 | 初版リリース |
