> For the complete documentation index, see [llms.txt](https://learning-space.gitbook.io/front-end/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://learning-space.gitbook.io/front-end/tips-and-tricks/doi-mau-svg.md).

# Đổi màu SVG

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

```html
<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

```css
.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

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

#### Cách 1: Dùng Jquery

```xquery
/*
 * 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

```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

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