SVGデータURI変換

SVGのコードを貼ると、軽く掃除してから CSS の background-image にそのまま使えるデータURIにします。URLエンコード版と Base64 版の両方とサイズを比べられます。

プレビュー（データURIを img で表示）

変換したSVGのプレビュー

URLエンコード版は、属性の " を ' に置き換え、% # < > { } " などURLやCSSで問題になる文字と日本語などの非ASCII文字だけを %XX にしています。SVGはテキストなので、たいてい Base64（約4/3倍に増える）より小さくなります。

背景画像として読み込んだSVGは、ページのCSSや currentColor を受け継ぎません（currentColor は黒として描かれます）。色を変えたいときは fill の値を直接書き換えるか、mask-image と background-color を組み合わせます。img・背景画像のSVGでは、スクリプトや外部ファイルの参照は動きません。

掃除は簡易的なもので、パスの数値を丸めるような最適化（SVGOなど）は行いません。入力はブラウザの中だけで処理します。

SVGデータURI変換でできること

SVGのコードを貼り付けると、コメントや余分な空白を取り除いてから、CSSのbackground-imageにそのまま使えるデータURIに変換します。URLエンコード版とBase64版のサイズを比べながら、アイコンをCSSに埋め込みたいときに使えます。

使い方

  1. 「SVGコード」欄に、<svg>から</svg>までのコードを貼り付けます。
  2. 必要に応じて、削除・空白詰め・ルートのwidth/height削除のチェックを切り替えます。
  3. 「プレビュー」で変換後のデータURIが画像として正しく表示されるか確認します。背景は市松・白・黒から選べます。
  4. 「CSS（URLエンコード版）」の「コピー」を押すと、background-image: url("…"); の形でコピーできます。データURIだけ、Base64版、掃除後のSVGもそれぞれコピーできます。

計算の仕組みと注意点

よくある質問

SVGのデータURIはBase64とURLエンコードのどちらがいいですか？

SVGはテキストなので、必要な文字だけをエンコードしたURLエンコード版のほうが短くなることが多く、gzip圧縮も効きやすいとされます。このツールでは両方のサイズがバーで並ぶので、実際の差を見て選べます。

背景画像にしたSVGの色をCSSで変えられますか？

背景画像として読み込んだSVGはページのCSSやcurrentColorを受け継がないため、外側から色は変えられません。fillの値を直接書き換えるか、mask-imageとbackground-colorを組み合わせる方法があります。

変換したのに画像が表示されません。

タグの閉じ忘れなどでSVGとして読めない場合、プレビューの下に注意が表示されます。また、img・背景画像として使うSVGでは外部ファイルへの参照やスクリプトは動かないので、画像を外部から読み込んでいるSVGは表示が欠けます。

width と height は消したほうがいいですか？

viewBoxがあれば、width/heightを消すとCSSのbackground-sizeや要素の大きさに合わせて伸び縮みしやすくなります。ルートのwidth/heightを削除する設定をオンにすると、viewBoxを残して削除します。