SVGをCSS Data URIに変換 | SVG Ready

SVGをCSS Data URIに変換

SVGコードをパーセントエンコードまたはbase64 Data URIへ変換し、CSSをより簡潔で高速にします。

SVGを変換する準備はできましたか？

フォームにSVGコードを貼り付け、「変換」をクリックしてください。

SVG Data URIを使う理由

SVG Data URIはSVG全体をCSSやHTMLに直接埋め込みます。外部リクエストを減らし、アイコンや画像の読み込みを高速化してパフォーマンスを改善します。

リクエストを一本化： 画像データをメインCSSファイルと一緒に読み込みます。
パフォーマンス向上： ネットワーク遅延とオーバーヘッドを減らし、Core Web Vitalsを改善します。

パーセントエンコードとBase64

パーセントエンコード（推奨）: 一般に小さく、CSSへの埋め込みに適しています。予約文字を16進数表現に置き換えます。
Base64: バイナリデータをASCII文字列に変換します。互換性は高い一方、パーセントエンコードより20～30%大きくなる場合があります。