Làm thế nào để đổi màu được file svg ?

1125

Lời nói đầu

Hiện tại đa số các design khi thiết kế sẽ sử dụng các bộ font icon như fontAwesome, Ionicons, simpleicon … đối với các font icon này thay đổi màu sắc rất đơn giản tuy nhiên sẽ có nhiều icon không như ý họ sẽ phải tự vẽ ra để sử dụng hoặc download các icon trên flaticon về. Việc sử dụng icon để tối ưu nhất thì ta thường sử dụng định dạng svg. Hôm nay chúng ta sẽ cùng tìm hiểu cách để thay đổi màu sắc file svg.

Các cách để đổi màu file định dạng SVG

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

Ta sử dụng CSS để thay đổi màu

Trường hợp dùng qua thẻ IMG

có 2 cách:

Cách 1 dùng Jquery

sau đó thay đổi màu bằng css

Cách 2 dùng filter css

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

  Chọn Promise hay Observable khi làm việc với Angular?
  Cách sử dụng Promise để code bất đồng bộ dễ dàng hơn (Phần 2)

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

Sử dụng background-color

Nguồn:

https://stackoverflow.com/questions/22252472/change-svg-color

https://stackoverflow.com/questions/24933430/img-src-svg-changing-the-fill-color

Trên đây là các cách mình tìm hiểu được để thay đổi màu file svg mong sẽ hữu ích cho mọi người.

Techtalk via viblo

  GIF, PNG, JPG và SVG. Dùng cái nào đây?
  Làm thế nào để luôn cập nhật kiến thức trong lĩnh vực Machine Learning?
CHIA SẺ