SVGの基本とHTMLでの描画方法｜使い方・実例・応用テクニック完全ガイド

HTMLで画像を表示するとき、「もっときれいに見せたいのに、拡大するとぼやけちゃう…」って思うことありますよね。

アイコンやロゴがにじんでしまうと、せっかくのデザインも台無しになってしまいます。

そこで今回は、HTMLでSVG画像を描画する方法について、やさしくていねいに解説します。

SVGを使えば、どんなに拡大してもキレイな画像を表示できるうえに、動きをつけたり、スタイルを変えたりすることも自由にできます。

SVGの使い方をしっかり学べば、見た目が美しくて、軽くて、しかもわかりやすいWebサイトが作れるようになりますので、ぜひ最後まで読みながら一緒に理解を深めてみてください。

SVGとは？HTMLで使う前に知っておきたい基礎知識

SVGの概要と特徴

SVG（Scalable Vector Graphics）は、拡大や縮小をしても画像がぼやけない特徴を持つ、ベクター形式の画像です。

主にHTMLと組み合わせて使うことで、きれいな図形やアイコン、アニメーションを描画することができます。

SVGの一番の特長は「スケーラブル」であることです。

これは、スマホでも大きな画面でもきれいに表示できるという意味です。

以下に、SVGの特徴をまとめます。

このように、SVGは使いやすくて、軽くて、きれいな画像を作ることができるフォーマットです。

ビットマップ画像との違い

SVGとよく比較されるのが、JPEGやPNGなどのビットマップ画像です。

これらはピクセルという小さな点の集まりでできているため、拡大すると画像がぼやけたり、ガタガタになったりします。

一方でSVGは、数式で図形を描くので、どれだけ拡大してもきれいに見えます。

違いをわかりやすくまとめました。

この違いを理解することで、どんな場面でSVGを使えばよいかがはっきりと分かります。

SVGのメリットとデメリット

SVGには良いところがたくさんありますが、注意点もあります。

使う前にメリットとデメリットをしっかり知っておくと、失敗せずに使えます。

このように、使い方を間違えなければとても便利な形式であることが分かります。

対応ブラウザと互換性

SVGは多くのブラウザで対応していますが、すべての機能が完全に使えるわけではありません。

特にアニメーションや一部のスタイルは、古いブラウザではうまく動かないことがあります。

以下は、SVGがサポートされている代表的なブラウザです。

ほとんどの環境で表示できますが、古いInternet Explorerなどでは注意が必要です。

ターゲットとするユーザーの環境を確認することが大切です。

よく使われる用途と活用シーン

SVGはたくさんの場面で使われています。

デザインだけでなく、機能面でも優れた使い方ができます。

以下に、よくある活用例を紹介します。

これらの使い方を見ると、SVGが単なる画像ではなく、HTMLと連携した表現力のある要素であることが分かります。

SVGの基本構造と書き方

SVGはテキストベースの形式で、<svg>タグを使ってHTMLの中に直接記述することができます。

基本的な構造はとてもシンプルです。

以下は簡単なSVGのコード例です。


<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>


このコードは赤い丸を描くものです。

cxやcyは円の中心、rは半径を意味します。

このように、簡単なコードで図形を描くことができるのがSVGの魅力です。

HTMLでSVGを扱う方法の全体像

SVGはHTMLの中に直接書くことも、外部ファイルとして読み込むこともできます。

それぞれに特徴があるので、使い分けが重要です。

それぞれの方法にはメリットと用途があるため、目的に合わせて最適な使い方を選ぶことが大切です。

HTMLでのSVG描画方法を徹底解説

インラインSVGの記述方法

インラインSVGとは、HTMLの中に直接<svg>タグを書いて画像を表示する方法です。

このやり方を使うと、CSSやJavaScriptで簡単にスタイルを変えたり動かしたりすることができます。

たとえば、丸を描く簡単なSVGコードは次のようになります。


<svg width="100" height="100">
<circle cx="50" cy="50" r="40" fill="blue" />
</svg>


インラインSVGにはいくつかのメリットがあります。

インラインSVGは、とくにロゴやアイコンをカスタマイズしたいときに便利です。

外部SVGファイルの読み込み方法

SVGを外部ファイルにして読み込む方法もあります。

この場合、SVGファイルをHTMLとは別にしておき、あとから読み込んで表示します。

主に以下のやり方があります。

たとえば、imgタグを使うと次のように書けます。


<img src="logo.svg" alt="ロゴ画像">


この方法はとても簡単ですが、CSSやJavaScriptで直接操作ができないという弱点もあります。

もし細かく動かしたいなら、インラインSVGやobjectタグの方が向いています。

objectタグ・imgタグでの利用方法

objectタグとimgタグは、どちらも外部SVGを読み込むときによく使われる方法です。

