ホーム / フロントエンド /

これ画像じゃないの？HTMLだけでイラストを描けるSVGを使ってみた

2026年8月31日月曜日

HTML SVG UI Webデザイン Web開発 フロントエンド

t f B! P L

Webサイトを作っていると、

「ここにちょっとしたイラストが欲しい」

ということがあります。

でも、そのためだけに画像編集ソフトを開いてPNGを作るのも面倒。

最近作ったWebサイトでも、公開しているWebアプリを紹介するために、こんな感じの簡単な画面イメージが欲しくなりました。

そこで使ったのが SVG（Scalable Vector Graphics） です。

実はこれ、

画像ファイルを置いているのではなく、HTMLの中に直接図形を書いています。

今回は自分でも忘れそうなので、SVGで簡単なイラストを作る方法をまとめておきます。

SVGって何？

SVGは、図形や線、文字などを使って画像を表現できる形式です。

普通のPNGやJPEGは、ざっくり言えばピクセルの集まりです。

一方SVGは、

四角をここに描く
丸をここに描く
線をここからここまで引く
この位置に文字を書く

というように、図形の情報として画像を持っています。

例えば、こんなHTMLを書くだけで図形が表示されます。

<!-- SVGの描画エリアを作成 -->
<svg viewBox="0 0 300 200">

  <!-- 背景の四角形 -->
  <rect
    x="0"
    y="0"
    width="300"
    height="200"
    fill="#f1ead7"
  />

  <!-- 中央に円を描画 -->
  <circle
    cx="150"
    cy="100"
    r="60"
    fill="#ce6135"
  />

  <!-- 円の中央に文字を描画 -->
  <text
    x="150"
    y="110"
    text-anchor="middle"
    font-size="28"
    fill="#ffffff"
  >
    SVG
  </text>

</svg>

これだけ。

CanvasのようにJavaScriptで描画処理を書く必要もありません。

HTMLの中にそのまま書けます。

SVGでよく使う図形

今回使った範囲なら、覚えるものはそんなに多くありません。

タグ用途
<rect>四角形
<circle>円
<line>線
<path>自由な形・線
<text>文字
<g>複数の図形をまとめる

これだけでも、かなり色々描けます。

四角形はrect

例えば、

<!-- 四角形を描画 -->
<rect
  x="30"
  y="30"
  width="200"
  height="100"
  fill="#fffaf0"
  stroke="#22211c"
  stroke-width="3"
/>

これで四角形が表示されます。

それぞれ、

x            左からの位置
y            上からの位置
width        横幅
height       高さ
fill         塗りつぶし色
stroke       枠線の色
stroke-width 枠線の太さ

という意味です。

普通のCSSと似ているので、意外と分かりやすい。

円はcircle

円の場合は <circle>。

<!-- 円を描画 -->
<circle
  cx="150"
  cy="100"
  r="60"
  fill="#ce6135"
  stroke="#22211c"
  stroke-width="3"
/>

こちらは、

cx  円の中心X座標
cy  円の中心Y座標
r   半径

となります。

四角と丸を組み合わせるだけでも、UIっぽいイラストならかなり作れます。

文字までSVGで書ける

これも便利でした。

<!-- SVG内に文字を描画 -->
<text
  x="150"
  y="110"
  text-anchor="middle"
  font-family="monospace"
  font-size="32"
  font-weight="900"
  fill="#22211c"
>
  17
</text>

<text> を使えば、画像の中に文字を書けます。

つまり、

┌─────────────┐
│             │
│     17      │
│             │
└─────────────┘

みたいなものも、画像編集ソフトを使わずHTMLだけで作れます。

今回作ったサイトでは、抽選アプリのプレビュー画面もこの方法で作りました。

四角形を並べて、

┌────┐ ┌────┐ ┌────┐
│ 01 │ │ 02 │ │ 03 │
└────┘ └────┘ └────┘

┌────┐ ┌────┐ ┌────┐
│ 04 │ │ 05 │ │ 06 │
└────┘ └────┘ └────┘

のようなカードを作っています。

複雑な線はpath

もう少し複雑な形を描きたい場合は <path> が使えます。

例えば、

<!-- 複数の座標を結んで線を描画 -->
<path
  d="M 100 180 L 120 140 L 130 90"
  fill="none"
  stroke="#ce6135"
  stroke-width="5"
/>

d の中に座標や命令を書いて形を作ります。

今回のサイトでは、機械学習で手を認識するアプリのイメージとして、

     ○
     │
     ○
    /
   ○
    \
     ○

のような手の骨格線を <path> と <circle> の組み合わせで表現しました。

単純なUIイラストだけでなく、こういう図も作れます。

ただし <path> は rect や circle より一気に難しくなるので、簡単なイラストなら無理に使わなくてもいいと思います。

複数の図形をまとめるg

同じ設定を複数の図形に適用するときは <g> も便利です。

<!-- このグループ内の図形をすべて同じ色にする -->
<g fill="#22211c">

  <rect x="10" y="10" width="20" height="20" />

  <rect x="40" y="10" width="20" height="20" />

  <rect x="70" y="10" width="20" height="20" />

</g>

これなら各 <rect> に、

fill="#22211c"

を何度も書かなくて済みます。

viewBoxが結構重要

SVGを書くと、

