SVG を Base64 に変換

SVG を Base64 に変換する方法

1. .svg ファイルをボックスにドロップするか、ファイル選択で選びます。
2. 出力形式 は最初 CSS background-image になっています。別の形が必要なら、Data URI、HTML <img>、Markdown、プレーン Base64 に切り替えます。
3. 出力をコピー を押し、ルールをスタイルシートに貼り付けます。

SVG は保存されたとおりにエンコードされます。ベクターには不要なので、リサイズや品質のオプションはありません。もっと短い文字列にしたいなら、先に SVG 最適化ツールにかけてください。エディターのメタデータを削るほうが、エンコード方式の選択よりも削減効果が大きいことがよくあります。

Base64 か URL エンコードか

SVG はテキストなので、そもそも Base64 にする必要はありません。いくつかの文字をパーセントエンコードすれば、data URI にマークアップを直接入れられます。同じ 104 バイトの三角形アイコンを両方の方法で書くと次のとおりです。

/* Base64: 140 characters of data */
.a { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEyIDIgMiAyMmgyMHoiIGZpbGw9IiNmOTAiLz48L3N2Zz4="); }

/* URL-encoded: 118 characters of data */
.b { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 2 22h20z' fill='%23f90'/%3E%3C/svg%3E"); }

URL エンコード版のほうが短く、gzip 後はその差がさらに広がります。上の 2 つのルールは、圧縮すると 200 バイトと 162 バイトになります。小さなアイコン 20 個を 1 つのスタイルシートに入れた場合、Base64 版は 4,421 バイト（gzip 後 801）、URL エンコード版は 3,720 バイト（gzip 後 615）でした。繰り返しの多いマークアップはよく圧縮されますが、Base64 はその繰り返しをかき混ぜてしまいます。

Base64 はエスケープのルールが不要で、URL を受け付ける場所ならどこでも壊れず、多くの API やビルドツールが求める形式でもあります。URL エンコード版は、# のエスケープを忘れたり（URL のフラグメントの開始になります）、外側の url("...") と引用符の種類が混ざったりすると壊れます。SVG を Data URI に変換 では両方のバージョンを作り、サイズを表示します。

SVG の data URI の要件

• MIME タイプ image/svg+xml。 ブラウザは PNG や JPEG なら誤ったタイプでも中身を判別しますが、SVG ではそうしません。ほかのタイプでは画像が表示されません。
• xmlns 属性。 HTML 内のインライン <svg> ならなくても動きますが、画像として使う場合はルート要素で xmlns="http://www.w3.org/2000/svg" を宣言する必要があります。手書きのアイコンにはこれが欠けているものが多く、何のエラーも出さずに失敗します。
• 整形式の XML。 閉じていないタグやエスケープされていない & が 1 つあるだけで画像全体が表示されず、部分的に描画されることもありません。

SVG の Base64 は、たいてい PHN2Zy（<svg）か PD94bWwg（<?xml ）で始まります。先頭にコメントやバイトオーダーマークなどがあってもブラウザは問題なく扱いますが、プレフィックスから形式を見分けにくくなります。

スタイルと色

background-image や <img> で使う SVG は独立した文書です。ページの CSS は内部に届かないので、ホバー時の色や currentColor は効きません。よく使われる回避策は 2 つです。

• data URI をマスクとして使い、background-color で色を付けます。

.icon {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  mask: url("data:image/svg+xml;base64,PHN2Zy...") center / contain no-repeat;
}

• アイコンを状態やテーマに応じて変える必要がある場合は、<svg> のマークアップを HTML にインラインで書きます。

デコードと修正

Base64 から SVG では、Base64 文字列を読んで編集できるマークアップに戻せます。エディターでは表示されるのに data URI では表示されない SVG は、そこでデコードして、まずルート要素の xmlns を確認してください。

よくある質問