SVG→Base64・Data URI変換
SVGをCSSやHTMLに直接埋め込めます。URLエンコードとBase64のData URI、すぐ使えるCSSスニペット、<img>タグを取得できます。
- アップロード不要
- オフライン対応
- 無料・登録不要
- ファイルはブラウザの外に出ません
SVGファイルをここにドロップ
またはエディターにSVGコードを貼り付けてください。 複数のファイルを同時に開けます。
SVGはこのデバイスに残ります。何もアップロードされません。
SVG→Base64・Data URI変換ツールの使い方
- 1
SVGを貼り付け
SVGコードを貼り付けるかファイルをドロップします。既存のData URIを貼り付けてSVGに戻すこともできます。
- 2
出力を選ぶ
URLエンコードのData URI（通常は最小）、Base64、CSS背景、CSSマスク、HTMLの<img>タグから選びます。
- 3
コピー
スニペットをスタイルシートやHTMLにコピーします。各オプションのサイズが横に表示されます。
SVGをData URIで埋め込むべきとき
Data URIは画像全体をCSSやHTMLの中に入れるため、ブラウザは画像のために別のリクエストを送りません。小さくて頻繁に使う画像に向いています。CSSのアイコン、カスタムチェックボックスやセレクトの矢印、背景パターン、プレースホルダーなどです。
大きなイラストは、別の.svgファイルにしたほうが通常は有利です。ブラウザが個別にキャッシュでき、スタイルシートが肥大化しません。
URLエンコードとBase64の違い
Base64は3バイトを4文字に変換するため、サイズが常に約33%増えます。URLエンコードのSVGは、URLで安全でない少数の文字（<、>、#、%、引用符）だけをエスケープするので、読みやすいまま、特にgzip後は小さくなるのが普通です。viewsvgは両方をサイズ付きで表示するので、選べます。
SVG作業に必要なものがすべて揃っています
SVG→Base64・Data URI変換ツールは、SVGファイルの表示・編集・最適化・変換をひとつにまとめたワークスペースの一部です。登録不要、広告なし、アップロードなし。
すぐにプレビュー
最大6400%までズーム、パン、画面に合わせる表示、透明・白・黒・任意の背景色でSVGを確認できます。
ライブコードエディター
シンタックスハイライト、エラー行の表示、整形と圧縮、検索、完全な元に戻す履歴。
アウトラインとピクセルグリッド
アウトラインモードですべてのパスを確認し、拡大時はグリッドでピクセルの位置合わせをチェックできます。
情報の確認
ファイルサイズとgzipサイズ、viewBox、ホバーでハイライトされる要素ツリー、ワンクリックの色置き換え。
SVGOで最適化
前後のプレビューを比べながら、精度を調整してファイルを軽量化。開いているすべてのファイルを一括最適化できます。
PNG・JPG・WebP・ICO
最大16384pxまで任意のサイズで、透明度を保ったまま書き出し。PNGを直接クリップボードにコピーすることもできます。
React・Vue・Svelte
currentColorやpropsに対応した、きれいなJSX/TSX、React Native、Vue、Svelteコンポーネント。
複数ファイルを同時に
多数のSVGをタブで開き、一括最適化したり、SVGやPNGのZIPとしてダウンロードできます。
プライベート＆オフライン
アップロードもアカウントも不要。作業内容はブラウザに保存され、初回訪問後はオフラインでも動作します。
よくある質問
SVGのData URIはBase64とURLエンコードのどちらを使うべき？
SVGの場合、URLエンコードのData URIは通常Base64より20〜30%小さく、gzipでもよく圧縮されます。Base64は特殊文字が問題になる場面で便利です。
CSSで使うSVGアイコンの色を変えるには？
CSSマスクのスニペットを使ってください。SVGがマスクになり、要素のbackground-color（デフォルトはcurrentColor）で塗られるので、CSSでアイコンの色を変えられます。
Data URIをSVGに戻せますか？
はい。data:image/svg+xmlのURIやBase64文字列をエディターに貼り付けると、viewsvgが自動でSVGにデコードします。
SVGファイルはどこかにアップロードされますか？
いいえ。viewsvgは完全にブラウザ内で動作します。ファイルの読み込み、表示、最適化、変換はすべてお使いのデバイス上で行われ、サーバーには何も送信されません。初回訪問後はオフラインでも使えます。
viewsvgは無料ですか？
はい。すべての機能が無料で、登録不要、透かしなし、ファイル数の制限もありません。