SVG → CSS 背景
SVG コードを CSS background-image の data URI に変換します。インライン SVG と base64 形式で出力。
.icon {
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><polyline points='12 6 12 12 16 14'/></svg>");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><polyline points='12 6 12 12 16 14'/></svg>");url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><polyline points='12 6 12 12 16 14'/></svg>")url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMzYjgyZjYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMCIvPjxwb2x5bGluZSBwb2ludHM9IjEyIDYgMTIgMTIgMTYgMTQiLz48L3N2Zz4=")What Is the SVG to CSS Background Tool?
The SVG to CSS Background tool converts an SVG image into a CSS background-image data URI — no external files, no HTTP requests. Paste SVG code or drop a .svg file, and the tool instantly outputs two formats: an inline SVG data URI (URL-encoded, smaller and more compressible) and a base64 data URI. Both can be pasted directly into a CSS stylesheet or style attribute.
A live preview shows the SVG rendered at 24 px, 48 px, and 96 px so you can verify the output looks correct before copying.
How to Use the SVG to CSS Background Tool
- Paste SVG markup into the input panel, or click Drop .svg file here to load a file from disk.
- Choose Inline SVG or Base64 output format. Inline is recommended for CSS.
- Optionally enable Optimize whitespace to minify the SVG before encoding.
- Adjust Background Size and Background Position to match your design needs.
- Copy the full CSS Rule, just the
background-imageproperty, or either raw data URI.
Features
- Inline SVG (URL-encoded) and base64 data URI outputs
- Ready-to-use CSS rule with background-size and background-position
- Live preview at 24 px, 48 px, and 96 px
- Drag-and-drop .svg file support
- Optional whitespace optimization
- Configurable background-size and background-position
- Runs entirely in your browser — no data sent to servers
FAQ
What is an SVG data URI?
An SVG data URI is a way to embed an SVG directly in a CSS property or HTML attribute instead of referencing an external file. The SVG markup is encoded (either as a URL-safe string or as base64) and placed inside a data: URL. This eliminates the HTTP request for the image.
Which format should I use — inline SVG or base64?
Inline SVG (URL-encoded) is generally preferred because it is smaller than base64, gzip-compresses better, and the SVG content remains readable. Base64 is slightly larger but works in more edge-case environments. For CSS background-image, inline SVG is the recommended choice.
Why does my SVG background appear blank?
The most common cause is a missing xmlns="http://www.w3.org/2000/svg" attribute on the root <svg> element. Without it, browsers may refuse to render the SVG when used as a data URI. Make sure your SVG includes this namespace declaration.
Can I use this SVG data URI in an img tag?
Yes. The data URI output can be used as the src attribute of an <img> tag just as well as in a CSS background-image property. Simply remove the url() wrapper and paste the data URI as the src value.