161 прочтение · 1 год назад
Что такое SVG-спрайт и для чего он нужен?
SVG-спрайт — это файл для хранения векторной графики формата SVG. Записывается по принципу: file-name.svg Для чего нужен SVG-спрайт? Для динамической стилизации векторных изображений через CSS и оптимизации. Чем хороши спрайты? ◌ Встроенные svg или по-другому "инлайн svg" занимают over-много места в html файле. Если одна и та же инлайн-иконка повторится на сайте 100 раз, то html будет долго грузиться + разметка станет нечитабельной. Используя спрайт, вы обойдетесь без лишнего дублирования кода — элементы будут ссылаться на один и тот же код во внешнем файле...
2,1K прочтений · 5 лет назад
Как вставить svg в html. Вставляем inline svg в html-код
Привет! Сегодня рассмотрим, как правильно размещать 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...