それぞれに向き・不向きがあります。

まずimgタグは、画像を表示するだけのシンプルな方法です。

とにかく手軽で、HTMLの中で他の画像と同じように扱えます。

ただし、SVGの中身を直接いじることができません。

次にobjectタグでは、SVGファイルを「部品」として読み込むことができ、CSSやJavaScriptからも操作しやすくなります。

両者の違いを簡単にまとめます。

操作性が必要かどうかで、どちらを使うかを決めるとよいでしょう。

CSSとの組み合わせによる装飾

SVGはCSSととても相性が良く、色や線の太さ、影などのスタイルを自由に変更することができます。

インラインSVGを使えば、HTMLと同じようにCSSで細かくコントロールが可能です。

たとえば、以下のようにCSSで色やサイズを変えることができます。


<style>
circle {
fill: red;
stroke: black;
stroke-width: 2;
}
</style>


そしてHTML内のSVGに次のように書きます。


<svg width="100" height="100">
<circle cx="50" cy="50" r="40" />
</svg>


このようにCSSを使えば、SVGをページのデザインに合わせて簡単にカスタマイズできます。

JavaScriptによるSVGの操作

JavaScriptを使えば、SVGを動かしたり、クリックやホバーに反応させたりすることができます。

SVGはDOMとして扱えるので、JavaScriptでHTMLのように操作できます。

たとえば、以下のようなコードでSVGの色を変えることができます。


document.querySelector("circle").addEventListener("click", function() {
this.setAttribute("fill", "green");
});


これは、SVG内の<circle>をクリックすると色が緑に変わる例です。

このように、JavaScriptを使うとSVGにたくさんの動きや反応を加えることができるのです。

レスポンシブ対応の方法

SVGはレスポンシブ対応もしやすい画像形式です。

つまり、画面のサイズに合わせて、自動でサイズが調整されるように作れます。

そのためにはviewBox属性をうまく使うことが大切です。

たとえば、以下のように設定します。


<svg viewBox="0 0 100 100" width="100%" height="auto">
<circle cx="50" cy="50" r="40" fill="blue" />
</svg>


このコードでは、画面の幅に合わせて自動でサイズが変わります。

これにより、どんなデバイスでも見やすいSVGを作ることができます。

セキュリティ上の注意点

SVGはとても便利ですが、悪意あるコードが含まれる可能性があるため注意が必要です。

とくに外部からSVGファイルを読み込むときには、信頼できるソースかどうかをしっかり確認しましょう。

以下の点に気をつけることで、より安全に使えます。

セキュリティを守ることで、安全にSVGを使った表現を楽しむことができます。

SVGを使った実用的な描画テクニック

図形やアイコンの描画例

SVGでは四角や丸、三角などの図形をコードで描くことができます。

これらの図形を組み合わせることで、さまざまなアイコンやイラストを作ることができます。

基本的な図形はタグを使ってとても簡単に描けます。

以下は基本的な図形の例です。


<svg width="200" height="100">
<rect x="10" y="10" width="50" height="50" fill="blue" />
<circle cx="100" cy="35" r="25" fill="red" />
<polygon points="150,60 180,10 210,60" fill="green" />
</svg>


基本図形を使うメリットを以下にまとめます。

このようにSVGなら、絵が描けなくても簡単なコードで魅力的なアイコンを作ることができます。

アニメーションの実装方法

SVGでは、動きを加えることで見る人に印象的な表現ができます。

CSSやJavaScriptを使って、色を変えたり大きさを変えたり、回転させたりすることができます。

たとえば、円をふわっと大きくするアニメーションは以下のように書けます。


<style>
circle {
animation: grow 2s infinite alternate;
}
@keyframes grow {
from { r: 20; }
to { r: 40; }
}
</style>
<svg width="100" height="100">
<circle cx="50" cy="50" r="20" fill="orange" />
</svg>


SVGアニメーションでよく使われる方法を以下にまとめます。

アニメーションを使うことで、静かなページでも目を引く表現が可能になります。

グラデーションやマスクの活用

SVGはただ色をつけるだけでなく、グラデーションやマスク（切り抜き）を使って、よりデザイン性の高い表現ができます。

たとえば、太陽のような色の変化を表すにはグラデーションがぴったりです。

以下はSVGでグラデーションを作るコードの一例です。


<svg width="200" height="100">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:red" />
<stop offset="100%" style="stop-color:yellow" />
</linearGradient>
</defs>
<rect width="200" height="100" fill="url(#grad1)" />
</svg>


主な装飾の種類は以下の通りです。

装飾を使うと、ただの図形がデザイン性の高いパーツに変わります。

グラフやチャートの作成

SVGは表やグラフを描くのにも向いています。

