SVG を表示するのに、基本的には Pug ミックスイン +svg を使います。

+svg({ name: 'example', alt: 'altテキスト' })

実装手順

SVG も画像同様、画像アセットで書き出すか、個別に用意します。

srcディレクトリに画像を配置

src/modules/svg 以下に SVG ファイルを置きます。

ここに配置する SVG は、アウトライン化されたものでfill や stroke に色が設定されていないものにする必要があります。（デザインと同じ色のまま表示するのであれば fill, stroke はそのままで大丈夫です。）

Pug で記述

+svg({ name: 'example', alt: 'altテキスト' }).example

Pug では、+svgミックスインのオプションname の値に、SVG ファイル名から拡張子を取った文字列（example.svgの場合はexample）を指定します。

alt オプションの値には、img タグの alt 属性と同じような代替テキストを指定します（省略可能）。
ミックスイン内部では aria-label 属性として出力されます。
<svg>タグには alt 属性は存在しませんが、代わりに aria-label 属性を付与することでテキスト情報を追加できます。

色をスタイルで指定

デフォルトで文字と同じ色（currentColor）になりますが、CSS で親要素の color 、または自身の<svg>タグに fillスタイルを指定することで色を変更できます。

色を変更する必要がない SVG は、 +img ミックスインか <img> タグで通常の画像として読み込みます。

サイズ指定

isSizeNaturalオプションをtrueにすると、元の SVG ファイルと同じサイズで表示されます。

isSizeFontオプションをtrueにすると、親要素のfont-sizeと同じサイズで表示されます。

SVG スプライト

src/modules/svg ディレクトリに配置した SVG ファイルは、gulp-svg-symbolsを使い 1 つの SVG ファイルにまとめています。
読み込み数を減らすことで、読み込み速度改善に繋げています。