【完全版】SVGタグとは何か？使えるタグや使い方を実例で解説(初心者向け)|circle, rect, line, polygon, polyline, ellipse, pathタグ

Webサイトでロゴやアイコンを表示する際、画像の読み込みに時間がかかったり、拡大するとぼやけてしまったりして、困った経験はありませんか？

SVGは、そんな悩みを解決できる「拡大・縮小しても劣化しない」特別な画像形式です。HTMLに直接コードを記述できるため、Webサイトの表示速度向上にもつながります。

この記事では、SVGタグの基本から、よく使われるタグ、そして具体的な使い方まで、初心者の方にも分かりやすく解説します。SVGをマスターして、ワンランク上のWebサイトを制作しましょう！

SVGとは何か？

SVGとは、Scalable Vector Graphics（拡張可能なベクター形式のグラフ）の略で、拡大・縮小しても画質が劣化しない画像形式です。

写真に使われるJPEGやPNGとは異なり、数学的なデータ（点、線、図形の色や位置など）をもとに描画されます。つまり、JPEGやPNGのような画像をドット（ピクセル）の集まりとして扱うのではなく、「この位置からこの位置まで直線を引く」という命令で描きます。

内部的にはXMLというテキスト形式で書かれています。そのため、メモ帳などのテキストエディタで直接開いて、コードを編集することで色や形を変えることができます。

SVGで使える主なタグの一覧

SVGタグの中では描画したい図形に応じて様々なタグが用意されています。

以下で一つ一つ実例を踏まえて解説していきます。

SVGの注意点！デフォルトの描画エリアが決まっている

SVGタグで図形を描画できるエリアは、多くのブラウザで幅300px、高さ150pxになっています。

図形がこのエリアよりも大きかったり描画の場所がエリアからはみ出していると図形がはみ出してしまいます。

この場合は、widthとheight属性で適切な描画エリアを指定する必要があります。

詳細は下記をご参考ください。

【HTML】SVGタグの上部や下部が見切れるのはなぜ？原因と対処法

SVGは超軽量で拡大/縮小しても劣化しないためWEB関連の図形を描くのに非常に適しています。描き方もとても簡単で、規則性に沿ってタグや位置、長さなどを定めるだけです。ところ、SVGを書いているときに図形が見切れてしまうことがあります。例えば...

prograshi.com

circleタグ（cx, xy, fill）

circleタグは円を描画するものです。

中心座標の位置を画面右上（または親タグの右上）の座標を(0,0)として「cx」、「cy」で指定します。

円の大きさは半径「r」で指定します。fill属性で図形を埋める色を指定します。

例えば、半径40pxの水色の円を、画面右上から(50px, 50px)の座標に中心がくるように描きたい場合は以下のようになります。

<svg>
  <circle cx="50" cy="50" r="40" fill="lightblue" />
</svg>

半径や中心座標、色を簡単に変更することができます。

また、一つのSVGタグの中に複数の図形を描くこともできます。

<svg width="600" height="340">
  <circle cx="90" cy="90" r="80" fill="red" />
  <circle cx="220" cy="200" r="120" fill="skyblue" />
  <circle cx="280" cy="60" r="80" fill="hotpink" />
</svg>

なお、埋めている色はfill-opacityを使うと透過度を設定することができます。

<svg width="600" height="340">
  <circle cx="90" cy="90" r="80" fill="red" />
  <circle cx="220" cy="200" r="120" fill="skyblue" fill-opacity="0.8" />
  <circle cx="280" cy="60" r="80" fill="hotpink" fill-opacity="0.2" />
</svg>

<svg>
  <circle cx="50" cy="50" r="40" fill="lightblue" stroke="red" stroke-width="3" />
</svg>

<svg>
  <circle cx="50" cy="50" r="40" fill="lightblue" stroke="red" stroke-width="8" stroke-opacity="0.1" />
</svg>

<svg>
  <circle cx="50" cy="50" r="40" fill="lightpink" stroke="red" stroke-width="20" stroke-dasharray="5, 10"/>
</svg>

rectタグ(x, y, fill)

rectタグは四角形を描画するものです。

xとy属性で左上の始点の座標（x, y）を指定します。

