カテゴリー: 開発ツール
SVG から CSS 背景への変換
インライン SVG マークアップを background-image のデータ URI に変換
SVG マークアップを貼り付けると、CSS の background-image データ URI に加えて background-repeat、background-size、background-position の各行が得られます。コピーする前にライブプレビューで確認できます。
出力
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230f766e' stroke-width='2'%3E %3Ccircle cx='12' cy='12' r='9' /%3E %3Cpath d='M8 12h8M12 8v8' /%3E %3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
background-position: center;SVG がブラウザの外へ出ることはありません。そのまま CSS の値へエンコードされます。
このページの処理はすべてブラウザ内で行われます。アップロードは一切ありません。
このツールでできること
小さな SVG アイコンやパターンは、別画像として読み込むよりインラインの CSS データ URI にした方が軽量なことがよくありますが、url(...) の値の中で正しく機能するようにマークアップを手作業でエンコードするのはミスが起きやすい作業です。引用符、山括弧、改行はすべて注意深くエスケープする必要があります。このツールはその作業を代行し、base64 に頼らず短く読みやすい結果を保ちながら、選んだリピートとサイズの設定でライブの背景プレビューを表示します。
使い方
- 背景として使いたい SVG マークアップを貼り付けます。
- リピートとスケーリングの方法を選びます。
- CSS 宣言をコピーしてスタイルシートに貼り付けます。
プライバシー
このツールはすべてブラウザ内で動作します。入力した内容がアップロード・保存・共有されることはなく、タブを閉じれば消えます。
よくある質問
- これは SVG を base64 エンコードするのと同じですか?
- いいえ。CSS の値を壊してしまう可能性のあるごく一部の文字だけをエスケープするので、base64 のブロックと違って、データ URI が目に見えて短く、人が読める状態のまま保たれます。
- SVG はアップロードされますか?
- いいえ。エンコードはブラウザタブ内での単純な文字列置換によって行われ、貼り付けたマークアップがページの外へ出ることはありません。
- SVG の中で currentColor や CSS 変数は使えますか?
- currentColor はブラウザが描画時に解決するので使えますが、background-image のデータ URI は静的なマークアップであり生きたスタイルシートではないため、SVG 自身の属性内で参照される CSS カスタムプロパティは解決されません。