Encoding SVG in `data:` URI as `data:image/svg+xml,…` (and embedding it in CSS with CSSMin) is what we're currently doing as it's more efficient for text.
An article on **[[ https://codepen.io/tigt/post/optimizing-svgs-in-data-uris | optimizing SVGs in `data:` URIs ]]** for smaller output states several methods, which we haven't been taken advantage of so far:
- Mangling with whitespace where it doesn't break URI encoding
- Removing XML declaration, which isn't needed as CSS `background-image`
- Replacing attribute quotes from double `"` to single `'` ones.
__**Exemplified on close icon:**__
Original file:
```lang=xml
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
<path d="M3.636 2.222l14.142 14.142-1.414 1.414L2.222 3.636z"/>
<path d="M17.778 3.636L3.636 17.778l-1.414-1.414L16.364 2.222z"/>
</svg>
```
Old method with normal URI encoding currently in use:
```lang=css
background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%3E%0D%0A%09%3Cpath%20d%3D%22M3.636%202.222l14.142%2014.142-1.414%201.414L2.222%203.636z%22%2F%3E%0D%0A%09%3Cpath%20d%3D%22M17.778%203.636L3.636%2017.778l-1.414-1.414L16.364%202.222z%22%2F%3E%0D%0A%3C%2Fsvg%3E%)A");
```
Compression ratio after [[ http://www.txtwizard.net/compression/ | gzipping ]]: 168 % Original size: 455 bytes Result size: 271 bytes
Alternative optimized method:
```lang=css
background-image: url("data:image/svg+xml,%3C?xml version='1.0' encoding='utf-8'?%3E %3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E %3Cpath d='M3.636 2.222l14.142 14.142-1.414 1.414L2.222 3.636z'/%3E %3Cpath d='M17.778 3.636L3.636 17.778l-1.414-1.414L16.364 2.222z'/%3E %3C/svg%3E");
```
Compression ratio: 137 % Original size: 325 bytes Result size: 237 bytes
Further optimized (stripping XML declaration not needed for background-images):
```lang=css
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E %3Cpath d='M3.636 2.222l14.142 14.142-1.414 1.414L2.222 3.636z'/%3E %3Cpath d='M17.778 3.636L3.636 17.778l-1.414-1.414L16.364 2.222z'/%3E %3C/svg%3E");
```
Compression ratio: 137 % Original size: 281 bytes Result size: 205 bytes
From data over the wire perspective, it's well-worth exploring this option, a nice side effect would be to having easier readable SVG data URIs.
Luckily, RL's CSSMin.php give us a central place where all SVGs via `@embed` are going through.