SVG入門 #6 SVGをWebページに表示する — imgタグ・インライン・CSS背景の使い分け

SVGのアイコンやロゴを用意したものの、WebページのどこにどうHTMLを書けば表示できるのか分からない、と手が止まっていませんか。

SVGをWebページに表示する方法は主に3つあり、imgタグで読み込む方法、HTMLにSVGのコードを直接書く方法、CSSの背景画像にする方法を目的に合わせて使い分けます。

SVG入門シリーズの6回目です。

この記事では、HTMLでSVGを表示する3つの方法と使い分け、サイズの指定、背景の透過、表示されないときの確認点を、実際に表示される見本つきで初心者向けに解説します(SVGそのものについてはSVGファイルとはで解説しています)。

SVGをWebページに表示する基本

まずは、SVGをHTMLで表示する3つの方法の全体像と、この記事で使うSVGファイルの中身を確認しましょう。

SVGを表示する3つの方法

SVGをWebページに表示する方法は、imgタグ・インラインSVG・CSSのbackground-imageの3つを押さえておけば十分です。

ここでいう「タグ」とは、HTMLで<img>のように<と>で囲んで書く命令のことです(HTMLの基本はHTMLとはで解説しています)。

3つの方法は、見た目はほぼ同じように表示できますが、「CSSで色を変えられるか」「読み上げソフトに伝わるか」などの性質が違います。

方法	書き方	主な特徴	向いている使い道
imgタグ	HTMLに`<img src="ファイル名.svg">`と書く	いちばん手軽で、代替テキスト(alt)を付けられる。ページのCSSでSVGの中の色は変えられない	ロゴ、イラスト、図解など
インラインSVG	HTMLの中にSVGのコードをそのまま貼る	ページのCSSでSVGの中の色などを変えられる。HTMLが長くなる	ホバーで色を変えたいアイコンなど
CSSのbackground-image	CSSに`background-image: url("ファイル名.svg");`と書く	要素の背景として表示する。読み上げソフトには伝わらない	飾りの模様、背景のイラストなど

MDN(Web技術の解説を公開しているMozillaのサイト)でも、SVGをHTMLに追加する方法として、この3つが長所・短所とともに紹介されています(MDN「HTML へのベクターグラフィックの追加」)。

この記事で使うSVGファイルの中身

この記事では、目玉焼きの形をした小さなアイコンを例に使います。

次のコードを、テキストエディタでegg.svgという名前で保存したものがSVGファイルです。

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="44" fill="#FFFFFF" stroke="#3A332A" stroke-width="4"/>
  <circle cx="50" cy="50" r="20" fill="#FFBD07"/>
</svg>

上のコードを表示した結果(白身の円と黄身の円を重ねた目玉焼きのアイコン)

1行目の<svg>が「ここからSVGの絵です」という宣言で、その中の2つの<circle>が白身と黄身の円を描いています。

コードの細かい読み方はシリーズの7回目で扱うので、ここでは「SVGは文字で書かれた絵のデータ」とだけ覚えておけば大丈夫です。

SVGをHTMLで表示する方法と使い分け

ここからは、3つの方法それぞれの書き方と、サイズの指定、背景の透過について、実際のコードで見ていきます。

方法1:imgタグで読み込む

いちばん手軽なのは、PNGやJPGと同じように<img>タグでSVGファイルを読み込む方法です。

書き方が普通の画像と変わらないので、HTMLを学び始めたばかりの人でもすぐに使えます。

次のコードは、HTMLファイルと同じフォルダに置いたegg.svgを表示する例です。

<img src="egg.svg" alt="目玉焼きのアイコン" width="100" height="100">

srcにはSVGファイルの場所を、altには画像が見えない人や読み上げソフトのための説明文(代替テキスト)を書きます。

ここでいう「属性」とは、srcやaltのように、タグに付けて細かい設定をする部分のことです。

このファイルをブラウザで開くと、表示される見た目は、前の見出しで表示した目玉焼きのアイコンと同じになります。

imgタグで読み込んだSVGはブラウザに保存(キャッシュ)されるので、同じアイコンを複数のページで使うときも読み込みが速くなります。

一方で、imgタグで読み込んだSVGは、ページ側のCSSで中の色を変えたり、JavaScriptで動かしたりできません(MDN「画像としての SVG」)。

色を変える必要がないロゴやイラストなら、まずはimgタグを選んでおけば問題ありません。

方法2:HTMLに直接書く(インラインSVG)

