Vfrdtyky

To change the color of any SVG you can directly change the svg code by opening the svg file in any text editor. The code may look like the below code

<?xml version="1.0" encoding="utf-8"?>

    <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

         width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">

    <g>

        <path d="M114.26,436.584L99.023,483h301.953l-15.237-46.416H114.26z M161.629,474.404h-49.592l9.594-29.225h69.223

            C181.113,454.921,171.371,464.663,161.629,474.404z"/>

    /*Some more code goes on*/

    </g>

    </svg>

You can observe that there are some XML tags like path, circle, polygon etc. There you can add your own color with help of style attribute. Look at the below example

<path style="fill:#AB7C94;" d="M114.26,436.584L99.023,483h301.953l-15.237-46.416H114.26z M161.629,474.404h-49.592l9.594-29.225h69.223

                C181.113,454.921,171.371,464.663,161.629,474.404z"/>

Add the style attribute to all the tags so that you can get your SVG of your required color

Steps I follow to change any SVG's color:

• First, add the SVG image using img tags.

 <img src="dotted-arrow.svg" class="filter-green"/>

• Use the following Codepen(Click Here to open codepen) to convert any HEX color code to filter:

For example, output for #00EE00 is

filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(87deg) brightness(119%) contrast(119%);

• Create a new class and add this filter into this class.

.filter-green{

    filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);

}

• Now Add this class to image tag and color of SVG will be changed to HEX we provided.

Added a test page - to color SVG via Filter settings:

E.G
filter: invert(0.5) sepia(1) saturate(5) hue-rotate(175deg)

Upload & Color your SVG - Jsfiddle

Took the idea from: https://blog.union.io/code/2017/08/10/img-svg-fill/

the easiest way would be to create a font out of the SVG using a service like https://icomoon.io/app/#/select or such. upload your SVG, click "generate font", include font files and css into your side and just use and style it like any other text. I always use it like this because it makes styling much easier.

EDIT: As mentioned in the article commented by @CodeMouse92 icon fonts mess up screen readers (and are possibly bad for SEO). So rather stick to the SVGs.

Only SVG with path information. you can't do that to the image.. as the path you can change strock and fill information and you are done. like Illustrator

so: via CSS you can overwrite path fill value

path { fill: orange; }

but if you want more flexible way as you want to change it with a text when having some hovering effect going on.. use

path { fill: currentcolor; }

body {

  background: #ddd;

  text-align: center;

  padding-top: 2em;

}



.parent {

  width: 320px;

  height: 50px;

  display: block;

  transition: all 0.3s;

  cursor: pointer;

  padding: 12px;

  box-sizing: border-box;

}



/***  desired colors for children  ***/

.parent{

  color: #000;

  background: #def;

}

.parent:hover{

  color: #fff;

  background: #85c1fc;

}



.parent span{

  font-size: 18px;

  margin-right: 8px;

  font-weight: bold;

  font-family: 'Helvetica';

  line-height: 26px;

  vertical-align: top;

}

.parent svg{

  max-height: 26px;

  width: auto;

  display: inline;

}



/****  magic trick  *****/

.parent svg path{

  fill: currentcolor;

}

<div class='parent'>

  <span>TEXT WITH SVG</span>

  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128" viewBox="0 0 32 32">

<path d="M30.148 5.588c-2.934-3.42-7.288-5.588-12.148-5.588-8.837 0-16 7.163-16 16s7.163 16 16 16c4.86 0 9.213-2.167 12.148-5.588l-10.148-10.412 10.148-10.412zM22 3.769c1.232 0 2.231 0.999 2.231 2.231s-0.999 2.231-2.231 2.231-2.231-0.999-2.231-2.231c0-1.232 0.999-2.231 2.231-2.231z"></path>

</svg>

</div>

You can change SVG coloring with css if you use some tricks.
I wrote a small script for that.

• go through a list of elements which do have an svg image


• load the svg file as xml


• fetch only svg part


• change color of path


• replace src with the modified svg as inline image

$('img.svg-changeable').each(function () {

  var $e = $(this);

  var imgURL = $e.prop('src');



  $.get(imgURL, function (data) {

    // Get the SVG tag, ignore the rest

    var $svg = $(data).find('svg');



    // change the color

    $svg.find('path').attr('fill', '#000');



    $e.prop('src', "data:image/svg+xml;base64," + window.btoa($svg.prop('outerHTML')));

  });



});

the code above might not be working correctly, I've implemented this for elements with an svg background image which works nearly similar to this.
But anyway you have to modify this script to fit your case. hope it helped.

To simply change the color of the svg :

Go to the svg file and under styles, mention the color in fill.

<style>.cls-1{fill:#FFFFFF;}</style>

Target the path within the svg:

<svg>

   <path>....

</svg>

You can do inline, like:

<path fill="#ccc">

Or

svg{

   path{

        fill: #ccc

If you want to do this to an inline svg that is, for example, a background image in your css:

background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='rgba(31,159,215,1)' viewBox='...'/%3E%3C/svg%3E");

of course, replace the ... with your inline image code