How to change colours of SVG graphics
SVG graphics provided on our site are prepared precisely, optimized and most of all CSS styled. You don't need to use graphic editor for small changes like: replace colours or improve opacity etc.
SVG as XML declared file can be manually modified in ordinary text/code editor such as Notepad++, Brackets, Atom . . .
Change colours of SVG elements
Simply open SVG file in text/code editor, find cascading styles definition and change color code of required class. The example bellow shows how it is easy.
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 35 35" enable-background="new 0 0 35 35">
<style type="text/css"><![CDATA[
.cc-lead{fill: rgba(0,0,0,0.45);}
.cc-base{fill: #dddddd;}
]]></style>
<path class="cc-base" d="M17.5,10.329l9.5,9.5V28h-5v-8h-9v8H8v-8.172L17.5,10.329 M18,8h-1L6,19v11h9v-8h5v8h9V19L18,8L18,8z"/>
<polygon class="cc-lead" points="32,20 17.5,5.5 3,20 3,17 17.5,2.5 32,17 "/>
</svg>
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 35 35" enable-background="new 0 0 35 35">
<style type="text/css"><![CDATA[
.cc-lead{fill: #CC0000;}
.cc-base{fill: #FFB000;}
]]></style>
<path class="cc-base" d="M17.5,10.329l9.5,9.5V28h-5v-8h-9v8H8v-8.172L17.5,10.329 M18,8h-1L6,19v11h9v-8h5v8h9V19L18,8L18,8z"/>
<polygon class="cc-lead" points="32,20 17.5,5.5 3,20 3,17 17.5,2.5 32,17 "/>
</svg>
Change/add background colour
Many of SVG graphics (especialy icons) are provided without background colour setting. This option gives you ability to inherit such properties from parent HTML element. For simple demonstration we use CSS styles applied to HTML <img> element so you don't need modify SVG file as image source.
... <div class="svg-bgcolor"> <div class="caption"><strong>from</strong></div> <img src="path/to/img/home-recolored.svg"> </div> <!-- CSS styles applied to img element--> <div class="svg-bgcolor circle"> <div class="caption"><strong>to</strong></div> <img src="path/to/img/home-recolored.svg"> </div> ...
...
/* additional styles for img element */
.svg-bgcolor.circle img {
background-color:#d8f2aa;
border-radius:50%;
}
...
Based on above steps there are no limitations to change any colour so you can get results you expect.
BACK