SVG to Data URL変換
SVGコードやファイルを、CSS・HTMLにそのまま貼り付けられるData URL形式に変換できる無料ツールです。画像はサーバーへ送信されず、すべてブラウザ内で処理されます。
1. SVGを入力
またはSVGコードを直接貼り付け
2. 変換方式を選択
多くの場合、Base64方式よりファイルサイズが小さくなり、コード上でも中身を確認しやすい形式です。
3. プレビュー
SVGを入力するとここにプレビューが表示されます。
4. 変換結果
Data URLとは？
どんなときに使う？
アイコンなど小さなSVGを、別ファイルとして用意せずにCSSやHTMLへ直接埋め込みたいときに使います。画像用のHTTPリクエストが1つ減るため、アイコンが多いページの表示速度改善にも役立ちます。
URLエンコード方式とBase64方式、どちらを選べばいい？
基本的にはURLエンコード方式がおすすめです。文字数が短くなりやすく、コードを見たときにSVGの中身がそのまま読めます。ただし、SVGコードが崩れている場合や特殊な文字を多く含む場合は、Base64方式のほうが安全に変換できることがあります。
サーバーに画像は送信される？
送信されません。ファイルの読み込みからData URLへの変換まで、すべてお使いのブラウザ内で完結します。