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 add/improve opacity etc. SVG as XML declared file can be modified in ordinary text/code editor such as Notepad++.

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: #FFFFFF;}
    ]]></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>
  • from
    to

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="files/imgs/hints/home-recolored.svg">
    </div>
    
    <!-- CSS styles applied to img element-->
    <div class="svg-bgcolor circle">
    	<div class="caption"><strong>to</strong></div>
    	<img src="files/imgs/hints/home-recolored.svg">
    </div>
    
    ...
  • ...
    
    /* additional styles for img element */
    .svg-bgcolor.circle img {
    	padding:17px 20px 23px;
        background-color:#fff;
        border-radius:50%;
    }
    
    ...
  • from
    to

Based on above steps there are no limitations to change any colour so you can get results you expect.

Go back