PugでSVGをインクルードして記述を楽する方法
ここ最近SVGを使用することがすっかりスタンダードになってきましたが、SVGタグをコードに直接記述するのは見通しが悪くなったりごちゃごちゃしてしまうので億劫になってしまうこともあるかと思います。
Pugを使用していればSVGファイルをインクルードさせるだけで簡単に記述できるので、その方法をご紹介します。
いきなり結論からですが、下記のようにincludeを使い、対象ファイルをsvgにするだけです。
include /_src/images/example.svgとっても簡単ですね。なぜこんな簡単な方法に気づいていなかったのか…。
今までは、ホバー時に色を変えたり、同じ画像の色違いやサイズ違いがない場合はimgタグを使用していましたが、後々になってホバー時に色を変えるなどの処理が必要となる場合がありました。
そのため、極力svgタグを使用してコーディングをしておきたいところですが、記述量の多い複雑な画像の場合、コードがごちゃごちゃしてしまったり、複数ページで使用していたものに後々修正が入って地道と修正…ということになってしまうこともありました。
例えば「logo.pug」のように、svgタグだけが書いてある専用のファイルを作成して対応することもできるのですが、svgファイルが増えるごとにわざわざpug化するのもめんどくさく億劫でした。
しかし、先にも書いた通りincludeで指定すれば、わざわざ「logo.pug」のような専用のファイルを作ることもないし、画像ファイルを修正すれば複数ページで使用していても全て修正もでき、コードは1行だけなのでごちゃごちゃもしないと、正直いいことづくしです。
これなら積極的にSVGも使用していけるので、普段Pugを利用している方はぜひお試しください。
