Đổi màu SVG

1. Trường hợp dùng trực tiếp

<div class="circle">
  <svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="green" class="circle" stroke-width="4" fill="yellow" />
  </svg>
</div>

Sử dụng CSS để đổi màu

.circle {
    fill: red;
}

Ngoài đổi màu fill ta có thể xóa các giá trị thuộc tính stroke, stroke-width, fill (để tránh bị ghi đè) để CSS lại.

2. Trường hợp dùng qua thẻ img

<img class="circle" src="circle.svg" />

Cách 1: Dùng Jquery

/*
 * Replace all SVG images with inline SVG
 */
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, if the viewport is not set the SVG wont't scale.
        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');

});

sau đó đổi màu bằng CSS

.circle path {
  fill: #000;
}
//hoặc
.circle path {
  background-color: #000;
}

Cách 2: Dùng filter CSS

Phải tinh chỉnh nhiều hơn mới được màu như ý

.circle {
filter: invert(1);
// filter: invert(1) sepia(1) saturate(5) hue-rotate(175deg);

3. Trường hợp dùng mask-image

Sử dụng background-color

.icon-facebook {
   mask-image: url('circle.svg');
   display: block;
   width: 20px;
   height: 20px;
   background-color: blue;
 }