How to change color of SVG image

Question

I would like to have the same svg (transfer.svg) but different color using only css and it must be compatible IE 11, Edge, FF and chrome.

img {
  height: 50px; 
}

<img src="https://sendeyo.com/up/d/615ba77e71" alt="">

Thank you in advance.

Also kind of related: https://stackoverflow.com/q/12583879/1169798 — Sirko, Jun 15 '18 at 07:03

score 3 · Answer 1 · answered Jun 15 '18 at 07:18

3

You can't change the color in a svg embedded in a image. To be able to interact with the svg content, you'll have to include it as inline html instead of through a img tag. Like

<body>
  <svg><!-- your svg content here --></svg>
</body>

answered Jun 15 '18 at 07:18

ylerjen

4,109
2
25
43

Simple enough answer. Good job! – m4n0 Jun 15 '18 at 08:36

score 0 · Answer 2 · edited Jun 15 '18 at 08:34

Refer this link : http://jsfiddle.net/wuSF7/462/

Its already did

$(function() {
  jQuery('img.svg').each(function() {
    var $img = jQuery(this);
    var imgID = $img.attr('id');
    var imgClass = $img.attr('class');
    var imgURL = $img.attr('src');

    jQuery.get(imgURL, function(data) {
      // Get the SVG tag, ignore the rest
      var $svg = jQuery(data).find('svg');

      // Add replaced image's ID to the new SVG
      if (typeof imgID !== 'undefined') {
        $svg = $svg.attr('id', imgID);
      }
      // Add replaced image's classes to the new SVG
      if (typeof imgClass !== 'undefined') {
        $svg = $svg.attr('class', imgClass + ' replaced-svg');
      }

      // Remove any invalid XML tags as per http://validator.w3.org
      $svg = $svg.removeAttr('xmlns:a');

      // Check if the viewport is set, else we gonna set it if we can.
      if (!$svg.attr('viewBox') && $svg.attr('height') && $svg.attr('width')) {
        $svg.attr('viewBox', '0 0 ' + $svg.attr('height') + ' ' + $svg.attr('width'))
      }

      // Replace image with new SVG
      $img.replaceWith($svg);

    }, 'xml');

  });
});

svg {
  width: 350px;
  height: 350px;
}

svg path {
  fill: #000 !important;
}

<img src="https://upload.wikimedia.org/wikipedia/commons/f/f8/Windows_logo_-_2012_%28red%29.svg" alt="Microsoft" width="350" />
<img class="svg" src="https://upload.wikimedia.org/wikipedia/commons/f/f8/Windows_logo_-_2012_%28red%29.svg" alt="Microsoft" width="350" height="350">

How to change color of SVG image

2 Answers2