デザインツール

SVG to CSS Background - Data URL / Base64

SVG を URI encoding または Base64 で CSS background-image: url(...) 文字列へインライン化できます。小さなアイコンを別 asset file にせず CSS 内に保持したいときに便利です。

クイック切替→アスペクト比計算機

DesignCSSSVGFrontend

クイック切替:アスペクト比計算機

このツールをお気に入りに

お気に入りの保存方法がまだ選ばれていません。

クイック操作

デザインツールに戻るすべてのツールを見る

このツールの URL をコピーするか、対応端末ではシステムの共有シートを開けます。

利用シーン

小さな Figma アイコンを別 asset file にせず component CSS へ埋め込む

使い方

左側に完全な SVG markup を貼り付け、右側でエスケープ済み 1 行出力とライブプレビューを確認する

入出力サンプル

SVGコード

<svg>X</svg>

CSS

url(data:image/svg...)

FAQ

Base64 と URI encoding はどちらが良いですか？

通常は Base64 を使わない URI encoding の方が、エスケープ後でもサイズが小さくなりやすく、DevTools 上でも読みやすいです。

ツール

関連ツール

近い用途の翻訳済みツールへ続けて進めます。

アスペクト比計算機

アスペクト比と比例サイズ計算機

利用可能

ブラウザでアスペクト比を計算してロックしてください。幅と高さから比率を導き出すか、片側を変えてもう片側は比例したままにします。一般的なプリセットやトリミング、動画フレーム、レスポンシブレイアウトのプレビューが含まれています。

比率サイズ設計

ツールを開く