Как заменить SVG на фоновое изображение (CSS background)?

Коротко: SVG можно положить в background через data-URI (raw или base64). Управляете шириной элемента (width) и масштабированием SVG через background-size (или через CSS-свойство aspect-ratio для автoвысоты). Ниже — рабочие примеры и советы.

1) Простой пример (URI-encoded SVG)
HTML:
<div class="logo"></div>

CSS:
.logo{
  width: 200px;               /* здесь задаёте нужную ширину */
  aspect-ratio: 100 / 40;    /* либо задайте высоту явным образом или padding-trick */
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%; /* растянуть SVG под размеры блока */
  /* data-URI: SVG должен быть URL-кодирован (спецсимволы) */
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Crect width='100' height='40' fill='%23ff0'/%3E%3Ctext x='50' y='25' font-size='12' text-anchor='middle' fill='%23000'%3EHello%3C/text%3E%3C/svg%3E");
}

Пояснения:
- viewBox="0 0 100 40" — полезно, чтобы SVG масштабировался пропорционально.
- В SVG символы типа #, "<", ">" и пробелы нужно URL-энкодить (%23 и т.д.). Проще — использовать encodeURIComponent на строке SVG в JS или генерировать base64.

2) Альтернатива — base64 (не требует URL-encoding видимых символов)
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgNDAiPjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iNDAiIGZpbGw9IiNmZjAiLz48dGV4dCB4PSI1MCIgeT0iMjUiIGZvbnQtc2l6ZT0iMTIiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZpbGw9IiMwMDAiPkhlbGxvPC90ZXh0Pjwvc3ZnPg==");

3) Контроль ширины и сохранение пропорций
- Чтобы менять только ширину: задайте width на контейнере (.logo { width: 150px; }) и оставьте aspect-ratio (или вычисляйте высоту через padding-bottom). background-size: 100% auto либо background-size: contain подстроит SVG по ширине.
Пример:
.logo{ width: 120px; aspect-ratio: 100 / 40; background-size: 100% auto; }

4) Советы
- Если хотите менять цвет SVG через CSS, в SVG используйте fill="currentColor" или stroke="currentColor", тогда цвет задаётся цветом текста контейнера: color: #f00;
- Если SVG сложный и содержит кавычки/апострофы, удобнее base64-encode, чтобы не переживать об экранировании.
- Для старых браузеров вместо aspect-ratio используйте padding-bottom trick: высота = width * (height/viewBox-width) с position: relative.

Если пришлёте ваш исходный SVG/HTML (или ссылку на jsbin), могу дать точный CSS/URI прямо под ваш пример.

<pre><code class="html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta name="viewport" content="width=device-width"&gt;
  &lt;title&gt;JS Bin&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;div class="item"&gt;
    
  &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre> <br/> <pre><code class="css">.item {
  background: -webkit-linear-gradient(left, #22232D, #3D3D3A);
  background: -moz-linear-gradient(left, #22232D, #3D3D3A);
  background: -o-linear-gradient(left, #22232D, #3D3D3A);
  background: linear-gradient(to right, #22232D, #3D3D3A);
  width: 100%;
  height: 24px;
  margin: 40px;
}

body {
  background-color: #222222;
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}</code></pre> <br/> <br/> svg тут избыточен, css тут делает тоже самое и легче контрлируется