@Nine8ty

Как правильно подключить код SVG используя только CSS?

Есть доступ на сайте только к CSS. Есть ли возможность подключить SVG код только лишь через CSS и как это сделать? Может кто пример приведет.
  • Вопрос задан
  • 3343 просмотра
Пригласить эксперта
Ответы на вопрос 6
tema_sun
@tema_sun
Можно заинлайнить
.e{
background-image:  url("data:image/svg+xml;utf8,<svg>....</svg>")
}
Ответ написан
Можно попробовать через :before или :after в атрибут content:
DIV:before{
	content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"><path d="M19.414 27.414l10-10c0.781-0.781 0.781-2.047 0-2.828l-10-10c-0.781-0.781-2.047-0.781-2.828 0-0.781 0.781-0.781 2.047 0 2.828l6.586 6.586h-19.172c-1.105 0-2 0.895-2 2s0.895 2 2 2h19.172l-6.586 6.586c-0.39 0.39-0.586 0.902-0.586 1.414s0.195 1.024 0.586 1.414c0.781 0.781 2.047 0.781 2.828 0z" fill="#FFF" /></svg>');
	}
Ответ написан
aval12
@aval12
Креативный директор веб-студии #VA
В CSS подключить SVG можно с использованием стандартного свойства background-image

.element {
  background-image: url(/images/image.svg);
}

Правда, в этом случае у вас не будет доступа к редактированию свойств элементов самого SVG.
Ответ написан
@Nine8ty Автор вопроса
Мне бы как для чайника расписать. Где лучше код svg получить? (я вот через corel вроде получил, открыв svg в notepad). Куда можно загрузить svg, если получать ссылку? Или как вставить этот код svg в css чтоб заработало. Сразу ли нужно красить svg с background-color, чтоб было видно и т.д.? Буду очень благодарен за конструктивный ответ!
Ответ написан
dimovich85
@dimovich85 Куратор тега CSS
Уроки по JS - https://t.me/school_ofpery
Берете svg код, можно даже попробовать из редактора картинку перетащить в открытый блокнот и так вставить код, по крайней мере в иллюстраторе так можно, как в кореле, не знаю, или найдите что-то типа save as. Дальше картинку можно загрузить на какой-нибудь обменник для фото, или на бесплатный сток, на куда-то в облако, в общем. Ссылку на картинку вставить в css через background-image.
Вариант второй, найти в сети base64 конвертер, так и гуглить "base64 converter svg", залить в него svg и скопипастить здоровенный и страшный код, потом его вставить в background-image, только без url(), а тупо вставить как значение свойства.
Ответ написан
zorro76
@zorro76
front-end
Делаю всегда практически вот таким способом
1) создаю спрайт, использую symbol
<div style="display: none;">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <symbol id="right-arr" viewBox="0 0 17 32">
            <g id="right-arr">
                <line x1="16" y1="16" x2="1" y2="31"/>
                <path d="M1,1"/>
                <line x1="1" y1="1" x2="16" y2="16"/>
            </g>
        </symbol>
        <symbol id="left-arr" viewBox="0 0 17 32">
            <g id="left-arr">
                <line class="cls-1" x1="1" y1="16" x2="16" y2="1"/>
                <path class="cls-1" d="M16,31"/>
                <line class="cls-1" x1="16" y1="31" x2="1" y2="16"/>
            </g>
        </symbol>
    </svg>
</div>

2) в разметке пишу:
<svg class="icon-right-arr">
  <use xlink:href="#right-arr"></use>
</svg>
<svg class="icon-left-arr">
  <use xlink:href="#left-arr"></use>
</svg>

и вуаля, готово, можете воздействовать на Ваши иконки как угодно и где угодно с помощью css.
Касательно простыни с спрайтом svg она под display: none; но если коробит восприятие можно и забросить куда -то на сервак и оттуда уже тянуть.
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
14 авг. 2020, в 02:27
1000 руб./за проект
14 авг. 2020, в 01:51
600 руб./за проект
13 авг. 2020, в 23:56
200000 руб./за проект