<!-- SVG内部では横520、縦320の座標系として扱う -->
<svg viewBox="0 0 520 320">

というものがよく出てきます。

最初、

「520×320の画像サイズということ？」

と思ったのですが、少し違います。

viewBox は、SVG内部で使用する座標系の範囲を指定するものです。

viewBox="0 0 520 320"

0    → X座標の開始位置
0    → Y座標の開始位置
520  → 横方向の範囲
320  → 縦方向の範囲

例えば、

<!-- SVG内部の座標系を定義 -->
<svg viewBox="0 0 520 320">

  <!-- X=100、Y=50の位置に四角形を配置 -->
  <rect
    x="100"
    y="50"
    width="200"
    height="100"
  />

</svg>

というように、この520×320の仮想的なキャンバス上に図形を置いていきます。

そしてCSS側を、

/* SVGを親要素いっぱいに表示する */
.preview svg {
  width: 100%;
  height: 100%;
}

としておけば、表示領域に合わせてSVG全体を拡大・縮小できます。

これがSVGのかなり便利なところです。

拡大してもボケにくい

PNGなどのラスター画像の場合、

100 × 100

の小さな画像を、

1000 × 1000

まで拡大すると、当然荒くなります。

SVGは、

ここからここまで線を引く
この位置に円を描く

という図形情報を持っているので、表示サイズが変わっても再計算して描画できます。

そのため、拡大しても基本的に図形がぼやけません。

レスポンシブなWebサイトとの相性もいいです。

CSSからサイズを変更できる

SVGをHTML内に直接書いておけば、普通のHTML要素のようにCSSで扱えます。

例えば今回のように、

/* カード内のSVG表示を調整 */
.tool-card__visual svg {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 188px;
}

としておけば、カードのサイズに合わせてSVGを表示できます。

つまり、

スマホ
   ↓
SVG縮小

PC
   ↓
SVG拡大

としても、同じSVGをそのまま使えます。

SVGなら色の変更も簡単

例えば、

<!-- オレンジ色の四角形 -->
<rect
  width="100"
  height="100"
  fill="#ce6135"
/>

の、

fill="#ce6135"

を変更するだけで色が変わります。

枠線なら、

stroke="#22211c"

です。

画像編集ソフトを開いて、

画像を修正
↓
書き出し
↓
アップロード
↓
HTMLの画像を差し替え

とする必要がありません。

HTMLを変更して終わり。

Webサイトのデザインに合わせた簡単なイラストなら、これはかなり楽でした。

HTMLに直接書く「インラインSVG」

SVGには、

image.svg

という独立した画像ファイルとして保存する方法もあります。

でも今回は、

<div class="preview">

  <!-- HTML内へSVGを直接記述 -->
  <svg viewBox="0 0 520 320">

    <rect ... />

    <circle ... />

    <text ...>
      SAMPLE
    </text>

  </svg>

</div>

という形で、HTMLの中に直接書きました。

これをインラインSVGと呼びます。

ちょっとしたUIイラストなら、この方法はかなり便利です。

何でもSVGにすればいいわけではない

もちろん、全部SVGにする必要はありません。

今回のサイトでも使い分けています。

例えば、

アプリの雰囲気を伝える簡単な図
        ↓
SVG

実際のアプリ画面を見せたい
        ↓
PNGなどのスクリーンショット

です。

実際の画面そのものを見てもらいたい場合は、SVGで再現するよりスクリーンショットを貼った方が早い。

一方、

説明図
アイコン
模式図
簡単なUI
フローチャート
装飾

などはSVGとかなり相性がいいです。

SVGを使って感じたメリット

今回使ってみて感じたメリットはこのあたり。

  • 画像編集ソフトを使わなくていい

  • HTMLだけで作れる

  • 拡大・縮小してもきれい

  • レスポンシブ対応しやすい

  • 色をコードから変更できる

  • JavaScriptから操作することもできる

  • 単純な図なら画像ファイルを別途管理しなくていい

特に、

「ちゃんとしたイラストはいらないけど、説明用の絵がちょっと欲しい」

というときに使いやすいです。

デメリットもある

当然ですが、向いていないものもあります。

写真のような画像をSVGで作るものではありません。

また、図形が複雑になるほど、

<path d="M ....">

のようなコードが大量になって、人間が直接編集するのが大変になります。

なので、自分でコードを書くなら、

四角
丸
線
文字
簡単なpath

くらいまでが扱いやすいと思います。

複雑なイラストなら、SVG対応のデザインツールから書き出した方がいいでしょう。

最後に

最初はSVGというと、

「Webサイトのロゴとかアイコンに使う画像形式」

くらいに思っていました。

でも実際には、

<rect>
<circle>
<line>
<path>
<text>

を組み合わせれば、HTMLの中だけで結構いろいろ描けます。

特に、

Webアプリの簡単な画面イメージや技術記事の説明図

にはかなり使いやすそうです。

今後、ブログで、

ブラウザ
    ↓
WebSocket
    ↓
サーバー

みたいな技術構成図を書くときにも使えそう。

「画像作るほどではないんだけど、ちょっと図が欲しい」

というときは、SVGを思い出すことにします。

参考資料

SVGについて詳しく確認したい場合は、以下の公式・技術資料が参考になります。

QooQ