# Đổ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;
 }
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://learning-space.gitbook.io/front-end/tips-and-tricks/doi-mau-svg.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.