Blog本サイトはJavaScriptが有効の状態にないと正常に表示されません。このメッセージが表示される場合、ブラウザの設定状況をご確認ください。長野県を拠点に活動するフリーランスのグラフィック&WebデザイナーのWebサイトです。SVG前回のエントリーでSVGスプライトを非同期で読み込む方法を紹介しましたが、今回はSVGスプライトをGulpで自動生成する方法を紹介します。ここで生成するSVGスプライトは、HTMLにuseタグを使ってインラインで表示させるもので、CSSのbackgroundでは表示させることができませんのでご了承ください。インライン用のSVGスプライトの場合、(色情報等を削除するため)目視で確認することが難しくなってしまうので、SVGスプライトの生成と同時に一覧表示させるためのHTMLも自動で生成できるようにしています。Githubリポジトリにすべてのコードをあげていますので、以下のリンクからダウンロードすることができます(構成やディレクトリ等、ここで記載しているものとは若干異なります)。https://github.com/42EG4M1/svg-sprite-generatorgulpの環境まずはgulpの環境やタスク、ディレクトリ等の構成を記載しておきます。プラグイン使用するプラグインは以下の通りです。gulp-svgminSVGを圧縮するプラグイン。改行やコメントアウト、不要な属性等を削除。gulp-svgstore複数のSVGファイルを一つにまとめるプラグイン。各SVGファイルのsvgタグをsymbolに置き換え、ファイル名をidにセット。gulp-cheerioHTMLやXMLを書き換えるプラグイン。jQueryライクに操作できる。余分な要素や属性を削除し、リストHTML生成時に使用する変数を定義。gulp-template静的HTMLを生成するプラグイン。gulp-cheerioと合わせて使用する。事前に用意しておいたHTMLへデータ(SVG)を流し込む。gulp-renameファイル名を変更するプラグイン。入れておくと便利です。タスクタスクは以下のような感じになります。基本的に、Illustratorで作成したSVGを対象としています。【追記】gulp-cheerioをそのまま使用するとviewBoxが全て小文字(viewbox)に変換されてしまい、HTML上でSVGがうまく表示されない不具合がありました。gulp-cheerioにオプションを指定することで回避できるため、以下赤文字部分を追加し訂正いたしました。.pipe(gulp.dest('./dist/images/'));});cheerioの辺りがごちゃごちゃしてますが、svgminで削除されない不要な要素等を削除しつつ、SVGスプライトを一覧表示するための設定とかを行っています。不要な要素や属性の削除は、Illustratorで作成されたSVGに合わせているため、他のツールで作成されたSVGの場合には、それに合わせた書き方が必要になる場合があります。推奨の保存方法を記載しています。情報が少なくて、もしかするともっと良い書き方があるかもしれません。テンプレートエンジンみたいな感じで、EJSのように書くことができるようです(以下参照)。HTMLテンプレートSVGスプライトを一覧表示するために、HTMLのテンプレートを用意しておきます。</div></body></html><%=と%>で、gulpfile.jsのtempで定義した変数を使用することができます。<%と%>のデリミタでeachやif等も利用することができるようです。名前を変えて新たに生成させるような仕組みになっています。ルートに生成させていますが、これは好みで変更してください。ディレクトリディレクトリ構成は以下のような感じになっています。...赤文字部分がタスクの実行で生成されるディレクトリやファイルです。スプライトにしたいSVGファイルは、./src/images/svg/に置いていきます。SVGスプライトの生成手順この機能を使って、実際にSVGスプライトを生成する方法を簡単に説明します。CCでの作成を推奨しています。IllustratorでSVGを作成(保存)する場合、幾つか方法があり、出力結果が微妙に異なります。基本的にはどの保存方法でも対応できるようにしています(つもりです)が、推奨の保存方法は、Illustrator上で対象となる画像を選択しcommand+cでコピーエディタで新規ファイルを作成しcommand+vで貼り付け最終行に空白行がある場合は削除し、ファイル名(半角英数.svg)をつけて保存です。node.」というエラーが出る場合があります)。ファイル名は、そのままsymbolタグに付与されるidとなり、表示させる時に使用することになるので、なるべく分りやすいものがいいと思います。svgフォルダにまとめてビルド作成したSVGファイルは全て./src/images/svg/の中に置き、良きところでタスクを実行します。svgタスクを実行すると、./dist/images/にsprite.min.svgというSVGスプライトファイルと、ルートに_sample.htmlという一覧(以下)が生成されます。各画像(アイコン)の下に記載されているのがidになります。これを、表示させたいところでuseタグのxlinkにセットし表示させます。xlink:href="#twitterIcon"/></svg>以上で完了です。設置が完了した後はCSSで色を指定することになるのですが、上記の方法だと1画像につき1色しか使うことができません。1つの画像に対して2色以上使いたい場合は、(スプライト前の)元SVGファイルの対象となる要素に対して個別にclassをつけて、CSSでそれぞれ色を指定する必要があります。classをつける要素はg要素でもpath要素でもcircle要素でも何でも大丈夫です。元SVGファイルでは、「st」または「cls」で始まるclass属性は削除されてしまいますが、それ以外のclass属性はスプライト後も残りますので、個別に設定することができます。色はCSSで管理したいというのがあって、それを維持したままうまく自動化する方法が見つからなかったため少し面倒になってしまいますが、2色以上使いたい場合は、上記のような対応をとっていただければと思います。1色だけの単純なアイコンで使う場合には特に問題になることはないです。まとめずっとSVGの(自分なりの)効率的な使用方法を模索してきて、個人的には前回のエントリーと合わせてこの方法がしっくりきています。テスト的にはもちろん使っていますが、実際のプロジェクトではまだ組み込んだことはないので、使用して何かあればまた追記したいと思います。使ってみて何か変なところがあればコメント等で教えていただけると助かります。以下のサイトを参考にさせていただきました。MonSVGでハンドライティングアニメーションを実装する文字を書き順通りに徐々にアニメーションさせて描画する「ハンドライティングアニメーション」をSVGで実装する方法。同じようなことをやっていて、それのSVGバージョン。正確には「バブリング」とは呼ばないと思うし、ちょっと意味合いが違うかもしれないけど、CSSで子要素に与えたtransitionが親要素へ伝播し、アニメーションの挙動をおかしくさせる現象に何度か遭遇した。vol.7」に参加および登壇させていただきました。感は否めませんが、Webデザイナーとして、WordPressの開発環境にVCCWを...ABOUT長野県北部を拠点にフリーランスとして活動しています。Webサイトの制作をメインに、グラフィックデザインなどの制作も行っています。ARCHIVES2017年6月2017年4月2017年3月2017年1月2016年12月2016年9月2016年8月2016年7月2016年4月2016年3月2015年12月2015年10月2015年9月2015年6月2015年5月2015年3月2015年2月2015年1月2014年12月2014年11月2014年10月2014年9月2014年8月2014年6月2014年5月2014年4月2014年3。