SVGデータをCSSのbackground-image向けのBase64コードにかんたん変換ツール

今回のデモ表示用に描いたスイセンの花。イラレのアピアランスパネルを駆使してアンカーポイント1点の1オブジェクトのみで描く遊び。普通に描いた方が10倍早いけど、良い練習にはなるのでオススメ。

目次・あらすじ

Bootstrap3→4への変化でCSSへのインラインSVG埋め込みに変わった箇所をみつけた
SVGコードをCSSのbackground-image向けのコードにかんたん変換ツール

SVG、すっかりどこでも見かけるようになりましたね。近年、僕が仕事で作るサイトでもロゴや主要なアイコン画像を中心に、積極的に使うようになりました。

ファイルサイズ、解像度、動的な扱いやすさ等で、これまでのJPEG、PNG、GIFに比べたメリットの多いSVGだけど、とにかく取扱がめんどうに感じるのが正直なところです。

Bootstrap3→4への変化でCSSへのインラインSVG埋め込みに変わった箇所をみつけた

HTML/CSS/JSフレームワークのBootstrapのバージョン3と4のコードを見比べてたとき、メニューボタンのアイコン( こんなの→ )がバージョン3まではこんな感じで「icon-bar」クラスが割り当てられたspanタグを3つ並べて線を描画されてました。

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
  <span class="sr-only">Toggle navigation</span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
</button>

ところが、Bootstrap4からは、HTML部分は少しシンプルになり、

<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>

CSS側でbackground-imageプロパティでURIエンコードされたSVGが直接埋め込まれれる様になりました。

.navbar-inverse .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.5)");
}

主にスマホブラウザ向け表示の箇所である事もあるだろうけど、広く使われている大きなフレームワーク内で活用されているのをみると、これからはこういった形でもどんどん使っていって良さそうな気がしてましたね。

けど、このコードを作るのが超めんどくせぇ！

SVGコードをCSSのbackground-image向けのコードにかんたん変換ツール

……と言うわけでつくってみました。

Illustrator内で作ったコードを極力らくちんにURIエンコードしたSVGを埋め込んだbackground-imageのコードを生成するようにしました。本当はイラレ内で動く拡張機能かスクリプトを作った方が良いのだけど、実務ですぐに欲しかったので、とりあえず今回は僕にとって身近な手法で済ませました。

使い方は、以下の操作をすれば何となく分かると思います。動作を分かりやすくするために、生成したコードをこのページの背景に適用させるようにしました(笑)

とりあえず「サンプル1」のボタンを押す
「base64に変換 + CSSプロパティ生成」のボタンを押す

SVGコード

Illustrator上でコピーした物を直接貼り付けても大体変換できますが、クリッピングマスク等を利用したオブジェクトでは動きません。基本的には別名保存や「スクリーン用に書き出し」を使うのが一番です。
SVGOMGやSVG Minify等のSVG最適化サービスで調整した物なら、さらにスマートなコードになります。

base64コード

上記のSVGコードから余計なコメントや空白を削除し、base64エンコードしたもの。

CSSプロパティ

生成されたCSSのbackground-imageプロパティをスタイルシートの任意の要素に適用させます。

テキストエリア内のコードを調整して「background-color」等のプロパティを追加して再プレビューすることもできます。

……ちなみに、今回のプログラム、肝となる変換部分は5分あれば十分書ける単純な物(ほぼencodeURIComponent()を使うのみ)だけど、プレビュー表示回りの調整がその何十倍も手間が掛かりました。

~~実務ですぐに使いたかったとか言ってたのにねぇ。~~