SVGをData URLに変換
SVGコードやSVGファイルを読み込み、HTMLやCSSに貼り付けやすいData URLとして出力します。
Sponsored
Loading...
SVG入力
実行結果
SVGプレビュー
変換後のテキスト
使い方
- SVGコードを貼り付けるか、SVGファイルを選択します。
- 変換ボタンを押してData URLを生成します。
- 生成されたURLをコピーし、imgタグやCSSのurl()で利用します。
補足説明
- Data URLは `data:image/svg+xml;base64,` から始まる形式で出力します。
- 長いData URLはHTMLやCSSの見通しを悪くするため、短いアイコンなどでの利用に向いています。
FAQ
Data URLはどこに貼り付けられますか？
imgタグのsrc属性やCSSのbackground-imageのurl()などに貼り付けられます。
Base64だけの出力と何が違いますか？
Data URLには画像の種類を示す接頭辞が含まれるため、ブラウザが画像データとして扱いやすくなります。
SVGをData URLにすると表示速度は上がりますか？
小さな画像ではリクエスト数を減らせますが、大きなSVGではHTMLやCSSが肥大化するため注意が必要です。
関連ツール
関連記事
Sponsored
Loading...