Summary
An SVG to CSS converter turns SVG markup into a data URI that you paste into a CSS rule, so the icon travels inside your stylesheet instead of loading as a separate file. To convert SVG to CSS free and privately here, paste the code into SVG Input and click Convert, or click Upload SVG or Batch Upload, which convert at once. Pick an Encoding and a CSS Property, check the Preview, then click Copy CSS. The tool runs in your browser and nothing is uploaded; you can check the Network tab in DevTools. For one file, the Data URI button copies just the data: value for an <img src> or any other property.
Base64 writes every 3 bytes as 4 characters, so it adds about 33%. Minimal URL encoding escapes only %, #, <, >, backslashes and line breaks and swaps double quotes for single quotes when that cannot change the drawing; Full URL encoding runs encodeURIComponent, so it is never smaller than Minimal URL encoding. Against Base64 it is larger for small icons like the example below and can be smaller for icons that are mostly path numbers. For PNG or JPG files use the Image to Base64 converter, and for any other file type the data URL converter.
Table of Use: Settings for Each Job
| Job | Set | You get |
|---|---|---|
| A small icon as a CSS background | Encoding: Minimal URL encoding. CSS Property: background-image | background-image: url("data:image/svg+xml,..."); |
| An icon that centres and scales in its box | CSS Property: background (no-repeat, centred, contain) | background: url("data:image/svg+xml,...") no-repeat center / contain; |
| An icon that takes the text colour | CSS Property: mask (icon takes the text colour) | A --svg-icon variable, -webkit-mask, mask and background-color: currentColor |
| A build tool or CMS that mangles % or quotes | Encoding: Base64 | url("data:image/svg+xml;base64,...") |
| A tool that insists on strictly encoded URLs | Encoding: Full URL encoding | Every special character percent-encoded by encodeURIComponent |
Only the data URI, for <img src> or list-style-image (single file) | Click Data URI above the output (not shown for a batch) | The data:image/svg+xml,... value on the clipboard, without url() |
| A whole folder of icons | Batch Upload, then Download All CSS | converted-svgs.css with one class per file name |
| An export full of editor data | Leave Optimize SVG on | Editor clutter and unused ids removed |
Worked example: a 24 x 24 arrow icon exported with an XML declaration, a comment and a title is 214 bytes, or 168 bytes (21% smaller) with Optimize SVG on. Its background-image CSS measures as below; gzip sizes were measured in Chrome and may differ by a few bytes elsewhere:
| Encoding | CSS output (bytes) | Gzip-compressed (bytes, Chrome) |
|---|---|---|
| Minimal URL encoding | 227 | 194 |
| Base64 | 276 | 248 |
| Full URL encoding | 319 | 218 |
Features
- Three ways in. Paste code into SVG Input, or click Upload SVG or Batch Upload. Files are decoded by byte order mark or declared encoding, falling back to UTF-8 with a warning.
- Three encodings, three CSS properties. Minimal URL encoding, Base64 or Full URL encoding, as background-image, background or mask. Changing an option updates every result.
- Optimize SVG (on by default). Removes the XML declaration, DOCTYPE, comments, metadata, title, desc, editor data, unused ids and namespaces, default x and y of 0, and whitespace between tags. Ids used by a gradient, clip path, use element, style rule or animation stay.
- Repairs an SVG image needs. A missing
xmlns="http://www.w3.org/2000/svg"is added (and xmlns:xlink when xlink:href is used), a non-UTF-8 encoding label becomes UTF-8, and HTML around the svg element is dropped. Repairs are listed under the Preview. - Errors and warnings. Malformed XML is reported with its line and column. Warnings cover references to external files, a missing viewBox and a data URI your browser cannot draw.
- Preview and sizes. The Preview draws the CSS on a checkerboard; File Size Comparison lists Original SVG, Optimized SVG, CSS output and gzip-compressed CSS where your browser supports it.
- Batch results. Each file gets its own class, preview and sizes.
Limits: SVG only, with one set of options per batch. The optimizer does not simplify paths or round coordinates. Pasted code is named icon (class .icon), the Generated CSS box is cut at 20,000 characters (Copy and Download give everything), and an SVG used as an image cannot load external files. For invalid XML, try the XML validator; the finished stylesheet can go through the CSS minifier.
How to Use the SVG to CSS Converter
- Paste your SVG code into SVG Input, or click Upload SVG for one file or Batch Upload for several. Uploaded files convert immediately.
- Leave Optimize SVG on, or switch it off to keep your markup as written.
- Choose an Encoding (Minimal URL encoding, Base64 or Full URL encoding) and a CSS Property (background-image, background, or mask).
- For pasted code, click Convert. Check the Preview, any warnings under it and the File Size Comparison.
- Click Copy CSS for the declaration, Data URI for just the data value, or Download CSS for a stylesheet. For a batch, click Download All CSS.
- Give the element a width and height, because a background does not size its element.
Who Can Use It
Front-end developers can turn icons into CSS for buttons, form fields, list bullets and pseudo-elements. Design-system maintainers can convert a folder with Batch Upload. Theme and CMS editors who can only edit a stylesheet can ship an icon without uploading a file, and the same SVG can become a tab icon with the favicon from image tool.
Pick the icon's colour with the color picker, animate it with the CSS animation generator or pair it with a gradient background. Tidy the stylesheet with the CSS beautifier, decode an old Base64 string with the Base64 decoder and add GZIP rules with the .htaccess generator.
FAQs
How do I convert SVG to CSS?
Paste your SVG into SVG Input and click Convert, or click Upload SVG or Batch Upload, which convert at once. Choose an Encoding and a CSS Property, check the Preview, then click Copy CSS, Data URI for only the data: value, or Download CSS. It runs in your browser.
Why doesn't my SVG data URI show up as a CSS background?
Usual causes: no xmlns="http://www.w3.org/2000/svg" on the root svg (the tool adds it), markup that is not well-formed XML (reported with line and column), an unescaped # or quote cutting the URI short (the tool escapes them), or an element with no width and height, because a background does not size its element.
Should I use minimal URL encoding or Base64 for an SVG data URI?
Minimal URL encoding is usually smaller and stays readable: it escapes only %, #, <, >, backslashes and line breaks. Base64 adds about 33% but avoids characters some tools mangle. For a 214-byte example icon (a 24 x 24 arrow with an XML declaration, a comment and a title) the CSS was 227 bytes with minimal encoding, 276 with Base64 and 319 with full URL encoding.
How can I change the colour of an SVG used in CSS?
An SVG used as a background image is a separate document, so page CSS cannot change its fill. Choose mask under CSS Property: the output sets mask and -webkit-mask with background-color: currentColor, so the shape takes the element's text colour and you can recolour it with color, for example on :hover.
What does Optimize SVG remove, and is it safe?
It parses your SVG as XML and removes the XML declaration, DOCTYPE, comments, metadata, title, desc, editor data, unused ids and namespaces, default x and y of 0, and whitespace between tags. Ids used by a gradient, clip path, use element or style rule are kept. It does not simplify paths or round numbers.
Should I inline SVG icons as data URIs or keep separate files?
Inline small icons used on most pages: they arrive with the stylesheet and need no extra request. Keep large illustrations, rarely used graphics and icons that change more often than your CSS as files, because an inlined icon is cached only with the stylesheet. File Size Comparison shows the gzip cost.
Can I convert many SVG files at once?
Yes. Click Batch Upload and select several .svg files. Each becomes a class named after its file (arrow right.svg becomes .arrow-right, 2x.svg becomes .icon-2x, duplicates get -2, -3), and Download All CSS saves converted-svgs.css. Invalid files are listed with the reason while the others convert.
Are my SVG files uploaded to a server?
No. This tool runs in your browser and nothing is uploaded; you can check the Network tab in DevTools while you convert. Parsing, optimization, encoding, the preview and the gzip size are all computed locally in JavaScript, so your SVG code and files stay on your device.