PugでSVGを使用する

PugでSVGを使う時に少し迷ったのでメモ。

サンプルコード

SVGを使う方法はいくつかありますが、簡単なのはimgタグで埋め込む方法です。

Pug

img(src="test.svg")

HTML

<img src="test.svg">

単に埋め込むだけでよいならこれで問題ないですが、オンマウスで色を変更するなど何らかの操作が必要な場合、svgタグでHTML内に直接記述する必要があります。
imgタグで埋め込むデモページ

ただsvgタグで埋め込む場合、複雑な内容のsvgだとコードが長くなってしまうのと、複数ページに配置する時に管理が面倒になります。

いろいろ試してみたところ、includeで埋め込むことができるようです。

Pug

include /svg/test.svg

HTML

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50" height="50" viewBox="0 0 50 50">
	<rect width="50" height="50" x="0" y="0" fill="blue" />
</svg>

これでsvgを1つのファイルで管理できるようになり、Pugのコードも短く記述できるようになりました。
svgタグで埋め込むデモページ