2143 читали · 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...
173 читали · 7 лет назад
Анимированная SVG-маска своими руками
Как сделать простую анимированную SVG-фигуру и использовать её как маску? Для начала в иллюстраторе или в любом другом векторном редакторе рисуем фигуру. Я рисовал с помощью инструмента «Кривизна». Боковые точки сделал опорными (двойным кликом), чтобы между ними не образовывалась дуга, которая выходит за пределы монтажной области. Это у нас будет первый кадр. Рисуем ещё. Можно просто сдвинуть какие-то точки, можно нарисовать заново. Главное — чтобы количество точек было одинаковым на всех кадрах...