HTMLでSVGを使う基本とグラフィック描画方法｜図形・アニメーション・活用例

Webサイトを作っていると、「画像をもっとキレイに見せたいな」とか「アイコンを自由に動かしたいな」って思うことありますよね。

でも、画像がぼやけたり、サイズを変えたら崩れたりして、なかなかうまくいかないことも多いです。

そこで今回は、HTMLで使えるSVG（エスブイジー）についてわかりやすく解説します。

SVGを使うと、画質が落ちずに軽くてカッコいいグラフィックをWebページに表示することができます。

この記事を読めば、基本の使い方から描き方、デザインへの活用法までしっかり学べるので、あなたのWebサイトをもっとキレイでかっこよく仕上げることができるようになります。

とっても楽しくて便利な技術なので、最後までじっくり読んでみてくださいね。

HTMLでSVGを使う基本とは？

SVGとは何か？基本概念を解説

SVGとは「Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス）」の略で、拡大しても画像がぼやけないベクター形式の画像を描くための技術です。

HTMLの中に直接コードを書いて、図形や文字を自由に描くことができます。

SVGは画像ファイルのように見えますが、実はテキストでできた命令の集まりです。

例えば、「円を描く」「線を引く」「文字を表示する」などの命令を組み合わせて、図を作ります。

SVGの特長をまとめると、以下のようになります。

これらの理由から、ロゴやアイコン、簡単なイラストなどにSVGはよく使われています。

HTMLにSVGを埋め込む方法

SVGはHTMLに直接書く方法と、画像ファイルとして読み込む方法があります。

ここではインラインSVGの書き方を紹介します。

これは、HTMLの中にSVGのコードをそのまま書くやり方です。

以下が円を描く基本のSVGコードです。


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


このコードでは、<svg>タグで描画エリアを作り、その中に<circle>で円を描いています。

HTML内の好きな場所にこのコードを入れると、赤い円が表示されます。

埋め込み方法の種類は他にもあります。

どの方法を選ぶかは、使いたい場面や目的によって変わります。

たとえば、色や大きさを自由に変えたいならインラインSVGが便利です。

インラインSVGと外部SVGの違い

SVGの使い方には、「インラインSVG」と「外部SVG」の2つがあります。

それぞれにメリットとデメリットがありますので、違いをしっかり理解しておくことが大切です。

インラインSVGの特徴は次の通りです。

外部SVGの特徴はこちらです。

表示だけなら外部SVGでも問題ありませんが、動きをつけたい場合やデザインを変更したい場合はインラインSVGが便利です。

HTMLタグとSVGタグの関係性

SVGはHTMLの中で使える特別なタグです。

SVGタグはHTMLタグとは別のルールを持っていますが、一緒に使うことができるのが大きな魅力です。

SVGの中で使われる主なタグは以下の通りです。

HTMLタグとの違いは、位置や大きさを数値で指定する点や、色や線の太さを属性で細かく設定できる点です。

SVGタグを正しく理解すると、Webページに動きやインパクトのある表現を加えることができます。

SVGを使うメリットと注意点

SVGにはたくさんのメリットがありますが、使うときの注意点もあるので気をつけましょう。

まずメリットを確認しましょう。

ただし、次のような注意点もあります。

これらを理解して使えば、SVGはWebデザインでとても役立つ便利なツールになります。

正しく使うことで、ページの見た目もパフォーマンスもアップします。

SVGでできるグラフィックの描画方法

基本的な図形（circle、rect、line）の描画

SVGを使うと、HTMLだけでは描けないような図形をコードで簡単に描画することができます。

まずは基本的な図形として、丸・四角・線の描き方を覚えることが大切です。

それぞれのタグの使い方は以下のようになります。


<svg width="200" height="200">
<circle cx="100" cy="100" r="50" fill="blue" />
<rect x="10" y="10" width="50" height="50" fill="green" />
<line x1="0" y1="0" x2="200" y2="200" stroke="red" stroke-width="2" />
</svg>


このコードでは、青い円、緑の四角、赤い線が表示されます。

図形の位置や大きさは、属性で数値を指定するだけで調整できます。

基本図形のポイントは次の通りです。

これらのタグを理解すると、SVGの基本がしっかりと身につきます。

path要素を使った複雑な図形の作成

もっと自由な形を描きたいときは、<path>タグを使います。

これは線の動きを細かく指示できるタグで、ロゴやアイコンなど複雑な形にぴったりです。

次のようなコードで、三角形を描くことができます。


<svg width="200" height="200">
<path d="M 50 150 L 150 150 L 100 50 Z" fill="orange" />
</svg>


この中のd属性が、図形の形を決める命令です。

それぞれの命令には意味があります。

<path>は命令がたくさんあり、慣れるまでは少し難しく感じますが、自由な形を作れる強力なタグです。

テキストの表示とスタイリング

SVGでは図形だけでなく、文字も表示できます。

<text>タグを使えば、好きな場所に文字を書くことができ、CSSと組み合わせて色やフォントを自由に変えることもできます。

以下のようなコードで文字を表示できます。


