В предыдущих сериях…
Ранее мы выяснили, в чем отличие растровых форматов изображения от векторных. И научились подключать SVG-иконку на сайт тремя способами.
Сегодня будем работать с inline кодом, посмотрим, какие бывают атрибуты у тега <svg>. Разберем случай, почему может не работать смена цвета иконки, прописанная в файле CSS.
Где взять inline код SVG-иконки
Если вы скачали готовую графику в формате .svg, то этот файл можно открыть в любом редакторе кода и увидеть тот самый inline код. Как мы помним, векторная графика описывает изображение с помощью специальных формул для создания фигур. При этом используются тег <svg> (контейнер для хранения SVG графики), внутри которого помещается один или несколько тегов <path> (для хранения координат прорисовки фигуры или части её). Этот код можно скопировать и вставить в html файл в том месте, где нужно расположить иконку.
Для примера возьмем иконку твиттера. Скопируем тег svg из файла иконки и вставим в HTML.
Содержимое svg кода
Итак, мы подключили иконку в формате svg inline, теперь рассмотрим код подробнее.
<h2>Пример inline кода</h2>
<!-- Twitter icon -->
<svg class="twitter-icon" width="256" height="256" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/>
</svg>Так отобразится в браузере:
Пример inline кода
Теги
Мы видим тег <svg> и <path>, у которого есть атрибут d с координатами точек на плоскости, по которым рисуется фигура. В данном случае тег <path> один, изображение состоит из одной фигуры, но изображение может состоять из нескольких фигур — тогда будет несколько тегов <path>.
Атрибуты
Перейдем к атрибутам тега <svg>
xmlns="http://www.w3.org/2000/svg" — данный атрибут прописывает путь к стандарту svg, в котором описана эта иконка
viewBox="0 0 512 512" — указывает на ту область иконки, которую мы видим в браузере
class="twitter-icon" — как и другим элементам, можно задать класс и стилизовать по нему в CSS файле
Теперь добавим некоторые атрибуты самостоятельно.
<h2>Пример inline кода с атрибутами</h2> <!-- Twitter icon --> <svg class="twitter-icon" width="256" height="256" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path fill="red" stroke="green" stroke-width="10" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/> </svg>
width="256" height="256" — при помощи этих атрибутов можно настраивать размер иконки
Атрибуты fill, stroke, stroke-width в SVG
Эти атрибуты можно применить к тегу <svg> и тогда они распространятся на всю иконку. А можно применить к отдельному <path> — тогда они будут работать только в области, описанной в конкретном <path>. В нашем случае иконка состоит всего из одного <path>, поэтому без разницы, к чему применить данные атрибуты.
fill="red" — заливка цветом
stroke="green" — цвет обводки
stroke-width="10" — толщина обводки
Вот так мы переделали иконку при помощи атрибутов:
Пример inline кода с атрибутами
Интерактив по ховеру
При помощи CSS будем менять поведение иконки при наведении на нее курсором (по ховеру). Вернемся к изначальному коду без дополнительных атрибутов. Копируем класс иконки и стилизуем в файле CSS. Зададим свойство fill: blue; и далее по псевдоклассу :hover меняем на fill: rgb(145, 8, 199);
HTML
<h2>Пример inline кода, стилизация в CSS</h2> <!-- Twitter icon --> <svg class="twitter-icon" width="256" height="256" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/> </svg>
CSS
/* Интерактив. SVG inline код. Смена цвета по ховеру */
.twitter-icon {
fill: blue;
}
.twitter-icon:hover {
fill: rgb(145, 8, 199);
}Результат в браузере:
Пример inline кода, стилизация в CSS
Внимание!
Этот прием будет работать только в том случае, если в html коде фигуры не прописан нигде атрибут fill="". Если вы работаете в CSS, то лучше убирать все атрибуты типа fill и stroke, чтобы не было путаницы. И переносить их в файл CSS в качестве свойств.
Заключение
Любой файл .svg можно открыть в редакторе кода. Сам код можно копировать и использовать в файле .html
Кастомизировать иконку можно при помощи атрибутов. Но создать интерактивность получится только при помощи стилизации в CSS файле. При этом важно следить за тем, чтобы контроль заливки или других свойств, которые будут меняться, происходил только в одном месте, в файле .css. В противном случае интерактив не заработает, так как значения атрибутов перебьют значения свойств.
