HTMLCSSInkscape

Смена цвета SVG изображения на странице

Когда на сайт добавляются различные иконки, которые помогают посетителям взаимодействовать с сайтом, зачастую возникает вопрос, как сменить цвет этих иконок, каждый раз перерисовывать PNG не самый приятный вариант, в то время, как для SVG изображений цвет можно менять посредством CSS.

Сперва необходимо подготовить векторное SVG изображение, для этого можно воспользоваться редактором с открытым исходным кодом - Inkscape.
Для того чтобы SVG менял цвет на странице сайта, необходимо в настройках фона и обводки изображения снять заливку цветом (выбрать знак вопроса в настройках фона и обводки), Inkscape 0.48.5:


Далее, для того, чтобы обращаться к объекту внутри svg файла, необходимо задать объекту id сделать это можно в свойствах объекта:


А далее пример того, как изменить цвет и обводку объектов уже на html странице при помощи css: