About SVG to CSS Converter
An SVG can be embedded directly in a stylesheet as a data URI, which saves one network request for small icons. This converter minifies the SVG, switches double quotes to single quotes, and percent-encodes only the characters that would break a URL, such as the hash sign and angle brackets. That keeps the result readable and smaller than Base64, which adds about a third to the size. The SVG must include the xmlns attribute to render.
How to use SVG to CSS Converter
- Type or paste into the "SVG code" box, or press "Use example" to try it with sample data.
- Set "CSS property" if the defaults do not fit.
- The result appears below and updates as you type.
- Copy the result with the copy button, or download it as a file where that is offered.
Questions about SVG to CSS Converter
Why URL-encode the SVG and not use Base64?
Base64 makes the data about 33 percent larger and compresses poorly. A URL-encoded SVG stays close to its original size, remains readable in the stylesheet, and compresses well with gzip or Brotli.
Runs in your browser. Page last updated .