BenderIsGreat34
@BenderIsGreat34
junior front-end

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

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

код свг спрайта
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>
  • Вопрос задан
  • 54 просмотра
Решения вопроса 1
Сохраняете код в отдельный файл с расширением .svg.
В свойстве background указываете ссылку на этот файл как на изображение
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
wapster92
@wapster92
Люблю трилогию ME
со спрайтом svg в css фоном работать никак невозможно, только отдельным файлом.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Стер 23 Москва
от 110 000 до 140 000 руб.
SMMplanner Москва
от 100 000 до 150 000 руб.
Design, Code and Robots Санкт-Петербург
от 50 000 до 80 000 руб.