Как вставить SVG иконку на сайт
Существует несколько способов, как вставить SVG иконку. Я не буду перечислять здесь все рабочие варианты, дабы не перегружать вас избыточной информацией. А остановлюсь, на двух принципиальных методах – с интерактивностью (взаимодействие с пользователем) и без неё.
Без поддержки интерактивности
Если вы не планируете, вносить изменения в SVG файл или анимировать его, а просто используете, как законченное изображение, то вставляете, как картинку.
<img src="facebook.svg" alt="facebook"> // через HTML файл
.header { background: url(facebook.svg) no-repeat; } // через CSS файл
С поддержкой интерактивности
Для дальнейших манипуляций с SVG файлом – наилучший способ встраивания иконки – тег object. Внутри тега object, для старых браузеров, вставляем SVG иконку, картинкой. Дело в том, что старые браузеры, не видят формат SVG, так покажем им хоть что-то.
<object type="image/svg+xml" data="icon.svg">
<img src="icon.png">
</object>
Плюсы SVG формата
- взаимодействует с пользователем
- адаптируется под разные разрешения экрана
- масштабируется без потери качества
- мало весит, значит, быстро загружается
Как правило, SVG формат, применяют для сохранения иконок. Откуда же они берутся? Есть несколько вариантов.
- создать в векторных программах
- скачать бесплатно или купить
Зайдем на сайт flaticon.com и скачаем иконку автомобиля. Скачанный SVG файл, состоит из инструкций по построению прямых и кривых линий, в виде текстовой информации.
Как вставить иконку в HTML
Создадим два блока, для управления позиционированием и размерами иконки, на странице. Внутри блока с классом icon, вставим, ссылку на SVG иконку, посредством тега object.
<div class="box">
<div class="icon">
<object type="image/svg+xml" data="sedan-car-front.svg" id="svg">
</object>
</div>
</div>
CSS код
Разместим в центре, родительский блок с классом box.
.box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
Дочерний блок с классом icon, выравниваем по центру, относительно родителя.
.icon {
margin: auto;
width: 30%;
}
Как сделать SVG адаптивным
В коде файла sedan-car-front.svg, жестко заданы размеры, которые не позволят масштабировать икону.
width="48.997px" height="48.998px"
Заменим пиксели на проценты.
width="30%" height="30%"
Вот и все. Теперь при изменении размера экрана, размеры иконки, так же меняются.
Как изменить цвет SVG
Для изменения цвета, вместо свойства color, используют – атрибут fill. Изменить цвет, можно прямо в коде SVG, добавив, следующий код, между тегами svg.
fill="red"
Машина стала красной.
-
Создано 02.08.2019 10:54:48
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.