widthとheight属性で幅と高さを指定します。fill属性で図形を埋める色を指定します。

例えば、始点を画面左上から(10px, 10px)、長さ80pxの正方形を描く場合は以下のようになります。

<svg>
  <rect x="10" y="10" width="80" height="80" fill="lightgreen" />
</svg>

長方形を描くことや、circleタグと同じく、複数の図形を描くこともできます。

<svg width="600" height="340">
  <rect x="10" y="10" width="300" height="80" fill="orange" />
  <rect x="90" y="50" width="40" height="220" fill="lightgreen" />
  <rect x="110" y="160" width="140" height="80" fill="lightpink" />
</svg>

lineタグ（x1,y1,x2,y2,stroke,stroke-width,stroke-linecap,stroke-dasharray)

lineタグは直線を描くことができます。水平や垂直だけでなく、斜めの線も描くことができます。

設定できる属性は比較的たくさんあります。

必須の属性（x1,y1,x2,y2, stroke）

その中でも必須なのが、始点を指定する(x1,y1)と終点を指定する(x2,y2)とstrokeです。

stroke属性は色を指定します。

例えば水平方向に直線を引きたければ、y1とy2が同じ値にします。

<svg width="200" height="100">
  <line x1="50" y1="20" x2="150" y2="20" stroke="red"/>
</svg>

stroke-width属性｜線の太さ

stroke-width属性を使うことで線の太さを指定することができます。

例えば、stroke-widthを18にすると、線の太さが18pxになります。

<svg width="200" height="100">
  <line x1="50" y1="20" x2="150" y2="20" stroke="red" stroke-width="18"/>
</svg>

stroke-linecap｜線の端の形状

stroke-linecap属性は線の端の形状を指定することができます。指定できる値は次の３つです。

• butt (デフォルト): 線の終端でスパッと切れる。
• round: 線の終端が丸くなる（太さ分だけ突き出る）。
• square: 線の終端が四角くなる（太さ分だけ突き出る）。

<svg width="200" height="200">
  <line x1="20" y1="20" x2="150" y2="20" stroke="pink" stroke-width="18" stroke-linecap="butt"/>
  <line x1="20" y1="60" x2="150" y2="60" stroke="lime" stroke-width="18" stroke-linecap="round"/>
  <line x1="20" y1="100" x2="150" y2="100" stroke="lightblue" stroke-width="18" stroke-linecap="square"/>
</svg>

stroke-dasharray｜破線

stroke-dasharray属性は破線（点線）にしたいときに使います。値は「線の長さ, 隙間の長さ」のペアで指定します。

例えば、5pxの線と10pxの隙間を交互に繰り返したい場合はstroke-dasharray="5, 10"とします。なお、値を一つの数値で記述した場合は線の長さと隙間の両方に指定した長さが適用されます。

<svg width="200" height="200">
  <line x1="20" y1="20" x2="150" y2="20" stroke="pink" stroke-width="18" stroke-linecap="butt" stroke-dasharray="5"/>
  <line x1="20" y1="60" x2="150" y2="60" stroke="orange" stroke-width="18" stroke-linecap="butt" stroke-dasharray="15, 5"/>
  <line x1="20" y1="100" x2="150" y2="100" stroke="lime" stroke-width="18" stroke-linecap="round" stroke-dasharray="5, 25"/>
  <line x1="20" y1="140" x2="150" y2="140" stroke="lightblue" stroke-width="18" stroke-linecap="square" stroke-dasharray="10, 30"/>
</svg>

※注意点｜stroke-linecapで破線にならなくなる

stroke-linecap属性で、roundかsquareを指定している場合、破線で区切った両端に指定した図形の分太さが描かれます。

このため、stroke-dasharrayの隙間が狭いと両隣の線がくっついてしまい、破線になっていないように見えます。（実際は破線になっているのですが、くっついているだけです）

例えば、以下の３つの線は全てstroke-dasharray属性が指定してあります。

<svg width="200" height="200">
  <line x1="20" y1="60" x2="150" y2="60" stroke="orange" stroke-width="18" stroke-linecap="round" stroke-dasharray="5,5"/>
  <line x1="20" y1="100" x2="150" y2="100" stroke="lime" stroke-width="18" stroke-linecap="round" stroke-dasharray="5, 15"/>
  <line x1="20" y1="140" x2="150" y2="140" stroke="lightblue" stroke-width="18" stroke-linecap="round" stroke-dasharray="5, 25"/>
