SVGのタグと属性の解説【ウェブデザイン技能検定 1級学科範囲】

以前にもタグの解説の中でSVGを紹介しましたが、見直してみるとだいぶ足りていなかったので、改めて解説しなおしたいと思います。

前回の記事は下記です。

HTMLの要素とその子要素の制約についての解説【ウェブデザイン技能検定 1級学科範囲】

2024.6.24

ウェブデザイン技能検定の過去問をもとに、HTMLの各要素が持つ子要素の制約について解説します。特に、<dl>, <table>, <ul>, &...

解説というよりはタグと属性の一覧といった感じになりますが、少し補足を入れる形で紹介します。

SVGの属性とタグの解説

SVG（Scalable Vector Graphics）は、ベクター形式のグラフィックスを描画するためのXMLベースのフォーマットです。SVGを使用すると、高解像度でスケーラブルなグラフィックスをウェブ上で簡単に作成できます。この記事では、SVGの主なタグと属性について詳しく解説します。

主なタグ

<svg>: SVGのルート要素

SVGドキュメントを定義するルート要素です。

• 属性:
  • width: SVGキャンバスの幅。
  • height: SVGキャンバスの高さ。
  • xmlns: 名前空間を指定。
  • viewBox: ビューポートのサイズと位置を指定。

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
  <!-- SVG要素をここに追加 -->
</svg>

<g>: グループ要素

複数のSVG要素をグループ化するために使用されます。

• 属性:
  • transform: グループ内の要素に対する変形を指定。
  • fill: グループ内の要素の塗りつぶし色。
  • stroke: グループ内の要素の線の色。

<g transform="translate(50,50)">
  <!-- グループ化されたSVG要素 -->
</g>

<rect>: 長方形を描画

長方形を描画するための要素です。

• 属性:
  • x: 長方形の左上のx座標。
  • y: 長方形の左上のy座標。
  • width: 長方形の幅。
  • height: 長方形の高さ。
  • rx: 角のx方向の半径。
  • ry: 角のy方向の半径。
  • fill: 塗りつぶしの色。
  • stroke: 枠線の色。

<rect x="10" y="10" width="100" height="50" fill="gray" stroke="black"/>

<circle>: 円を描画

円を描画するための要素です。

• 属性:
  • cx: 円の中心のx座標。
  • cy: 円の中心のy座標。
  • r: 円の半径。
  • fill: 塗りつぶしの色。
  • stroke: 枠線の色。

<circle cx="50" cy="50" r="40" fill="gray" stroke="black"/>

<ellipse>: 楕円を描画

楕円を描画するための要素です。

• 属性:
  • cx: 楕円の中心のx座標。
  • cy: 楕円の中心のy座標。
  • rx: x方向の半径。
  • ry: y方向の半径。
  • fill: 塗りつぶしの色。
  • stroke: 枠線の色。

<ellipse cx="80" cy="50" rx="50" ry="25" fill="gray" stroke="black"/>

<line>: 直線を描画

直線を描画するための要素です。

• 属性:
  • x1: 直線の始点のx座標。
  • y1: 直線の始点のy座標。
  • x2: 直線の終点のx座標。
  • y2: 直線の終点のy座標。
  • stroke: 線の色。

<line x1="10" y1="10" x2="100" y2="100" stroke="black"/>

<polyline>: 複数の連続する直線を描画

連続する直線を描画するための要素です。

• 属性:
  • points: 直線の頂点のリスト（各頂点はカンマで区切り、頂点間はスペースで区切る）。
  • fill: 塗りつぶしの色。
  • stroke: 枠線の色。

<polyline points="0,0 50,25 50,75 100,100" fill="none" stroke="black"/>

<polygon>: 複数の点を結んで閉じた図形を描画

多角形を描画するための要素です。

• 属性:
  • points: 多角形の頂点のリスト。
  • fill: 塗りつぶしの色。
  • stroke: 枠線の色。

<polygon points="50,150 100,100 150,150" fill="gray" stroke="black"/>

<path>: 複雑な形状を描画

パスデータを指定して複雑な形状を描画するための要素です。

• 属性:
  • d: パスデータ。
  • fill: 塗りつぶしの色。
  • stroke: 枠線の色。

<path d="M10 10 H 90 V 90 H 10 Z" fill="gray" stroke="black"/>

<text>: テキストを描画

テキストを描画するための要素です。

• 属性:
  • x: テキストの左端のx座標。
  • y: テキストのベースラインのy座標。
  • font-family: フォントファミリ。
  • font-size: フォントサイズ。
  • fill: テキストの色。

<text x="10" y="50" font-family="Arial" font-size="24" fill="black">Hello, SVG!</text>

主な属性

• x: 要素のx座標を指定します。
• y: 要素のy座標を指定します。
• width: 要素の幅を指定します。
• height: 要素の高さを指定します。
• cx: 円や楕円の中心のx座標を指定します。
• cy: 円や楕円の中心のy座標を指定します。
• r: 円の半径を指定します。
• rx: 楕円のx方向の半径を指定します。
• ry: 楕円のy方向の半径を指定します。
• fill: 塗りつぶしの色を指定します。
• stroke: 線の色を指定します。
• transform: 要素の変形を指定します（例：rotate, translate, scale）。
• d: パス要素のデータを指定します。

サンプルコード

<svg version="1.1" baseProfile="full" width="200" height="200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
  <!-- 長方形 -->
  <rect x="20" y="20" width="160" height="60" fill="gray" stroke="black" />
  <!-- 円 -->
  <circle cx="150" cy="150" r="30" fill="gray" stroke="black" />
  <!-- 三角形 -->
  <polygon points="50,150 100,100 150,150" fill="gray" stroke="black" />
</svg>

これらのタグや属性を使用して、さまざまな図形やテキストをSVGで描画することができます。
SVGは、スケーラブルで高品質なグラフィックスを作成するための強力なツールです。

基本的にはIllustratorから直接コードを取ってきてしまったり、svgファイルをテキストエディタなどで開いてコードを取ってきたりと、0から書くことは基本的にないとは思いますが、仕組みを理解しておくことでCSSやjsにてアニメーションを付けることなども簡単にできるようになります。

普通の画像ではできないことができ、尚且つ容量も重たくないことがSVGの強みだと思います。
グラデーションやフィルター・透過系には弱いですが、この記事が活用するきっかけになってくれたらうれしいです。

また、ウェブデザイン技能検定でもSVGのタグについての出題されたことがありますので、対策として覚えておいてもよいかもしれません。