<svg width="300" height="100">
<text x="50" y="50" font-size="24" fill="black">こんにちはSVG</text>
</svg>


この例では、「こんにちはSVG」という文字が画面の中央に表示されます。

文字の位置や大きさ、色も属性で指定可能です。

<text>を使う時のポイントは次の通りです。

画像と違って、SVGの文字は拡大してもぼやけません。

見た目がキレイで、SEOにも良い効果がある点が魅力です。

グラデーションやパターンの利用方法

SVGでは、単色だけでなく色の変化（グラデーション）や繰り返し模様（パターン）を使って、見た目をさらに良くすることができます。

これにより、より魅力的なデザインが可能になります。

グラデーションを使うには、<defs>と<linearGradient>などのタグを使います。


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


このコードでは、左から右にかけて青から赤に変わる四角が表示されます。

グラデーション・パターンを使う利点は次の通りです。

グラデーションやパターンを上手に使うと、SVGの見た目が格段にレベルアップします。

SVGでアニメーションを加える方法

SVGは動かすこともできる特別な画像形式です。

動きをつけることで、目を引くデザインに仕上げることができます。

SVGでアニメーションを作るには、<animate>や<animateTransform>などのタグを使います。

次のような簡単なアニメーションの例があります。


<svg width="200" height="100">
<circle cx="50" cy="50" r="30" fill="green">
<animate attributeName="cx" from="50" to="150" dur="2s" repeatCount="indefinite" />
</circle>
</svg>


このコードでは、緑の円が左右に動き続けます。

アニメーションに使える主な属性は以下の通りです。

アニメーションを使うと、ユーザーの目を引きつけたり、動きのあるUIを作ることができます。

レスポンシブ対応のSVGデザイン

SVGは画面サイズに合わせて伸び縮みすることができるので、スマホやタブレットでも見やすいデザインができます。

そのためには、サイズ指定の方法を工夫する必要があります。

ポイントとなるのはviewBox属性の使い方です。

以下がその例です。


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


このように書くと、どんなサイズの画面でも図形がきれいに表示されます。

レスポンシブ対応するためのコツは以下の通りです。

これにより、SVGはどんなデバイスでも見やすく表示できる便利な画像形式になります。

SVGアイコンの活用方法

SVGはアイコンとしてもとても使いやすいフォーマットです。

色を変えたり、サイズを調整したり、動きを加えることもできます。

Webサイトやアプリのデザインにぴったりです。

SVGアイコンの主な使い方は以下の通りです。

また、SVGアイコンは以下のようなメリットがあります。

このように、SVGアイコンはデザインを自由にコントロールできるのが最大の魅力です。

工夫次第で、オリジナリティのあるWebサイトを作ることができます。

実用的なSVG活用例と実装テクニック

WebデザインでのSVG活用シーン

SVGは見た目を美しく保ちつつ、軽量で柔軟なデザインを可能にするため、多くのWebデザインで活用されています。

具体的にどのような場面で使われているかを知ることで、自分のサイトにもすぐ取り入れられます。

代表的な活用シーンは次のようなものがあります。

SVGはデザインとパフォーマンスの両方を高めるため、現代のWebサイトには欠かせない技術となっています。

ボタンやナビゲーションに使うSVG

SVGはボタンやメニューなどのインターフェース要素に組み込むことで、見た目をより洗練されたものにできます。

特にハンバーガーメニューや戻るボタンなど、形の決まったアイコンはSVGとの相性が抜群です。

たとえば、次のようなコードで矢印アイコンをボタンに使えます。


<button>
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M15 6l-6 6 6 6" stroke="black" fill="none" stroke-width="2"/>
</svg>
</button>


SVGをボタンやナビゲーションに活用するポイントは以下の通りです。

このように、使い方次第で操作性とデザイン性の両方を向上させることができます。

SVGスプライトの使い方と利点

SVGスプライトとは、たくさんのアイコンや図形を1つのSVGファイルにまとめておく方法です。

Webページ内で同じようなアイコンを何度も使うとき、この方法を使うと表示が速くなり、管理も楽になります。

まず、SVGスプライトの使い方の流れは以下の通りです。

このようにまとめることで、次のような利点があります。

SVGスプライトを使うことで、多くのアイコンを効率的に管理しながら、サイト全体のスピードも向上させることが可能です。

JavaScriptと連携した動的SVG操作

SVGは静的な図だけでなく、JavaScriptを使って動的に形を変えたり、色を変えたり、アニメーションを加えることができます。

ユーザーの操作に応じてSVGの見た目を変えることで、よりインタラクティブなWeb体験が実現できます。

以下はクリックで色が変わるSVGの例です。


<svg id="myCircle" width="100" height="100">
<circle cx="50" cy="50" r="40" fill="blue" />
</svg>
<script>
document.getElementById("myCircle").addEventListener("click", function() {
this.children[0].setAttribute("fill", "red");
});
</script>


JavaScriptと連携するときのポイントは次の通りです。

この方法を使えば、ユーザーがクリックやホバーしたときに反応する、わかりやすいUIが作れます。

CSSでSVGをスタイリングする方法

