ほとんどの画像はコンテンツの一部ですが、アイコンはユーザー インターフェースの一部です。 アイコンは、UI のテキストが拡大縮小して調整されるのと同じように、拡大縮小して調整される必要があります。
Scalable Vector Graphics
写真画像の場合、画像形式は JPG、WebP、AVIF など、さまざまな選択肢があります。 写真以外の画像の場合は、Portable Network Graphics（PNG）形式と Scalable Vector Graphics（SVG）形式のどちらかを選択できます。
PNG と SVG はどちらも単色の領域の処理に優れており、画像の背景を透明にすることができます。
PNG を使用する場合は、さまざまなサイズの画像の複数のバージョンを作成し、srcset 属性を img 要素で使用して画像をレスポンシブにする必要があります。SVG を使用する場合は、デフォルトでレスポンシブになります。
PNG（および JPG、WebP、AVIF）はビットマップ画像です。ビットマップ画像は情報をピクセルとして保存します。SVG では、情報は描画命令として保存されます。ブラウザが SVG ファイルを読み取ると、命令がピクセルに変換されます。最も優れている点は、これらの命令が相対的であることです。線や図形を記述するために使用する寸法に関係なく、すべてが適切な鮮明さでレンダリングされます。さまざまなサイズの SVG を複数作成する代わりに、すべてのサイズで機能する 1 つの SVG を作成できます。srcset 属性を使用する必要はありません。
<img src="image.svg" alt="A description of the image." width="25" height="25">
<img src="image.svg" alt="A description of the image." width="250" height="250">
XML は、SVG ファイルに命令を記述するために使用されます。これは HTML のようなマークアップ言語です。
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="-21 -21 42 42" width="100" height="100">
<title>Smiling face</title>
<circle r="20" fill="yellow" stroke="black"/>
<ellipse rx="2.5" ry="4" cx="-6" cy="-7" fill="black"/>
<ellipse rx="2.5" ry="4" cx="6" cy="-7" fill="black"/>
<path stroke="black" d="M -12,5 A 13.5,13.5,0 0,0 12,5 A 13,13,0 0,1 -12,5"/>
</svg>
SVG を HTML 内に配置することもできます。
<figure>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="-21 -21 42 42" width="100" height="100">
<title>Smiling face</title>
<circle r="20" fill="yellow" stroke="black"/>
<ellipse rx="2.5" ry="4" cx="-6" cy="-7" fill="black"/>
<ellipse rx="2.5" ry="4" cx="6" cy="-7" fill="black"/>
<path stroke="black" d="M -12,5 A 13.5,13.5,0 0,0 12,5 A 13,13,0 0,1 -12,5"/>
</svg>
<figcaption>
A description of the image.
</figcaption>
</figure>
このように SVG を埋め込むと、ブラウザがリクエストする必要がある回数が 1 回減ります。画像は HTML と一緒に（HTML の中に）届くため、ダウンロードを待つ必要はありません。また、後で説明するように、このように SVG を埋め込むと、スタイルの設定をより細かく制御できます。
アイコンとテキスト
アイコン画像は、透明な背景にシンプルな図形が描かれていることがよくあります。SVG はアイコンに最適です。
ボタンやリンクにテキストとアイコンが含まれている場合、アイコンはプレゼンテーション用です。重要なのはテキストです。img 要素を使用する場合、alt 属性が空の場合は、画像がプレゼンテーション用であることを示します。
<button>
<img src="hamburger.svg" alt="" width="16" height="16">
Menu
</button>
CSS はプレゼンテーション用であるため、アイコンを CSS の背景画像として配置できます。
<button class="menu">
Menu
</button>
.menu {
background-image: url(hamburger.svg);
background-position: 0.5em;
background-repeat: no-repeat;
background-size: 1em;
padding-inline-start: 2em;
}
SVG を HTML 内に配置する場合は、aria-hidden 属性を使用して、支援技術から非表示にします。
<button class="menu">
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 80" width="16" height="16">
<rect width="100" height="20" />
<rect y="30" width="100" height="20"/>
<rect y="60" width="100" height="20"/>
</svg>
Menu
</button>
スタンドアロン アイコン
ボタンとリンクの目的を明確にする場合は、ボタンとリンク内にテキストを使用します。テキストなしでアイコンを使用することもできますが、特定のアイコンの意味を誰もが理解しているとは限りません。不明な場合は、実際のユーザーでテストしてください。
テキストを伴わないアイコンを使用する場合、アイコンはプレゼンテーション用ではなくなります。CSS の背景画像は、アイコンを表示する適切な方法ではありません。アイコンには、HTML でユーザー補助機能用の名前を付ける必要があります。
img 要素を使用する場合、アイコンのユーザー補助機能用の名前は alt 属性から取得されます。
<button>
<img src="hamburger.svg" alt="Menu" width="16" height="16">
</button>
別の方法として、リンクまたはボタン自体にユーザー補助機能用の名前を付け、画像がプレゼンテーション用であることを宣言することもできます。aria-label 属性を使用して、ユーザー補助機能用の名前を指定します。
<button aria-label="Menu">
<img src="hamburger.svg" alt="" width="16" height="16">
</button>
SVG を HTML 内に配置する場合は、リンクまたはボタンの aria-label 属性を使用してユーザー補助機能用の名前を付け、アイコンの aria-hidden 属性を使用します。
<button aria-label="Menu">
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 80" width="16" height="16">
<rect width="100" height="20" />
<rect y="30" width="100" height="20"/>
<rect y="60" width="100" height="20"/>
</svg>
</button>
アイコンのスタイル設定
SVG アイコンを HTML に直接埋め込む場合は、ページ内の他の要素と同様に、アイコンの一部にスタイルを設定できます。img 要素を使用してアイコンを表示する場合は、これを行うことはできません。
次の例では、SVG 内の rect 要素の fill 値が blue に設定され、ボタンのテキストのスタイルと一致しています。
button {
color: blue;
}
button rect {
fill: blue;
}
hover スタイルと focus スタイルも適用できます。
button:hover,
button:focus {
color: red;
}
button:hover rect,
button:focus rect {
fill: red;
}
リソース
- CSS の背景画像である SVG にスタイルを設定する必要がある場合は、SVG の背景のカラー化に関する Una の記事をご覧ください。
- Sara Soueidan が、アクセシビリティ対応のアイコンボタンについて記事を書いています。
- Scott O'Hara が、アクセシビリティ対応の画像と SVG のコンテキストに応じたマークアップについて記事を書いています。
- グラフィック デザイン ツールを使用して SVG をエクスポートする場合は、SVGOMG を使用して出力を最適化します。
アイコンは、サイトのブランディングの重要な要素です。次は、テーマ設定の機能を使用して、ブランディングの他の要素をレスポンシブにする方法について説明します。
理解度をチェックしましょう
アイコンに関する知識をテストする
SVG は、1 つのファイルまたは <svg> コードブロックで任意のピクセル密度を処理できます。
.png や .jpg とは異なり、SVG には srcset や <picture> 要素は必要ありません。HTML に直接記述された SVG コードにはどのようなメリットがありますか？