</svg>

stroke-dashoffset｜破線の開始位置をずらす

stroke-dashoffsetは、stroke-dasharrayとセットで使います。

stroke-dasharrayでセットしたパターンがどこから始まるかを指定します。

例えば、stroke-dasharray=”40, 8″の場合、繰り返しパターンは48pxごとに繰り返されます。

これに、stroke-dashoffset=”10″をつけると、10pxずれて開始します。（破線全体が左に10px移動します）

例えば、上から順にstroke-dashoffsetなし、stroke-dashoffset=”10″、stroke-dashoffset=”30″とした場合以下のようになります。

<svg width="200" height="200">
  <line x1="20" y1="20" x2="200" y2="20" stroke="pink" stroke-width="18" stroke-linecap="butt" stroke-dasharray="40, 8"/>
  <line x1="20" y1="60" x2="200" y2="60" stroke="orange" stroke-width="18" stroke-linecap="butt" stroke-dasharray="40, 8" stroke-dashoffset="10" />
  <line x1="20" y1="100" x2="200" y2="100" stroke="lime" stroke-width="18" stroke-linecap="butt" stroke-dasharray="40, 8"  stroke-dashoffset="30"/>
</svg>

線をおしゃれに動かすアニメーション

CSSアニメーションと「stroke-dashoffset」「stroke-dasharray」を組み合わせると、線をオシャレに動かすことができます。

詳細は下記をご参考ください。

【SVGタグ】lineタグでstroke-dasharrayとstroke-dashoffsetを使って線を動かす方法｜アニメーションで動く線を描く実例

SVGタグでlineタグを使うと軽量で縮小/拡大でギザギザにならないキレイな線を描くことができます。lineタグには様々なCSSが用意されており、その中のdasharrayとstroke-dashoffsetを上手く使うことで線を動かすこと...

prograshi.com

polygonタグ（points,fill, strokeなど）

polygonタグを使うと、複数の点を結んだ多角形を作ることができます。

points属性で各頂点座標（x, y）を指定していきます。

三角形をつくる

例えば、３つの頂点を指定すれば三角形になります。なお、fillはデフォルトでは#000000（black）になります。

<svg>
  <polygon points="50,10 90,90 10,90" fill="gold" />
</svg>

ひし形を作る

頂点を4つにすれば四角形やひし形を作ることができます。

なお、strokeで線の色、stroke-widthで線の幅を指定することができます。線の書式で使える属性はlineタグで使えるものと同様です。

<svg>
  <polygon points="80,10 160,60 80,110, 10,60" 
           fill="lightpink"
           stroke="gold" stroke-width="8"/>
</svg>

polygonタグの応用（星を描く、線を動かす）

polygonタグを使うと星を描いたり、描いた線を動かすことができます。

詳細は下記をご参考ください。

【SVGタグ】polygonタグの使い方実例｜星や三角形の線を動かす方法と多角形の作り方

polygonタグとは何か？svgタグのpolygonタグは、複数の頂点を直線で結んだ「閉じた多角形」を描くための要素です。三角形や五角形、星形などを作りたい場合に使います。polygonタグの使い方（pointsとfill）polygon...

prograshi.com

ellipseタグ（cx, cy, rx, ry）

ellipseタグは、楕円や円を描くことができます。中心点と2つの半径を指定することで、図形を定義します。

正円の書き方

正円を描くには、rxとryを同じ値にします。

<svg width="100" height="100">
  <ellipse cx="50" cy="50" rx="25" ry="25" fill="limegreen" />  
</svg>

楕円の書き方

rxとryに異なる値を設定すると、楕円になります。

<svg width="200" height="200">
  <ellipse cx="100" cy="100" rx="80" ry="40" fill="skyblue" />
</svg>

豆知識：ellipseとは何か？

ellipse は、日本語で「楕円（だえん）」を意味します。数学や天文学で使われる用語で、円を押しつぶしたり、引き伸ばしたりしたような形を指します。

