アイコン

ほとんどの画像はコンテンツの一部ですが、アイコンはユーザー インターフェースの一部です。 UI のテキストが調整、適応されるのと同じように、サイズも調整する必要があります。

スケーラブルなベクター グラフィック

写真画像の場合、画像形式には JPG、WebP、AVIF など多くの選択肢があります。 写真以外の画像の場合は、PNG（Portable Network Graphics）形式と Scalable Vector Graphics（SVG）形式から選択できます。

PNG と SVG はどちらもフラットカラーの領域にうまく対処でき、どちらも画像の背景を透明にすることができます。 PNG を使用する場合は、サイズの異なる複数のバージョンの画像を作成し、img 要素で srcset 属性を使用して画像をレスポンシブにする必要があります。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>

笑顔。

HTML 内に SVG を挿入することもできます。

<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>

もう 1 つの方法は、リンクやボタン自体にユーザー補助機能用の名前を追加し、画像が表示用であることを宣言することです。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;
}

リソース

アイコンは、サイトのブランディングの重要な要素です。次に、テーマ設定を活用してブランディングの他の側面をレスポンシブにする方法について説明します。

理解度をチェックする

アイコンに関する知識をテストする

SVG は、1 つのファイルまたは <svg> コードブロックであらゆるピクセル密度を処理できます。

正しい
SVG には、あらゆるピクセル密度、スケール、ズームで図形や線を描画する方法が含まれています。
False
.png や .jpg とは異なり、SVG では srcset 要素や <picture> 要素は必要ありません。

HTML に直接挿入する SVG コードには、どのようなメリットがありますか。

CSS からスタイル設定可能
SVG アイコンの形状をボタンやブランドカラーに合わせます。
ダウンロードは不要です。
すべての手順が記載されています。
デフォルトで遅延読み込み。
ダウンロードはおまかせください。
CPU 使用率が少ない。
私が作りました。
新しいアセットのないライトモードまたはダークモード。
メディアクエリではインライン SVG スタイルを変更可能