Привет! Сегодня рассмотрим, как правильно размещать svg-иконки на странице Inline-методом. Рассмотрим, как быть, когда валидатор ругается на одинаковые id. Поехали!
Итак, как вставить svg в html. Ну, на самом деле все довольно просто. Если Вы хотите вставить — берете и вставляете. <div class="item">
<div class="item__icon">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 611.989 611.988">
<g>
<g id="Wi-Fi">
<g>
<path d="M305...
Уже давно все иконки на сайте используют в SVG формате. Это современно, адаптивно и удобно. Но что делать если svg иконок много? Как использовать спрайты на примере обычных растровых изображений мы уже знаем. Просто соединяем много иконок в одну картинку и выбираем нужный участок картинки через background-position. В случае с SVG самым быстрым способом будет воспользоваться этим сервисом. Создание SVG спрайта 1. Итак, заходим на SVG Sprit 2. Перетаскиваем нужные SVG иконки прям на страницу 3. Получаем...