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. Among them is replacing attribute quotes from double `"` to single `'` ones to impactful reduce data over the wire necessary.
__**Exemplified on close icon:**__
Original file:
```lang=xml
<?xml version="1.0" encoding="
utf-8"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 ");
```
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");
```
I think it's worth exploring this option, a nice side effect would be to having easier readable SVG data URIs.
The main blocker though, and probably the show-stopper is that we'd need to have a different LESS mixin with double quotes around the data URI and I'm not sure how a transition phase to move all the hundreds of SVGs over at one point in time would look like.