以前にもタグの解説の中でSVGを紹介しましたが、見直してみるとだいぶ足りていなかったので、改めて解説しなおしたいと思います。
前回の記事は下記です。
解説というよりはタグと属性の一覧といった感じになりますが、少し補足を入れる形で紹介します。
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のタグについての出題されたことがありますので、対策として覚えておいてもよいかもしれません。
