SVG から CSS への変換

SVG コードを CSS background-image データ URI に変換します。

出力タイプ:

SVG コード

CSS 出力

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E %3Ccircle cx='50' cy='50' r='40' fill='%233b82f6' opacity='0.8'/%3E %3Cpolygon points='50,15 61,35 85,35 67,57 75,80 50,65 25,80 33,57 15,35 39,35' fill='%23f59e0b' opacity='0.9'/%3E %3C/svg%3E");

背景プレビュー

Inline SVG (original):

SVG から CSS データ URI 変換ツール

スタイルシートで使用するための CSS background-image データ URI に SVG コードを変換します。

よくある質問

SVG を CSS 背景として使う理由は？

データ URI を使うことで追加の HTTP リクエストが不要になり、パフォーマンスが向上します。

データ URI とは何ですか？

小さなファイルをbase64またはURLエンコード文字列としてドキュメントに直接埋め込む方法です。

Base64 と URL エンコード、どちらが良いですか？

SVG の場合、URL エンコードは base64 より一般的に効率的です。

CSS カスタムプロパティは使えますか？

データ URI 内では直接使えません。動的な色には HTML のインライン SVG を使用してください。

どの SVG 要素が機能しますか？

すべての有効な SVG 要素。SVG に viewBox 属性があることを確認してください。

𝕏 Twitter in LinkedIn

このツールを評価

3.6 / 5 · 198 件の評価

その他のツール

SVGSVG → JSX/React 💎SVG最適化 { }CSS圧縮 / 整形

使い方

Paste your SVG code or upload an SVG file
Choose encoding method: URL-encoded or Base64
Preview the SVG and the generated CSS code
Copy the CSS background-image property to use in your stylesheet

ユースケース

Embedding small SVG icons directly in CSS to reduce HTTP requests
Creating CSS-only decorative elements without external files
Optimizing SVG icons for use in CSS pseudo-elements (::before, ::after)
Converting SVG logos for inline CSS backgrounds in email templates

よくある質問

Should I use URL encoding or Base64 for SVGs in CSS?

URL encoding is generally recommended for SVGs in CSS because it produces smaller output than Base64 (about 30% smaller). Base64 is better for binary formats like PNG.

Is it better to use inline SVG or SVG in CSS?

For decorative icons and backgrounds, CSS data URIs keep your HTML cleaner. For interactive or accessible SVGs, inline SVG in HTML is preferred as it supports CSS styling and aria attributes.

What is the size limit for SVG data URIs?

There is no strict size limit, but keeping data URIs under 8-10KB is recommended for performance. Larger SVGs should be served as external files.

SVG から CSS への変換

SVG から CSS データ URI 変換ツール

よくある質問

その他のツール

Recommended

最新情報を受け取る

使い方

ユースケース

よくある質問

💬 User Feedback