# **Sử dụng SVG trong HTML CSS thế nào?** ## **SVG là gì?** ***SVG...

Tắt Quảng Cáo [X]

Đăng Nhập để ẩn Tất Cả Quảng Cáo

# **Sử dụng SVG trong HTML CSS thế nào?**
## **SVG là gì?**

***SVG (Scalable Vector Graphics)***, là một định dạng hình ảnh (tương tự như JPG, PNG,... mà chúng ta vẫn thường dùng) sử dụng cấu trúc XML để hiển thị hình ảnh dưới dạng vector. Vì là hình ảnh dạng vector nên chúng ta có thể hiển thị, co giãn (scale) thoải mái mà không làm giảm chất lượng hình ảnh. Một ưu điểm của SVG là tất cả mọi element và attribute của các element đó đều có thể animate
## **Dùng trong HTML thế nào?**
## **DÙNG TRỰC TIẾP:**

Bạn có thể chèn trực tiếp nội dung file SVG vào trang HTML, cho vào 1 cái thẻ DIV chẳng hạn.

<div class="circle">

<svg width="100" height="100">

<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />

</svg>

</div>
## **DÙNG THÔNG QUA THẺ IMG**

<img src="circle.svg" />
## **Dùng trong CSS thế nào?**

<div class="icon-facebook"></div>
## **SỬ DỤNG BACKGROUND IMAGE**

.icon-facebook {

background-image: url("facebook.svg");

...

}
## **SỬ DỤNG MASK IMAGE**

.icon-facebook {

mask-image: url('facebook.svg');

display: block;

width: 20px;

height: 20px;

background-color: blue;

}

Nguồn: viblo.asia