PugでSVGを使う時に少し迷ったのでメモ。
サンプルコード
SVGを使う方法はいくつかありますが、簡単なのはimgタグで埋め込む方法です。
Pug
1 | img(src="test.svg") |
HTML
1 | <img src="test.svg"> |
単に埋め込むだけでよいならこれで問題ないですが、オンマウスで色を変更するなど何らかの操作が必要な場合、svgタグでHTML内に直接記述する必要があります。
imgタグで埋め込むデモページ
ただsvgタグで埋め込む場合、複雑な内容のsvgだとコードが長くなってしまうのと、複数ページに配置する時に管理が面倒になります。
いろいろ試してみたところ、includeで埋め込むことができるようです。
Pug
1 | include /svg/test.svg |
HTML
1 2 3 | <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タグで埋め込むデモページ
コメントが承認されるまで時間がかかります。