SVG code
<svg>X</svg>
CSS
url(data:image/svg...)
Design Tools
SVG to CSS Background — Data URL / Base64
Inline SVG into a CSS background-image: url(...) string using URI encoding or Base64. Useful for small icons you want to keep in CSS instead of separate asset files.
DesignCSSSVGFrontend
Quick switch:Aspect Ratio Calculator
Favorite this tool
No favorite storage mode has been selected.
Quick actions
Copy this tool URL or open the system share sheet on a supported device.
设计配色
SVG to CSS Background
1. Raw SVG Code
3. Live Render Background Preview
-
等待输入 SVG。
Use cases
- Inline a small Figma icon into component CSS without a separate asset file
How to use
- Paste full SVG markup on the left; review the escaped one-line output and live preview on the right
Example input and output
FAQ
Is Base64 or URI encoding better?
URI encoding (without Base64) is usually smaller after escaping and remains more readable in DevTools.
Tools
Related tools
Continue with another translated tool for a nearby task.
Aspect Ratio Calculator
Aspect Ratio and Proportional Size Calculator
Compute and lock an aspect ratio in your browser. Derive a ratio from width and height, or change one side while the other stays proportional. Includes common presets and a preview for cropping, video frames, and responsive layouts.
Ratio Size Design