「ellipse」と似た言葉に「oval」がありますが、それぞれで厳密な違いがあります。

• ellipse: 数学的な定義に基づいた正確な楕円形（例：惑星の軌道）
• oval: 卵形やラグビーボールのような、より一般的な楕円形

polylineタグ（points, stroke, stroke-width）

polylineは、複数の点を順番に直線で結んで、開いた線を描くためのタグです。折れ線グラフや、単純な多角形を描くのに適しています。

主な属性は以下を使用します。

折れ線を描く

polylineを使うと折れ線を描くことができます。

<svg width="200" height="200">
  <polyline 
    points="10,10 50,100 100,20 150,150 190,50" 
    stroke="purple" 
    stroke-width="3" 
    fill="none" 
  />
</svg>

なお、fill=”none”を指定しないと黒くぬりつぶされてしまいます。

<svg width="200" height="200">
  <polyline 
    points="10,10 50,100 100,20 150,150 190,50" 
    stroke="purple" 
    stroke-width="3" 
  />
</svg>

迷路のような図形

迷路のような図形を作ることもできます。

<svg width="300" height="200">
  <polyline points="10,10 290,10 290,190 10,190 10,50 250,50 250,150 50,150 50,90 200,90"
            fill="none" stroke="black" stroke-width="3" stroke-linejoin="round"/>
</svg>

心電図

アニメーションを指定することで、心電図のような動きを作成することもできます。

<svg width="400" height="100" viewBox="0 0 400 100">
  <polyline points="0,50 20,50 40,10 60,90 80,50 300,50"
            fill="none" stroke="blue" stroke-width="8"
            stroke-dasharray="800" stroke-dashoffset="0">
    <animate attributeName="stroke-dashoffset" from="0" to="-800" dur="3s" repeatCount="indefinite" />
  </polyline>
</svg>

pathタグ

pathタグは、「1本でなんでも描ける」万能ペンです。直線だけでなく、曲線や複雑な図形も、すべて表現できます。（SVGの中で最も強力）

d属性に書くコマンド（命令）で描きます。例えば、以下のコードで三角形が描けます。

<svg width="160" height="120" viewBox="0 0 160 120">
  <path d="M10 100 L80 20 L150 100 Z"
        fill="#ffd54f" stroke="#333" stroke-width="2"/>
</svg>

使い方は少し複雑ですが、慣れると非常に便利です。

なお、pathでメインとなるd属性以外の属性は、stroke, storoke-width, fill など他のタグと同様です。

d属性の主なコマンド

pathタグを理解する上で絶対に欠かせないのがd属性と、その中の記述方法（コマンド/命令）です。

d属性で使えるコマンドには以下のようなものがあります。

大文字と小文字

d属性のコマンドには「大文字」と「小文字」があります。（例：「L 10 0」と「l 10 0」は違います ）

詳細については下記記事をご参考ください。

【SVGタグ】pathタグのd属性のコマンドの大文字と小文字の違いを実例で解説（lとLの違い）

SVGタグの中のpathタグは複雑なイラストが作成できる非常に強力な描画ツールです。その分、コマンド（命令）がたくさんあり複雑です。ここではコマンドの中の大文字と小文字の違いを解説しています。（例「L」と「l」の違い）d属性のコマンドの大文...

prograshi.com

なお、Mは大文字（絶対座標）のみです。また、大文字と小文字を混ぜてpathを描くことも可能です。

Mの後にアルファベットがなく座標が続く場合

pathタグでは、Mの後にアルファベットがなく座標が続く場合があります。

この場合2点目以降は暗黙的にLコマンドが指定された状態になるため、自動的に直線で結ばれます。

例えば、以下のように「M20 90」の後ろに「70 40」「120 90」を記述した場合、それぞれの絶対座標を直線で結んだ三角形ができます。

<svg width="260" height="100" viewBox="0 0 260 120">
  <path d="M20 90 70 40 120 90 Z"
        fill="lightpink" stroke="#222" stroke-width="2"/>
</svg>

これは、「Lコマンド」で記述した場合と同じです。

<svg width="260" height="100" viewBox="0 0 260 120">
  <path d="M20 90 L70 40 L120 90 Z"
        fill="lightpink" stroke="#222" stroke-width="2"/>
