Привет! Сегодня рассмотрим, как правильно размещать 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.994,417.769c-30.85,0-55.887,25.037-55.887,55.887s25.038,55.887,55.887,55.887s55.887-25.037,55.887-55.887
S336.843,417.769,305.994,417.769z M605.436,222.369C530.697,133.434,421.549,82.446,305.994,82.446
S81.309,133.434,6.551,222.369c-9.93,11.811-8.402,29.434,3.428,39.363c5.234,4.396,11.587,6.558,17.939,6.558
c7.973,0,15.891-3.391,21.423-9.967c64.084-76.248,157.639-119.989,256.652-119.989c99.013,0,192.568,43.741,256.651,119.971
c5.533,6.576,13.45,9.967,21.424,9.967c6.353,0,12.724-2.143,17.958-6.558C613.837,251.802,615.366,234.161,605.436,222.369z
M305.994,194.22c-82.545,0-160.489,36.419-213.879,99.926c-9.929,11.811-8.402,29.434,3.428,39.363
c5.234,4.396,11.605,6.558,17.958,6.558c7.973,0,15.891-3.391,21.405-9.967c42.716-50.838,105.086-79.993,171.089-79.993
c66.003,0,128.372,29.155,171.107,79.993c5.533,6.595,13.45,9.967,21.404,9.967c6.353,0,12.724-2.143,17.959-6.558
c11.829-9.929,13.356-27.57,3.428-39.363C466.483,230.64,388.539,194.22,305.994,194.22z M305.994,305.994
c-49.553,0-96.331,21.852-128.335,59.948c-9.93,11.811-8.402,29.434,3.428,39.363c5.234,4.396,11.605,6.557,17.958,6.557
c7.973,0,15.891-3.39,21.405-9.966c21.368-25.429,52.552-40.016,85.544-40.016s64.177,14.587,85.544,40.016
c5.533,6.595,13.45,9.966,21.405,9.966c6.353,0,12.724-2.142,17.958-6.557c11.83-9.93,13.357-27.553,3.428-39.363
C402.324,327.846,355.546,305.994,305.994,305.994z"/>
</g>
</g>
</g>
</svg>
</div>
<div class="item__text">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corrupti, laudantium.
</div>
</div>
Такой метод максимально простой и рабочий. Здесь важно понимать, что нужно оптимизировать svg перед вставкой. Убрать лишний код. Отчасти, тут может помочь сервис svg-optimizer, отчасти придется самому что-то делать. Рекомендую так же избегать масок внутри svg и удалять их.
Да, в целом это все просто, но естественно я бы не стал делать статью, если бы не было каких-то подводных камней. Но, сперва, о стилизации.
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.item {
width: 500px;
height: 400px;
transition: all 0.15s;
cursor: pointer;
&:hover {
transition: all 0.15s;
.item__icon {
transition: all 0.15s;
svg {
transition: all 0.15s;
fill: red;
}
}
}
&__icon {
width: 200px;
height: 200px;
margin: 0 auto;
transition: all 0.15s;
svg {
display: block;
width: 100%;
height: 100%;
transition: all 0.15s;
}
}
&__text {
font-size: 20px;
text-align: center;
margin-top: 20px;
}
}
Как видно, мы можем сделать прекрасную адаптивную свгшку и использовать ее где нам надо. А так же, преимущество использования svg налицо — можно очень легко и просто менять заливку элемента. При наведении, или любом другом действии. Спойлер: на этой же неделе (в пятницу) выйдет статья про использование svg карты России (как сделать ее кликабельной, сделать у нее боковое меню и при наведении менять цвета).
Зачем все это?
Все что было до этого — весьма тривиально и просто. Ну, поменять fill при ховере несложно. А вот следующий шаг — это использование тега symbol и создания целых svg-спрайтов.
HTML (для спрайтов)
<svg class="sprite">
<symbol viewBox="0 0 611.989 611.988" id="icon1">
<g>
<g id="Wi-Fi">
<g>
<path d="M305.994,417.769c-30.85,0-55.887,25.037-55.887,55.887s25.038,55.887,55.887,55.887s55.887-25.037,55.887-55.887
S336.843,417.769,305.994,417.769z M605.436,222.369C530.697,133.434,421.549,82.446,305.994,82.446
S81.309,133.434,6.551,222.369c-9.93,11.811-8.402,29.434,3.428,39.363c5.234,4.396,11.587,6.558,17.939,6.558
c7.973,0,15.891-3.391,21.423-9.967c64.084-76.248,157.639-119.989,256.652-119.989c99.013,0,192.568,43.741,256.651,119.971
c5.533,6.576,13.45,9.967,21.424,9.967c6.353,0,12.724-2.143,17.958-6.558C613.837,251.802,615.366,234.161,605.436,222.369z
M305.994,194.22c-82.545,0-160.489,36.419-213.879,99.926c-9.929,11.811-8.402,29.434,3.428,39.363
c5.234,4.396,11.605,6.558,17.958,6.558c7.973,0,15.891-3.391,21.405-9.967c42.716-50.838,105.086-79.993,171.089-79.993
c66.003,0,128.372,29.155,171.107,79.993c5.533,6.595,13.45,9.967,21.404,9.967c6.353,0,12.724-2.143,17.959-6.558
c11.829-9.929,13.356-27.57,3.428-39.363C466.483,230.64,388.539,194.22,305.994,194.22z M305.994,305.994
c-49.553,0-96.331,21.852-128.335,59.948c-9.93,11.811-8.402,29.434,3.428,39.363c5.234,4.396,11.605,6.557,17.958,6.557
c7.973,0,15.891-3.39,21.405-9.966c21.368-25.429,52.552-40.016,85.544-40.016s64.177,14.587,85.544,40.016
c5.533,6.595,13.45,9.966,21.405,9.966c6.353,0,12.724-2.142,17.958-6.557c11.83-9.93,13.357-27.553,3.428-39.363
C402.324,327.846,355.546,305.994,305.994,305.994z"/>
</g>
</g>
</g>
</symbol>
</svg>
<div class="item">
<div class="item__icon">
<svg>
<use xlink:href="#icon1"></use>
</svg>
</div>
<div class="item__text">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corrupti, laudantium.
</div>
</div>
<div class="item">
<div class="item__icon">
<svg>
<use xlink:href="#icon1"></use>
</svg>
</div>
<div class="item__text">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corrupti, laudantium.
</div>
</div>
В чем суть и для чего это: представим, что у вас на странице есть много (2 и больше) элемента, который использует одну и ту же svg иконку. Допустим, это товары магазина, и на кнопке покупке стоит иконка в svg. Поскольку svg имеет id (и зачастую использует его для отображения svg-элемента), мы уже не можем просто так размножить эту иконку. Валидатор начнет грубо ругаться на дубликаты в id.
Ну, и просто будет слишком много кода, если постоянно копировать код большой свгшки снова и снова.
По HTML-коду видно решение — использование спрайтов через тег symbol. Мы создаем в начале страницы (ну или лучше в отдельном файле) скрытый тег <svg>, в него помещаем тег symbol. На каждый новый тип свг нужен новый symbol. Указываем для него viewBox и id(любой свой). Тем самым мы уже имеем один элемент с одним уникальным Id. Ну и потом простейшей строчкой use xlink:href=»#icon1″ вызываем эту свгшку там, где нам надо. Просто и доступно. Не только работает на нас (в плане улучшения валидности кода), но еще и здорово очищает этот код от множества svg.
Ну, и тут два пена — на обычный вариант, и на использование symbol:
https://codepen.io/MaxGraph/pen/yrjpwb
https://codepen.io/MaxGraph/pen/JVZWap
Оригинальная статья на: https://blog.maxgraph.ru/2019/04/22/svg-cherez-symbol/
Подписывайтесь на блог (через форму на сайте) и получайте маленький подарок в виде крутых полезных ссылок для верстальщика!
Успехов!