Как указать бэкграундом свг-спрайт?

Question

[Иван]

У меня галп собирает все картинки в свг спрайт, в саму разметку вставить спрайт не проблема, но сейчас нужно вставить бэкграундом и не могу сообразить как это сделать.

код свг спрайта

spoiler

<?xml version="1.0" encoding="utf-8"?>
<svg viewBox="0 0 148 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <style>:root>svg{display:none}:root>svg:target{display:block}</style>
    <svg fill="none" viewBox="0 0 148 19" id="logo" xmlns="http://www.w3.org/2000/svg">
        <path d="M9.633 13.441c.164-.93-.293-1.64-1.371-2.132L6 10.406c-2.625-1.172-3.871-2.785-3.738-4.84a4.446 4.446 0 01.937-2.53c.57-.735 1.371-1.31 2.403-1.723C6.632.89 7.746.688 8.942.703c1.648.031 2.98.524 3.995 1.477 1.016.945 1.516 2.215 1.5 3.808h-3.421c.039-.773-.133-1.375-.516-1.804-.375-.43-.961-.653-1.758-.668-.781-.016-1.46.164-2.039.539-.578.367-.922.875-1.031 1.523-.149.852.422 1.528 1.71 2.028l1.548.586.89.41c2.305 1.14 3.383 2.742 3.235 4.804-.07 1.008-.395 1.88-.973 2.614-.57.726-1.352 1.285-2.344 1.675-.984.391-2.07.575-3.258.551-1.21-.023-2.289-.277-3.234-.761-.945-.485-1.664-1.168-2.156-2.051-.461-.82-.676-1.758-.645-2.813l3.434.012c-.11 1.852.8 2.793 2.73 2.824.836 0 1.524-.184 2.063-.55.539-.368.86-.856.96-1.466zM30.246.938l-1.922 11.25c-.265 1.882-1.047 3.37-2.344 4.464-1.296 1.094-2.906 1.625-4.828 1.594-1.203-.023-2.25-.285-3.14-.785a4.661 4.661 0 01-1.957-2.133c-.422-.922-.567-1.965-.434-3.129L17.531.938h3.434l-1.91 11.273a5.007 5.007 0 00-.012 1.23c.156 1.266.91 1.922 2.262 1.97.968.03 1.761-.235 2.379-.798.617-.562 1.015-1.367 1.195-2.414L26.8.938h3.445zM34.617 11.988L33.563 18h-3.434L33.094.938l5.976.011c1.844 0 3.293.512 4.348 1.535 1.055 1.024 1.516 2.36 1.383 4.008-.125 1.672-.825 3.008-2.098 4.008-1.266 1-2.883 1.5-4.852 1.5l-3.234-.012zm.48-2.847l2.86.023c.922 0 1.688-.238 2.297-.715.61-.476.973-1.12 1.09-1.933.117-.813-.016-1.461-.399-1.946-.375-.484-.933-.742-1.675-.773l-3.235-.012-.937 5.356zM56.531 10.606h-6.539l-.797 4.57h7.688L56.39 18H45.27L48.233.938h11.098l-.504 2.847h-7.652l-.715 4.067h6.562l-.492 2.754zM65.8 11.754h-2.788L61.922 18h-3.434L61.453.938l5.648.011c1.891 0 3.344.446 4.36 1.336 1.023.89 1.477 2.13 1.36 3.715-.165 2.344-1.415 3.973-3.75 4.887l2.402 6.926V18h-3.657l-2.015-6.246zm-2.296-2.848l2.555.024c.906-.016 1.652-.258 2.238-.727.594-.476.95-1.12 1.066-1.933.11-.758-.011-1.352-.363-1.782-.352-.43-.91-.66-1.676-.691l-2.93-.012-.89 5.121zM73.465 18L76.43.938l4.898.011c1.148.024 2.18.285 3.094.785a5.802 5.802 0 012.238 2.133c.57.93.914 1.977 1.031 3.14.063.68.055 1.376-.023 2.087l-.082.621c-.344 2.5-1.328 4.508-2.953 6.023C83.016 17.246 81.05 18 78.738 18h-5.273zM79.37 3.785l-1.98 11.39 1.43.013c1.577 0 2.843-.579 3.796-1.735.961-1.156 1.512-2.902 1.652-5.238l.024-.375c.023-1.29-.223-2.277-.738-2.965-.516-.687-1.286-1.047-2.309-1.078l-1.875-.012zM104.285.938l-1.922 11.25c-.265 1.882-1.047 3.37-2.343 4.464-1.297 1.094-2.907 1.625-4.829 1.594-1.203-.023-2.25-.285-3.14-.785a4.662 4.662 0 01-1.957-2.133c-.422-.922-.567-1.965-.434-3.129L91.57.938h3.434l-1.91 11.273a5.007 5.007 0 00-.012 1.23c.156 1.266.91 1.922 2.262 1.97.969.03 1.762-.235 2.379-.798.617-.562 1.015-1.367 1.195-2.414L100.84.938h3.445zM108.656 11.988L107.602 18h-3.434L107.133.938l5.976.011c1.844 0 3.293.512 4.348 1.535 1.055 1.024 1.516 2.36 1.383 4.008-.125 1.672-.824 3.008-2.098 4.008-1.265 1-2.883 1.5-4.851 1.5l-3.235-.012zm.481-2.847l2.859.023c.922 0 1.688-.238 2.297-.715.609-.476.973-1.12 1.09-1.933.117-.813-.016-1.461-.399-1.946-.375-.484-.933-.742-1.675-.773l-3.235-.012-.937 5.356zM130.57 10.606h-6.539l-.797 4.57h7.688L130.43 18h-11.121L122.273.938h11.098l-.504 2.847h-7.652l-.715 4.067h6.562l-.492 2.754zM139.84 11.754h-2.789L135.961 18h-3.434L135.492.938l5.649.011c1.89 0 3.343.446 4.359 1.336 1.023.89 1.477 2.13 1.359 3.715-.164 2.344-1.414 3.973-3.75 4.887l2.403 6.926V18h-3.657l-2.015-6.246zm-2.297-2.848l2.555.024c.906-.016 1.652-.258 2.238-.727.594-.476.949-1.12 1.066-1.933.11-.758-.011-1.352-.363-1.782-.352-.43-.91-.66-1.676-.691l-2.929-.012-.891 5.121z"
              fill="#333"/>
        <path fill="#E2FA1D" d="M0 8h148v4H0z"/>
    </svg>
    <svg fill="none" viewBox="0 0 32 32" id="search" xmlns="http://www.w3.org/2000/svg">
        <path d="M30 28.59L22.45 21A11 11 0 1021 22.45L28.59 30 30 28.59zM5 14a9 9 0 1118 0 9 9 0 01-18 0z"
              fill="#333"/>
    </svg>
</svg>

Answer 1

[Рома Зварич]

Сохраняете код в отдельный файл с расширением .svg.
В свойстве background указываете ссылку на этот файл как на изображение

Comments

[Иван]

а работать с одним спрайтом никак не получится? у меня галп каждый раз удаляет всё, что находится в папке билд, придётся дополнять галп, не проблема, но всё-таки какой-то костыль

[xonar]

BenderIsGreat34, увы никак.

Answer 2

[WapSter]

со спрайтом svg в css фоном работать никак невозможно, только отдельным файлом.

Comments

[Rustam Bainazarov]

Смотря как он сделан. Если по заветам растровых спрайтов — то можно. То есть, если это картинка, а не компиляция symbol'ов. На сайте «Почты России» раньше был SVG-спрайт такого толка, сейчас не знаю.

[WapSter]

Рустам Байназаров, тогда уж лучше делать простой спрайт, удобно и быстро. Помню когда-то я такие спрайты собирал в фотошопе, то были темные времена)

[Rustam Bainazarov]

Тимур Турсунбаев, да, жуткая жопа. Ну там смысл только в том, что он при масштабировании не размывается, в отличие от растровых спрайтов.