</svg>

Zのあり/なしによる違い

Zコマンドは、パスの最後の点から、最初のMコマンドで指定した点まで、直線を引いてパスを閉じます。

Zのありなしによらず、fillによる塗りつぶしは行われます。

しかし、Zがない場合は最期の外線がなくなります。

Zありの例

<svg width="150" height="150" style="border: 1px solid #ccc;">
  <path d="M 20 20 L 120 20 L 70 100 Z" 
        stroke="red" stroke-width="3" fill="lightblue" />
</svg>

Zなしの例

<svg width="150" height="150" style="border: 1px solid #ccc;">
  <path d="M 20 20 L 120 20 L 70 100" 
        stroke="red" stroke-width="3" fill="lightblue" />
</svg>

なお、Zなしでもfill属性は有効なため、図形の内側は最後の点(70, 100)と最初の点(20, 20)を結んだ仮想的な線で囲まれた領域が塗りつぶされます。

Zは閉じた図形を明示するための記号でもある

なお、Zは見た目の違い（線の有無）だけでなく、パスが「閉じた図形」であることを明示する役割を持っています。

塗りつぶしたい図形を完璧に表現するには、Zコマンドでパスを閉じるのが基本です。

実例：直線を描く（L、V、H、Zコマンド）

pathタグのM、L、V、Hコマンドを使った例として、簡単な家の図形を描くことができます。

<svg width="260" height="140" viewBox="0 0 260 120">
  <path d="
    M20 90 L70 40 L120 90 Z
    M35 90 V120 H105 V90 Z
  " fill="#bbdefb" stroke="#0d47a1" stroke-width="2"/>
</svg>  

M20 90 L70 40 L120 90 Z

d=M20 90 L70 40 L120 90 Zは、ビューポートの左上から(20 90)の座標を開始点Mとして、Lで（70, 40）の座標と直線を結びます。

3つめの点（120, 90）とも線をむずび、最後にZで３つ目の点と開始点を結んだ三角形を描きます。

M35 90 V120 H105 V90 Z

d=M35 90 V120 H105 V90 Zは、ビューポートの左上から(35 90)の座標を開始点Mとして、V120で垂直方向（x座標は固定）のy座標120の位置に点を打ちます。

H105は水平方向（y座標は固定）のx座標105の位置に点を打ちます。

V90で垂直方向（x座標は固定）のy座標90の位置に点を打ち、開始点と結ぶことで長方形を描きます。

実例：曲線を描く（3次ベジェ曲線 C,S）

CとSコマンドを使うと曲線を描くことができます。

<svg width="320" height="140" viewBox="0 0 320 140">
  <path d="
    M10 70
    C 50 10, 110 10, 150 70
    S 250 130, 310 70
  " fill="none" stroke="#009688" stroke-width="4"/>
</svg>

C: Curve to (三次ベジェ曲線)

Cコマンドは現在の位置から指定した座標まで、2つの制御点を使って滑らかな曲線を引きます。
【使い方：C x1 y1, x2 y2, x y】

• x1 y1: 1つ目の制御点の座標
• x2 y2: 2つ目の制御点の座標
• x y: 曲線の終点の座標

なお、Cだけの場合は以下のようになります。

<svg width="320" height="140" viewBox="0 0 320 140">
  <path d="
    M10 70
    C 50 10, 110 10, 150 70
  " fill="none" stroke="#009688" stroke-width="4"/>
</svg>

S: Smooth curve to (滑らかな三次ベジェ曲線)

Cコマンドのショートハンド版です。Sは直前のCまたはSコマンドの終端接線を自動的に継承します。最初の制御点を省略でき、自然にスムーズにつなげることができます。
【使い方：S x2 y2, x y】

• x2 y2: 2つ目の制御点の座標
• x y: 曲線の終点の座標

なおSだけの場合は以下のようになります。

<svg width="320" height="140" viewBox="0 0 320 140">
  <path d="
    M10 70
    S 250 130, 310 70
  " fill="none" stroke="#009688" stroke-width="4"/>
</svg>

３次ベジェ曲線とは何か？

