Đổi màu với file định dạng SVG

Hình ảnh vector mà cụ thể là SVG đang được sử dụng khá phổ biến trên các ứng dụng web và di động bởi các ưu điểm vượt trội như chất lượng hình ảnh tốt hơn, scale khá thoải mái mà không sợ bị vỡ, đặc biệt là tất cả mọi element và thuộc tính của chúng trong file SVG đều có thể animate. Và tất nhiên việc thay đổi màu sắc SVG để phù hợp với giao diện sử dụng cũng là điều bạn cần quan tâm.

Dưới đây là một số cách góp nhặt để thay đổi màu với file địng dạng SVG hy vọng sẽ giúp được bạn.

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

<svg class="star" height="210" width="500">
<polygon points="100,10 40,198 190,78 10,78 160,198"/>
</svg>

Ta sử dụng thuộc tính fill trong CSS để thay đổi màu:

.star {
    fill: yellow;
}

Trường hợp sử dụng thẻ IMG hoặc Background

<img class="star" src="star.svg" />
<div class="star" style="background-image: url(star.svg)"><div>

Ta sử dụng filter trong CSS để xử lý, nhưng trước hết bạn cần chuyển đổi từ màu HEX sang filter bằng công cụ sau:

https://codepen.io/sosuke/pen/Pjoqqp

Ví dụ với mã màu #FFFF00 (yellow) thì output sẽ là: filter: invert(86%) sepia(65%) saturate(883%) hue-rotate(358deg) brightness(101%) contrast(104%);

.star {
    filter: invert(86%) sepia(65%) saturate(883%) hue-rotate(358deg) brightness(101%) contrast(104%);
}

Trường hợp dùng Mask image

Ta sử dụng thuộc tính background-color để thay đổi màu cho SVG

.star {
    mask-image: url('star.svg');
    background-color: yellow;
}