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エンコード版

URLエンコードされたUTF-8版は、Data URIの中でSVGのマークアップが読める状態を保つため、CSS上で塗り色をそのまま変更できます。予約文字をすべてエスケープするので、文字列はBase64より短くはならず、わずかに長くなります。

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バリアントを、SVGをインラインで読める・編集できる状態に保ちたい場合は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 URL-encoded variant that keeps the markup readable in your stylesheet.

最適な用途

  • 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...のような形式になり、ブラウザがインラインでデコード・レンダリングするため追加のネットワークリクエストが不要です。

ツールやプラットフォームがBase64入力を明示的に要求する場合はBase64を使用してください。CSSの中でSVGを人が読める・編集できる状態に保ちたい場合はURLエンコードされたUTF-8版（data:image/svg+xml,...）を使用してください。なお、当エンコーダーは予約文字をすべてエスケープするため、URLエンコードの文字列は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として埋め込む理由