3次ベジェ曲線とは、2つの端点と2つの制御点を使って描かれる、滑らかな曲線です。

制御点は曲線自体の上にはありませんが、磁石のように曲線を引っ張り、その形状を決定します。端点から制御点への線の向きと長さが、曲線の開始と終了の「滑らかさ」を調整します。

これにより、複雑で自由な曲線デザインを少ない情報で効率的に表現することができます。

実例：曲線を描く（2次ベジェ曲線 Q,T）

QやTコマンドを使っても曲線を描くことができます。

<svg width="220" height="120" viewBox="0 0 220 120">
  <path d="
    M20 30
    Q 20 10, 60 10
    T 100 30
    T 140 50
    T 180 70
  " fill="none" stroke="#9c27b0" stroke-width="3"/>
</svg>

Q: Quadratic Bézier curve (二次ベジェ曲線)

現在の位置から指定した座標まで、1つの制御点を使って曲線を引きます。Cコマンドよりもシンプルで、制御点が1つだけなので扱いやすいのが特徴です。
【使い方：Q x1 y1, x y】

• x1 y1: 制御点の座標
• x y: 曲線の終点の座標

Qだけの場合は以下のような曲線になります。

<svg width="220" height="120" viewBox="0 0 220 120">
  <path d="
    M20 30
    Q 20 10, 60 10
  " fill="none" stroke="#9c27b0" stroke-width="3"/>
</svg>

T: Smooth quadratic Bézier curve (二次ベジェ曲線)

Qコマンドのショートハンド版です。Sと同様、前回の制御点を自動的に対称に配置することで、滑らかな曲線が連続して描けるようにします。（Qの次にTを使うと、制御点が自動反転して連続曲線が簡単に作れます）
【使い方：T x y】

Tだけの場合以下のようになります。

<svg width="220" height="120" viewBox="0 0 220 120">
  <path d="
    M20 30 
    T 100 30
    T 140 50
    T 180 70
  " fill="none" stroke="#9c27b0" stroke-width="3"/>
</svg>

２次ベジェ曲線とは？（3次ベジェ曲線との違い）

２次ベジェ曲線は、2つの端点と1つの制御点を使って描かれる曲線です。

3次ベジェ曲線が2つの制御点を使うのに対し、2次ベジェ曲線は制御点が1つなので、よりシンプルで直感的に曲線の形を調整できます。

3次ベジェ曲線の方がより複雑で自由なカーブを表現できますが、2次ベジェ曲線はシンプルさから、比較的緩やかな曲線を描くのに適しています。

実例：円弧を描く（A）

Aコマンドを使うと、円弧を描くことができます。

<svg width="260" height="160" viewBox="0 0 260 160">
  <path d="M40 90 A60 60 0 0 0 160 90"
        fill="none" stroke="#ff9800" stroke-width="10" stroke-linecap="round"/>
</svg>

A: Arc to (円弧)
現在の位置から指定した座標まで、楕円の一部を切り取った円弧を描きます。楕円の半径や回転角度、円弧の向きなどを細かく指定できます。
【使い方：A rx ry x-axis-rotation large-arc-flag sweep-flag x y】

• rx ry: 円弧を形成する楕円の半径
• x-axis-rotation: 楕円のx軸の回転角度
• large-arc-flag: 0または1。円弧が180度以上か、それ未満かを指定
• sweep-flag: 0または1。円弧を時計回りか、反時計回りかを指定
• x y: 円弧の終点の座標

pathタグの応用編

pathタグは実用面では、自分でコードを編集して図形を描くということはほぼないかと思います。

それよりも無料のSVG画像をダウンロードして編集したり、イラストレーターなどで図形を描画してSVG画像としてダウンロードすることが一般的です。

詳細については以下のページをご参考ください。

【SVG】pathタグの使い方｜d属性、M, L, H, V, Z, C, S, Q, T, Aコマンド、gタグとは何かを実例で解説

SVGタグの中で使うpathタグは、ウェブサイトやアプリケーションで柔軟なグラフィックを描画するために欠かせない要素です。pathタグは複雑な図形を自由度高く描ける反面、指定できるコマンドがたくさんあり、パッと見だととっつきにくく感じてしま...

prograshi.com