SVG → Base64
SVG を HTML や CSS にそのまま貼れる data URI に変換 — Base64 と、たいてい小さくなる URL エンコード形式を並べて表示します。
またはクリックして選択 — SVG のみ
URL が使える場所ならどこでも使えます。元のファイルより必ず 3 分の 1 ほど大きくなります。
同じ画像で、たいてい Base64 より小さくなります。しかも読めるので CSS のデバッグに役立ちます。
リクエストを 1 つ減らす
data URI は画像そのものを HTML や CSS の中に埋め込むため、ブラウザが画像用に 2 回目のリクエストを出しません。小さなアイコンでは、これが「すぐ表示される」か「一拍遅れて表示される」かの分かれ目になります。
引き換えになるのはキャッシュです。インライン化したアイコンは、それを含むページを読むたびに毎回ダウンロードされ、単独ではキャッシュできません。初期表示に効く数個だけをインライン化し、残りはファイルのままにしておきましょう。
3 ステップ
.svg ファイルを選びます。ファイルは端末内に留まります。
Base64 か URL エンコードの data URI をコピーします。
用意された img タグや CSS の背景指定をそのまま使います。
かんたん回答
SVG ではたいてい URL エンコードのほうが小さくなります。SVG はテキストである一方、Base64 はどんなデータでも約 33% 増やしてしまうからです。URL エンコードは読めるので、スタイルシート上で目当ての図形かどうかも確認できます。処理の途中で生の文字が壊れる環境では Base64 を使ってください。
Base64 は 3 バイトを 4 文字で表すため、3 分の 1 の増加は避けられません。まず SVG 最適化ツールを通してみてください。エディターのメタデータや過剰な小数桁のほうが、エンコードより容量を食っていることがよくあります。
使えます。CSS ブロックはそのまま貼り付けられる形になっています。二重引用符の中で URL エンコード形式を使うため、エンコーダーは SVG 内の二重引用符を単一引用符に置き換えています。
ほぼ必ず、エスケープされていない `#` が原因です。`#fff` のような色指定があると URL がそこで切れ、以降はフラグメント扱いになります。ここでの出力はすでにエスケープ済みなので、たいていは後から data URI を手で編集したときに起きます。
いいえ。エンコードはブラウザ内での単なる文字列処理です。