SVG to Base64 エンコーダー

SVGをBase64とData URIとしてエンコードして、CSS・HTML・Reactにインラインで埋め込み。URLエンコード版を含む5種類のすぐコピーできる形式を取得。無料、プライベート、即時処理。

SVGをBase64として埋め込む理由

5つの即使用可能な形式

Raw Base64・Data URI・CSS background-imageルール・HTML imgタグ・URLエンコード版をそれぞれのコピーボタンつきで取得できます。

より小さいURLエンコード版

SVGにとってURLエンコードされたUTF-8版は通常Base64より小さいため、インライン埋め込みを維持しながらCSSやHTMLをスリムに保てます。

UTF-8対応

エンコードは絵文字、アクセント記号、非ラテン文字を正しく処理するため、特殊文字でSVGが壊れることはありません。

HTTPリクエストを削減

小さなSVGをData URIとしてインライン化すると個別のネットワークリクエストが不要になり、アイコンやロゴの初回描画が速くなります。

100%プライベート

エンコードはブラウザ内で完全に行われます。SVGがアップロードされることはなく、非公開のブランドアセットにも安心して使えます。

無料・無制限

登録不要、クレジット不要、制限なし。好きなだけSVGをエンコードして、ワンクリックで任意のバリアントをコピーできます。

SVGをBase64にエンコードする方法

1

SVGを追加

.svgファイルをドラッグ＆ドロップするか、クリックして参照するか、SVGコードをボックスに貼り付けます。

2

バリアントを取得

エンコーダーが即座にRaw Base64・完全なData URI・CSSのbackgroundルール・imgタグ・URLエンコード版を生成します。

3

適切なものを選択

srcまたはhrefにはData URIを、background-imageにはCSSバリアントを、最小サイズの文字列が必要な場合はURLエンコード版を使用します。

4

コピーして貼り付け

任意のバリアントの横にあるコピーボタンを押して、スタイルシート・HTML・コンポーネントに直接貼り付けます。

適切なツールを選択

このページが存在する理由

Use the SVG to Base64 encoder to embed a vector inline as a data URI for CSS, HTML, or JSON, removing a network request. Copy the raw base64, the data URI, a CSS background, an img tag, or a smaller URL-encoded variant.

最適な用途

  • Inlining icons in CSS background-image rules
  • Embedding small SVGs directly in HTML or React without a separate file
  • Cutting an extra HTTP request for tiny vector assets

SVG to Base64 FAQ

Data URIを使うと、別ファイルにリンクする代わりに画像をCSSやHTMLに直接埋め込めます。SVGの場合はdata:image/svg+xml;base64,PHN2Zy...のような形式になり、ブラウザがインラインでデコード・レンダリングするため追加のネットワークリクエストが不要です。

SVGの場合、URLエンコードされたUTF-8版（data:image/svg+xml,...）は通常Base64より小さくなります（SVGはテキストのため）。最もスリムなCSSやHTMLを求める場合はURLエンコード版を使用してください。ツールやプラットフォームが特にBase64入力を必要とする場合はBase64を使用してください。

CSS background-imageバリアントをコピーしてルールに貼り付けます。例えばbackground-image: url("data:image/svg+xml;base64,...")のように。アイコンが別の画像ファイルなしに背景としてレンダリングされます。

はい。エンコーダーはUTF-8対応なので、SVG内のアクセント記号、非ラテン文字、絵文字が正しくエンコードされ、壊れることなくレンダリングされます。

Data URIとしてインライン化するのは、アイコンやロゴのような小さなSVGで、HTTPリクエストを削減することで読み込みを高速化できる場合に最も効果的です。大型または頻繁に再利用されるSVGには、Data URIがそれを含むすべてのページに重みを加えるため、通常は別のキャッシュファイルの方が優れています。

いいえ。エンコードはブラウザ内で完全に行われるため、SVGがデバイスを離れることはありません。機密性の高いアセットや未公開のアセットにも安心して使用できます。

SVG to Base64 エンコーダー

SVGをBase64とData URIとしてエンコードして、CSS・HTML・Reactにインラインで埋め込み。URLエンコード版を含む5種類のすぐコピーできる形式を取得。無料、プライベート、即時処理。

SVGをBase64として埋め込む理由