🖼️ SVG→Base64変換
data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDQ4IDQ4Ij48Y2lyY2xlIGN4PSIyNCIgY3k9IjI0IiByPSIyMCIgZmlsbD0iIzFhM2E1YyIvPjwvc3ZnPg==
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDQ4IDQ4Ij48Y2lyY2xlIGN4PSIyNCIgY3k9IjI0IiByPSIyMCIgZmlsbD0iIzFhM2E1YyIvPjwvc3ZnPg==" alt="" />
SVGのコードを貼り付けるだけで、Base64エンコードされたdata URI形式に変換できるツールです。変換結果はプレビュー表示され、imgタグにそのまま埋め込めるコードも同時に生成されます。外部ファイルを増やさずにSVGアイコンをHTML/CSSに直接埋め込みたいときに便利です。
使い方
- 入力欄にSVGのコードを貼り付けます。
- 変換されたdata URIとプレビューが自動的に表示されます。
- 「コピー」でdata URIまたは<img>タグのコードをコピーします。
計算の仕組み
このツールは、SVGのコードをBase64のデータURIに変換します。データURIを使うと、画像ファイルを別に置かなくても、CSSやHTMLの中に画像を直接埋め込めます。 データURI ＝ data:image/svg+xml;base64,（SVGをBase64にした文字列） SVGのコードは、日本語などが含まれていても正しく扱えるよう、まずUTF-8のバイト列に変換してからBase64にしています。変換した結果は、そのまま使える<img>タグとしても表示し、プレビューで見た目を確認できます。 Base64は3バイトを4文字で表すため、データの大きさは元の約1.33倍になります。
計算例
入力（136文字） <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><circle cx="24" cy="24" r="20" fill="#1a3a5c"/></svg> 出力（Base64部分は184文字） data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcv… CSSでの使い方 background-image: url("data:image/svg+xml;base64,PHN2Zy…");
使用上の注意
- SVGを<img>や背景画像として使うには、svgタグにxmlns="http://www.w3.org/2000/svg"が必要です。
- SVGの場合は、Base64にせずに「data:image/svg+xml,」の後ろにパーセントエンコードした文字列を付ける方法もあり、こちらの方が短くなることがあります。
- データURIの画像はブラウザにキャッシュされないため、大きな画像やたくさんのページで使う画像は、別のファイルにした方が効率的です。
よくある質問
data URIとは何ですか?
画像などのファイルデータを直接文字列としてURLに埋め込む形式です。外部ファイルを読み込まずに、HTMLやCSSの中に画像を直接埋め込めます。
日本語などの文字を含むSVGも変換できますか?
はい。UTF-8エンコーディングに対応しているため、SVG内のテキスト要素に日本語が含まれていても正しく変換できます。
変換したdata URIはCSSのbackground-imageにも使えますか?
はい。background-image: url("..."); の形で、生成されたdata URIをそのまま指定できます。