SVGはHTMLと同じようにCSSで見た目を整えることができます。

色を変えたり、サイズを指定したり、アニメーションを加えたりと、さまざまなデザインが可能です。

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


<style>
svg path {
fill: red;
transition: fill 0.3s;
}
svg:hover path {
fill: green;
}
</style>


CSSでスタイリングするときの主なポイントは次の通りです。

CSSを使えば、HTMLのスタイルと同じようにSVGもコントロールできるため、デザインの自由度がとても高くなります。

描画の最適化とパフォーマンス対策

SVGは便利な反面、重くなると読み込みが遅くなることもあります。

特に複雑な図やアニメーションをたくさん使うと、スマホなどでは動作がカクカクすることもあるので注意が必要です。

描画を最適化するための方法は次のようになります。

これらを実施することで、SVGを使っていてもサイトの表示速度を落とさず、快適なユーザー体験を保つことができます。

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

SVGを使うときは、見た目だけでなく、誰でも使いやすくする工夫（アクセシビリティ）も大事です。

視覚的に見えない人や、音声読み上げを使う人のために、正しい対応が求められます。

アクセシビリティを高めるための方法を紹介します。

このように工夫することで、すべてのユーザーがSVGの内容を正しく理解できるようになります。

Webサイトは誰にとってもやさしい作りにすることが大切です。

SVGの互換性とSEOへの影響

主要ブラウザでのSVG対応状況

SVGは現在、ほとんどの主要ブラウザで標準的にサポートされています。

そのため、パソコンでもスマートフォンでも、安心して使うことができます。

ただし、一部の古いバージョンでは表示できなかったり、アニメーションが正しく動作しないことがあります。

以下に、主要なブラウザごとの対応状況をまとめます。

このように、ほとんどのユーザー環境で使える一方で、古いIE（インターネット・エクスプローラー）は注意が必要です。

必要に応じて、代替の画像を用意するのがよいでしょう。

モバイル端末での表示確認ポイント

SVGはスマホやタブレットなどのモバイル端末でもきれいに表示されます。

ただし、小さな画面に最適化する工夫が必要です。

文字が読みづらくなったり、タップしづらい位置にSVGが配置されていると、ユーザーの体験が悪くなってしまいます。

以下の点に注意すると、モバイルでも見やすくなります。

これらの工夫をすることで、どんな端末でも快適にSVGを表示することができます。

SVGファイルの軽量化と最適化方法

SVGは元々軽い画像形式ですが、たくさんの情報を含むとファイルサイズが大きくなり表示が遅くなることがあります。

とくに複雑なパスや余分な属性が含まれていると、読み込みに時間がかかることがあります。

SVGを最適化するためには、次のような方法が有効です。

これらを実践することで、表示速度が上がり、ユーザーの離脱も防げるようになります。

検索エンジンとSVGの関係性

SVGはコードベースの画像なので、検索エンジンに読み取ってもらえる可能性がある画像形式です。

ただし、通常のJPEGやPNGのように画像として認識されるわけではなく、HTMLと同じように扱われることが多いです。

そのため、検索エンジンとの相性を良くするには、次のような工夫が必要です。

これにより、検索エンジンにSVGの内容が認識されやすくなり、SEO効果を高めることができます。

画像検索にSVGは影響するか

Googleなどの画像検索では、JPEGやPNGのようなビットマップ画像がメインで表示されることが多く、SVGは画像検索結果に出にくいという特徴があります。

これは、SVGがテキストベースであることや、構造的に画像とは違う扱いになるためです。

それでも、次のような対応をすれば、SVGでもある程度の影響を与えることができます。

このように、工夫次第でSVGも検索に反映させることは可能です。

特にSEOを意識するなら、画像形式との使い分けも大切です。

SVG使用時のalt属性の扱い方

SVGはHTMLに直接書く場合と、<img>タグで使う場合で、alt属性の扱い方が異なります。

画像として読み込む場合は、他の画像と同じようにalt属性を書くことで、スクリーンリーダーやSEOにも効果があります。

具体的には以下のように書きます。


<img src="logo.svg" alt="サイトのロゴマーク">


しかし、インラインSVGの場合はalt属性が使えません。

その場合は、次のような方法を使って意味を伝える必要があります。

これらの方法を組み合わせることで、SVGを正しく読み上げたり、検索エンジンに伝えることが可能になります。

HTML構造とSEO最適化のポイント

SVGをWebページで使うときは、HTML全体の構造を意識することも大切です。

SVGばかりに注目すると、肝心のテキストや見出しが乱れて、SEOに悪い影響を与えることがあります。

以下のようなポイントを押さえると、SEOとSVGの両立がしやすくなります。

このようにHTMLの構造を整えることで、SEOを保ちながらSVGの魅力も活かせるページになります。

検索結果にも強く、見た目もきれいなWebサイトを目指しましょう。

まとめ

これまで「HTML svgの基本とグラフィックの描画方法」について、たくさんのポイントを紹介してきました。

最後に大事なところを簡単にまとめます。

まずは簡単な図形からSVGを試して、Webサイトをもっと楽しく、わかりやすくしてみましょう。