2.IDEA

JP only

gulp-injectを使ってSVGファイルの中身をHTMLに自動で埋め込むスクリプト

gulpを使ってSVGファイルからHTMLで指定した場所にSVGの中身を埋め込むスクリプトを書きました。

SVGを使用する方法は、HTMLに直接<svg>要素を埋め込んだり、<img>等で外部ファイルを読み込んだりする方法がありますが、個人的には以下の理由から直接埋め込むのが好きです。

  • HTTPリクエストが減る
  • アニメーションできる(これは、<object>, <embed>, <iframe>でも可)

先日見た記事に、HTML5 では SVG 要素によって直接 HTML 文書内にSVGを記述してしまえば埋め込みは可能ですが、メンテナンスが面倒なので通常は使用しません。と書いてあったので、できるところまで自動化してみました。

使い方

以下のgithubページを見ればわかると思います。

一応説明しておくと、埋め込みたいファイルパスが/asset/img/circle.svgだったら、以下のコメントをHTML内の埋め込みたい場所に書けば良いです。

<!-- asset/img/circle:svg --><!-- endinject -->

minifyして.minをつけている場合(/asset/img/circle.min.svg)でも、同じコメントで大丈夫です。

<!-- asset/img/circle:svg --><!-- endinject -->

あと、injectsvg.jssrcの場所やdestの場所は、適宜書き換えて下さい。

外部ファイル参照のメンテナンス性にはかなわない

なんだかんだ、自動化しても結局、<img>等の外部ファイル参照ほどのメンテナンス性はないです。

<img>等の外部ファイル参照の場合、ファイルを差し替えさえすればgulpとかを走らせることなく変更できるんですよね。なので、開発チームから離れてCMSで運用されているサイトだったら、結局外部ファイル参照を選択することになるんじゃないかと思いました。