13.08.2015 Установка Sass 21.04.2015 Смена цвета SVG изображения на странице 21.04.2015 Смена цвета SVG изображения на странице 21.04.2015 Смена цвета SVG изображения на странице 29.02.2012 Увеличение изображения по клику jQuery 29.02.2012 Увеличение изображения по клику jQuery 29.02.2012 Замена стандартного ALERT с помощью JQUERY 29.02.2012 Замена стандартного ALERT с помощью JQUERY
#513

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

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

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


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


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

30.10.2011 Модальное окно как вконтакте 30.10.2011 Модальное окно как вконтакте 30.03.2011 Стилизация html button 30.03.2011 Стилизация html button 02.11.2011 Табы без использования JavaScript, на css и html 02.11.2011 Табы без использования JavaScript, на css и html 22.03.2011 HTML5 атрибут placeholder 29.01.2010 Кроссплатформенный векторный редактор Inkscape
О сайте