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

以前にもタグの解説の中で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のタグについての出題されたことがありますので、対策として覚えておいてもよいかもしれません。

スポンサーリンク

この記事が気に入ったら
フォローしよう

最新情報をお届けします

Twitterでフォローしよう

おすすめの記事

 

スポンサードリンク