SVG to CSS Converter
Paste or open an SVG and get CSS that uses it as a background image or a recolourable mask, with no extra HTTP request.
- URL-encoded, not Base64
- Recolourable mask
- Size included
- No upload
Details
- Size
- 240 × 240 px
- width / height
- 240 / 240
- viewBox
- 0 0 240 240
- File size
- 691 B
- Elements
- 9
- IDs
- 1
- Embedded images
- 0
Colours (4)
Fonts
Inter, Arial, sans-serif
Elements
- stop ×2
- svg ×1
- defs ×1
- linearGradient ×1
- rect ×1
- circle ×1
- path ×1
- text ×1
Safety check
No scripts, event handlers or external resources found.
The preview is drawn as an image, so scripts never run here.
CSS output
Using SVG in CSS
CSS can show an SVG directly from a data URI, so small icons ship inside the stylesheet with no extra request. URL-encoding (rather than Base64) keeps the data roughly 15–30% smaller and still readable. This converter strips comments and editor metadata, switches double quotes to single quotes, encodes only the characters that must be encoded, and writes a ready-to-paste rule with the icon’s width and height. The mask version uses the SVG as a stencil, so you can set any colour with background-color, including currentColor for icons that follow the text colour.
How to convert SVG to CSS
- Open or paste your SVG.
- Choose CSS background, or CSS mask for an icon you want to recolour.
- Copy the rule into your stylesheet and rename .icon.
- Adjust width and height or background-size as needed.
Background or mask?
- Use background-image when the SVG has its own colours.
- Use mask when the icon should take a single colour you set in CSS.
- Masks need -webkit-mask for older Safari; the generated rule includes both.
- Keep data URIs for small icons (under a few KB); link larger illustrations as files.
Why use this SVG to CSS converter
- Smaller than Base64URL-encoded SVG data URIs are usually 15–30% smaller than Base64 and compress better with gzip.
- Recolourable iconsThe mask rule paints the SVG shape with background-color, so one icon works in any colour or theme.
- Everything about the fileReal size from width, height and viewBox (mm, pt and in converted to px), file size and gzipped size, element counts, colours with one-click copy, and fonts.
- Nothing leaves your browserSVG files are read and rendered locally, so logos, icons and client artwork are never uploaded.
Common uses
- Icons in CSS. Checkmarks, arrows and bullets without extra requests.
- Pseudo-elements. Use the data URI in ::before or ::after content.
- Email-safe backgrounds. Inline decorations in a single stylesheet.
- Theming. Recolour one mask icon for dark mode.
More SVG tools: convert SVG to PNG or SVG to JPG in bulk, make an ICO icon from SVG, or encode any file with the Base64 encoder.
Example: a recolourable icon
Paste a 24 × 24 icon, choose CSS mask and copy. Set background-color: currentColor and the icon matches the surrounding text in light and dark themes.
What to expect from the result
The preview uses your browser’s SVG renderer, so filters and fonts may differ slightly from Illustrator or Inkscape. External images are blocked in image previews, as on real websites.
SVG to CSS Converter questions
How do I use an SVG as a CSS background?
Copy the CSS background rule: it sets background-image to a URL-encoded data URI, plus the size and no-repeat. Paste it into your stylesheet.
Should I use Base64 or URL encoding for SVG in CSS?
URL encoding. It is smaller, compresses better and stays readable. Base64 is only needed in a few contexts that reject special characters.
How do I change the colour of an SVG background?
You cannot recolour a background-image, but you can with a mask: choose CSS mask and set background-color to any colour.
Can an SVG contain a virus?
An SVG can contain JavaScript that runs when the file is opened directly in a browser or inlined in a page. This viewer shows SVGs as images, where scripts never run, and the safety check lists any scripts or event handlers it finds.
Is my SVG uploaded?
No. The file is opened and rendered in your browser. Nothing is sent to a server.