コードで座標を指定して線や四角を描くことで、折れ線グラフや棒グラフ、円グラフなどが作れます。

簡単な折れ線グラフの例を紹介します。


<svg width="300" height="150">
<polyline fill="none" stroke="blue" stroke-width="2"
points="0,100 50,80 100,60 150,90 200,70 250,50 300,40" />
</svg>


SVGグラフ作成のポイントを以下にまとめます。

SVGでのグラフ作成は、見やすく、軽く、カスタマイズしやすいというメリットがあります。

マップやインフォグラフィックへの応用

SVGはマップや説明図のように、複雑だけど拡大しても見やすい画像が必要なときにぴったりです。

地図や電車の路線図、会社のフローチャートなどでも活躍します。

以下のような使い方があります。

このように、SVGはただの画像を超えて、説明の道具や案内図としても使えるのです。

文字と組み合わせた表現技法

SVGは文字も使えるので、図形と組み合わせてタイトル付きの図やロゴ、バナーなどが簡単に作れます。

たとえば、次のようなコードで文字と図形を組み合わせられます。


<svg width="300" height="100">
<rect x="10" y="10" width="280" height="80" fill="lightblue" />
<text x="150" y="60" font-size="24" text-anchor="middle" fill="black">Hello SVG</text>
</svg>


文字の使い方のポイントを以下にまとめます。

文字をうまく使えば、伝えたいメッセージを視覚的に表現できるSVGが作れます。

実案件で使われる構成例

実際のWebサイトやアプリでは、SVGを使った表現がたくさんあります。

たとえばロゴ、ナビゲーションアイコン、読み込みアニメーション、データビジュアライゼーションなどです。

よくある構成を以下にまとめました。

これらのパターンを参考にすれば、SVGを実務でどう活用できるかがイメージしやすくなります。

SVG活用のコツとパフォーマンス最適化

ファイルサイズを最小化する方法

SVGはもともと軽い画像形式ですが、細かく作り込みすぎるとファイルサイズが大きくなることがあります。

表示速度やサーバー負荷を考えると、SVGのサイズを小さくする工夫が大切です。

以下に、よく使われる最適化の方法をまとめます。

これらの方法を使えば、見た目を変えずにファイルサイズを大きく減らすことができます。

コードをクリーンに保つ工夫

SVGはXML形式で書かれるため、タグや属性がたくさん並ぶことがよくあります。

そのままだと読みにくくなり、編集ミスも起こりやすくなります。

見やすく、分かりやすいコードにしておくことが大切です。

コードを整理するためのポイントを紹介します。

コードを整理しておくと、修正や再利用がしやすくなり、作業ミスも防げます。

アクセシビリティ対応のポイント

SVGは視覚的な表現が多いですが、目が見えにくい人や音声読み上げを使う人にもやさしい作りにすることが必要です。

HTMLと同じようにアクセシビリティ対応を行うことで、より多くの人が安心して使えるコンテンツになります。

以下のようなポイントを意識しましょう。

アクセシビリティを考えることは、誰にとってもやさしいWebを作る第一歩です。

SEOに効果的な使い方

SVGは画像ですが、テキストベースで書かれているため、Googleなどの検索エンジンが中身を読むことができます。

これを活かすことで、SEOにも効果が出る使い方が可能になります。

SEOにつながるポイントを紹介します。

ただ画像を表示するだけでなく、SEO効果まで意識したSVGの使い方が今後ますます重要になります。

表示速度に与える影響と対策

Webサイトの表示速度は、ユーザーの満足度や検索順位に関わるとても重要なポイントです。

SVGは軽くて速いですが、扱い方によっては遅くなることもあります。

次のような対策をすると安心です。

まず確認しておきたいポイントは以下です。

こうした工夫をすることで、SVGのよさを活かしながら表示速度も保つことができます。

ベストプラクティスまとめ

SVGを使いこなすには、単に図形を描くだけでなく、最適化やアクセシビリティ、表示速度までを考えて設計することが大切です。

ここで紹介したポイントをまとめます。

これらを意識していれば、SVGは「軽くて、きれいで、わかりやすい」最高のツールになります。

今後のトレンドと進化の方向性

SVGはこれからますます注目される技術です。

Webの多様化や高解像度ディスプレイの普及により、拡大してもキレイな画像が求められているからです。

SVGはそのニーズにピッタリ合っています。

今後の注目ポイントを以下に紹介します。

今からSVGに慣れておくことで、将来のWeb制作でも一歩先をいく表現ができるようになります。

まとめ

これまで紹介してきた内容を、ポイントとしてもう一度わかりやすくまとめます。

SVGは使いこなせばとても便利なツールです。

今日から少しずつ試して、自分のWebサイトにぴったりのSVG表現を作ってみましょう。