Как верстаются кликабельные объекты с использованием иконок в svg?

Question

[larka_skaz]

Добрый день, колллеги. Думаю вопрос прост как пять копеек:
1.Есть кнопка-иконка, допустим такая
Для верстальщика нужно подготовить 2 svg-файла или же только один, а эффект изменения цвета и типа заливки будет добиваться с помощью кода?

2. Допустим есть такая иконка:

В этом случае нужно для изменения цвета иконки нужна два svg файла или же один, а дополнительный цвет задается кодом?

Спасибо за ответы и с наступающим.

Comments

[Ankhena]

по одному файлу в каждом случае

Answer 1

[Dima Polos]

svg надо вставить кодом прямо html. Когда рисуешь svg в редакторе графики, то в панели слои можно подписать отдельный слой, и подпись попадает в атрибут id, а если объекты сгруппировать, то всем этим слоям внутри группы будет присвоен атрибут class. Зачем это? Теперь, зная id или class слоя можно просто задать ему css стили. Чтобы поменять цвет используйте свойство fill: #... как обычно в css.
Например, иконка нарисована кривой линией, id у нее line, то можно сделать так:
#line:hover{
fill:#777;
}

Comments

[larka_skaz]

т.е. будет более корректно передавать иконки для верстки в svg черного цвета? или цвета, который должны они иметь в спокойном состоянии?

[Андрей Хохлов]

Вот бы сейчас в вёрстке использовать классы и id, которые дизайнер в люстре наподписывал)

[Dima Polos]

larka_skaz, тут как угодно, с помощью fill можно задать цвет, например #line{fill:#788;}
а на ховер так же другой цвет задать. Вы можете любой цвет задать в любой момент времени, если не прописать, то будет тот, что по умолчанию.

[Dima Polos]

svg это обычный xml, открываете в тестовом редакторе и просто читаете все что внутри, как обычный html, например можно найти строчку , вот видно класс, берете и свой класс сюда пишете, без графического редактора. Я привел пример про редактор, так как в нём видно какой элемент и какой у него класс или id, тогда как в текстовом редакторе увидите просто какие-то path, g, poligon и так далее. В конце концов можно просто открыть svg с помощью inkspace и посмотреть, что к чему, подписать по своему.

[Dima Polos]

Да, ещё для решения такой задачи можно использовать иконочный шрифт, например поищите fontawesome. Там еще проще, подключили css к проекту, нашли в документации нужную иконку, и там же написан класс, который в html надо будет добавить, пишете в разметке < i class="fa fa-vk"> < /i>, класс fa обязательно, а fa-vk это иконка соц сети вконтакте, в css управление такое:
.fa-vk{
color: blue;
font-size: 30px;
...
}
.fa-vk{
color: #45ccf2; // придумал только что с головы, не знаю, что за цвет
}

[Ankhena]

larka_skaz, цвета в спокойном состоянии, остальное в стайлгайде, дальше верстальщик разберется.

Answer 2

[Андрей Хохлов]

Просто чёрные иконки, размеры и цвет задаются через CSS.

Так же, по опыту, очень желательно чтобы иконки были на холстах одного размера (допустим 100х100).
Тогда между ними будет сохранятся пропорциональность. Скачайте какой-нибудь набор иконок чтобы было понятнее.