SVGはもともと文字で書かれたデータなので、ファイルとして読み込まずに、HTMLの中にコードをそのまま貼り付けることもできます。

この書き方を「インラインSVG」と呼びます。

次のコードは、egg.svgの中身をHTMLに直接書いた例です。

<p>今日の朝ごはん</p>
<svg width="100" height="100" viewBox="0 0 100 100" role="img" aria-label="目玉焼きのアイコン">
  <circle cx="50" cy="50" r="44" fill="#FFFFFF" stroke="#3A332A" stroke-width="4"/>
  <circle cx="50" cy="50" r="20" fill="#FFBD07"/>
</svg>

今日の朝ごはん

上のコードを表示した結果(文章のすぐ後にSVGのアイコンが表示される)

SVGファイルでは1行目に必要だったxmlns="http://www.w3.org/2000/svg"は、HTMLの中に書く場合は省略できます(MDN「<svg>」)。

代わりに、role="img"(これは1つの画像です、という意味)とaria-label(画像の説明文)を付けておくと、読み上げソフトにも何の絵かが伝わります。

インラインSVGの最大の長所は、ページのCSSでSVGの中の色を変えたり、マウスを乗せたときの変化をつけたりできることです(CSSで色を変える方法はシリーズの8回目で扱います)。

ただし、SVGのコードがそのままHTMLに入るのでHTMLが長くなり、同じアイコンを何か所にも貼ると、修正するときに全部を書き換える手間がかかります。

また、インラインSVGはimgタグのSVGのように、ブラウザに画像として保存(キャッシュ)されることはありません。

方法3:CSSのbackground-imageで背景にする

3つめは、CSSのbackground-imageプロパティで、要素の背景としてSVGを表示する方法です。

「プロパティ」とは、CSSでcolorやwidthのように、見た目のどの部分を設定するかを表す名前のことです。

次のコードは、見出しの文字の前に目玉焼きのアイコンを飾りとして表示する例です。

.menu-title {
  padding-left: 40px;
  background-image: url("egg.svg");
  background-repeat: no-repeat;
  background-size: 32px 32px;
  background-position: left center;
}

background-sizeの数値を変えるとアイコンの大きさが、background-positionを変えると表示する位置が変わります。

背景にしたSVGも、imgタグと同じく画像として扱われるので、ページのCSSで中の色を変えることはできません。

また、背景画像は読み上げソフトに存在が伝わらないため、意味のある情報を背景だけで伝えないようにしましょう(MDN「background-image」)。

なくても内容が伝わる飾りの模様やアイコンに使うのが、background-imageの正しい使いどころです。

3つの方法の使い分け

どの方法を使うか迷ったら、「CSSで色を変えたいか」「内容を伝える画像か、飾りか」の2つで決めると簡単です。

ホバーで色を変えるなど、ページのCSSでSVGの色を変えたいなら、インラインSVG
色は変えないが、ロゴや図解のように内容を伝える画像なら、imgタグ
なくても内容が伝わる飾りなら、CSSのbackground-image

上から順に確認して、最初に当てはまった方法を選びます。

迷ったときは、書き方がいちばん簡単なimgタグから始め、色を変えたくなったらインラインSVGに切り替える、という順番で問題ありません。

サイズを指定する(widthとheight)

SVGの表示サイズは、width(幅)とheight(高さ)で指定します。

SVGは点と線の位置を数値で記録した「ベクター形式」の画像なので、大きく表示しても小さく表示しても、輪郭がぼやけません。

次のコードは、同じ目玉焼きのアイコンを、widthとheightだけ変えて3つの大きさで表示する例です。

<img src="egg.svg" alt="目玉焼き(小)" width="32" height="32">
<img src="egg.svg" alt="目玉焼き(中)" width="80" height="80">
<img src="egg.svg" alt="目玉焼き(大)" width="160" height="160">

上のコードを表示した結果(この見本はインラインSVGで同じ大きさを再現したもの。160pxでも輪郭はなめらかなまま)

どの大きさでも輪郭がなめらかなのは、SVGの中のviewBox="0 0 100 100"という指定のおかげです。

viewBoxは「100×100の方眼紙に描いた絵」という設計図の大きさを表していて、ブラウザはその絵をwidthとheightで指定した大きさに拡大・縮小して描き直します(viewBoxの詳しい読み方はシリーズの7回目で扱います)。

サイズはCSSで指定することもでき、レスポンシブ(画面幅に合わせてレイアウトが変わる作り)のページでは、次のように幅だけを指定して高さを自動にする書き方がよく使われます。

