🖼️ SVG→Base64変換
SVGコード
プレビュー
Data URI
data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDQ4IDQ4Ij48Y2lyY2xlIGN4PSIyNCIgY3k9IjI0IiByPSIyMCIgZmlsbD0iIzFhM2E1YyIvPjwvc3ZnPg==
imgタグ
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDQ4IDQ4Ij48Y2lyY2xlIGN4PSIyNCIgY3k9IjI0IiByPSIyMCIgZmlsbD0iIzFhM2E1YyIvPjwvc3ZnPg==" alt="" />
SVGのコードを貼り付けるだけで、Base64エンコードされたdata URI形式に変換できるツールです。変換結果はプレビュー表示され、imgタグにそのまま埋め込めるコードも同時に生成されます。外部ファイルを増やさずにSVGアイコンをHTML/CSSに直接埋め込みたいときに便利です。
使い方
- 入力欄にSVGのコードを貼り付けます。
- 変換されたdata URIとプレビューが自動的に表示されます。
- 「コピー」でdata URIまたは<img>タグのコードをコピーします。
よくある質問
data URIとは何ですか?
画像などのファイルデータを直接文字列としてURLに埋め込む形式です。外部ファイルを読み込まずに、HTMLやCSSの中に画像を直接埋め込めます。
日本語などの文字を含むSVGも変換できますか?
はい。UTF-8エンコーディングに対応しているため、SVG内のテキスト要素に日本語が含まれていても正しく変換できます。
変換したdata URIはCSSのbackground-imageにも使えますか?
はい。background-image: url("..."); の形で、生成されたdata URIをそのまま指定できます。