SVG to CSS Background Image Converter Online - Free Tool

Convert SVG code to CSS background-image using data URI encoding. Free online tool with URL-encode and base64 options.

SVG Code

Encoding Type

URL EncodedBase64

CSS PropertyOptimize SVG (remove comments & whitespace)

SVG Preview

CSS Output

background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E %3Ccircle cx='50' cy='50' r='40' fill='%233b82f6' /%3E %3C/svg%3E");

Data URI

data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E %3Ccircle cx='50' cy='50' r='40' fill='%233b82f6' /%3E %3C/svg%3E

SVG to CSS Converter

Convert SVG graphics to CSS background-image inline styles using data URI encoding.

Features

URL-encode and Base64 encoding options
CSS property format selection
SVG optimization and minification
Real-time preview of SVG graphics

𝕏 Twitter in LinkedIn

このツールを評価

4.1 / 5 · 197 件の評価

その他のツール

⚛️SVG to React Component SVGSVG to PNG Converter 🌈CSSグラデーション生成 🎨CSS Formatter

SVG to CSS Background Image Converter Online - Free Tool

SVG to CSS Converter

Features

その他のツール

Recommended

最新情報を受け取る