.logo {
  width: 100%;
  max-width: 240px;
  height: auto;
}

max-widthの数値を変えると、画面が広いときの最大の大きさが変わります。

imgタグには、CSSでサイズを決める場合でもwidthとheightを書いておくのがおすすめです。

ブラウザが画像を読み込む前に縦横の比率を計算して場所を確保できるので、読み込み中にレイアウトがずれるのを防げます(MDN「<img>」)。

背景を透過させる

SVGは、図形を描いていない部分が最初から透明なので、PNGのように「透過で保存する」設定は必要ありません。

SVGの背景が白や色付きの四角で表示される場合は、SVGの中に背景用の四角形が描かれていることがほとんどです。

次のコードは、目玉焼きのアイコンの一番最初に、白い四角形(<rect>)を1行足したものです。

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
  <rect width="100" height="100" fill="#FFFFFF"/>
  <circle cx="50" cy="50" r="44" fill="#FFFFFF" stroke="#3A332A" stroke-width="4"/>
  <circle cx="50" cy="50" r="20" fill="#FFBD07"/>
</svg>

OK:見本A。背景の四角形がないSVG。円の外側からページの色が透けて見える

NG:見本B。上のコードを表示した結果。白い四角形が背景になり、色の付いたページで四角く浮いて見える

見本Aと見本Bは同じ黄色の箱の上に置いていますが、見本Bだけ白い四角が見えています。

SVGの背景を透過させたいときは、テキストエディタでSVGを開き、背景用の<rect>の行を削除すれば透明になります。

デザインツールで作った場合は、背景の四角形や、描いている枠そのものの塗りもSVGに書き出されることがあるので、書き出す前に塗りをなしにしておくとコードを触らずに済みます。

実践のポイント

SVGが表示されないときの確認点と、よくある疑問をまとめます。

注意点・よくある間違い

ファイルの場所(パス)が間違っていて、SVGが表示されない。
imgタグのsrcやCSSのurl()に書いたフォルダ名・ファイル名が、実際のファイルと一致しているか確認しましょう。
サーバーによっては大文字と小文字も区別されるので、Egg.svgとegg.svgは別のファイルとして扱われることがあります。
SVGファイルの<svg>にxmlns="http://www.w3.org/2000/svg"が書かれていない。
HTMLに直接書くインラインSVGでは省略できますが、ファイルとして読み込むSVGには必要です(MDN「始めましょう」)。
手で書いたSVGがimgタグで表示されないときは、まずここを確認しましょう。
パソコンでは表示されるのに、サーバーに上げると表示されない。
サーバーがSVGを「画像(image/svg+xml)」として送る設定になっていない可能性があります。
MDNでも、SVGがまったく表示されない場合はサーバーの設定を疑うよう案内されているので、自分で直せない場合はサーバーの管理者に確認しましょう。
imgタグや背景で読み込んだSVGの中の文字が、別の書体で表示される。
画像として読み込んだSVGは、外部のフォントや画像などを読み込めないため、Webフォントを指定した文字は意図した書体にならないことがあります(MDN「画像としての SVG」)。
ロゴなどの文字は、デザインツールで図形に変換(アウトライン化)してから書き出すと安心です。
background-imageを指定したのに、何も表示されない。
中身が空の要素は高さが0になり、背景を描く場所がありません。
要素に文字が入っているか、widthとheightで大きさが決まっているかを確認しましょう。
WordPressのメディアにSVGをアップロードしようとして、エラーになる。
WordPressは初期設定で許可しているファイル形式にSVGが含まれていないため、そのままではアップロードできません(WordPress Developer Resources「wp_get_mime_types()」(英語))。
WordPressでSVGを扱う方法は、別の記事で解説する予定です。

よくある質問

Q. imgタグで読み込んだSVGの色を、CSSで変えられる?
A. ページのCSSでは変えられません。
CSSで色を変えたい場合は、インラインSVGで表示しましょう(具体的な方法はシリーズの8回目で扱います)。
Q. SVGを大きく表示すると、画質は落ちる?
A. 落ちません。
SVGは形を数値で記録しているので、ブラウザが表示する大きさに合わせて描き直します。
ただし、SVGの中に写真などのPNG・JPG画像が埋め込まれている場合は、その部分だけ拡大すると粗くなります。
Q. 3つの方法のうち、どれを使えばいい?
A. 迷ったらimgタグがおすすめです。
書き方が簡単で、代替テキストも付けられます。
色を変えたいときはインラインSVG、飾りの背景にしたいときはbackground-imageを選びましょう。