Hướng dẫn svg html là gì
Show
Đã đăng vào thg 4 19, 2019 9:42 SA 1 phút đọc Lời nói đầuCác tính năng ưu việt của svg đã có quá nhiều các bài viết nói về nó, trong bài viết này mình sẽ chỉ giới thiệu về cách sử dụng SVG trong HTML/CSS. 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 Ví dụ một file SVG để vẽ hình tròn: :
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.
Dùng thông qua thẻ IMGHoặc bạn có thể dùng qua thẻ IMG như một hình ảnh bình thường.
Dùng trong CSS thế nào?
Sử dụng Background Image
Sử dụng Mask Imagevới width, height và background color tương ứng
NguồnBài viết phía trên được tham khảo từ Techblog.vn :https://techblog.vn/su-dung-file-svg-cho-website và một số nguồn khác. Phần tới mình sẽ cùng tìm hiểu một số hiệu ứng khá hay khi sử dụng SVG All rights reserved Hướng dẫn bỏ túi để viết SVG ------------------------------------------------------ By Joni Tryhall -----------------------------------------------------Tổng quan
Trước khi bắt đầu
Sử dụng SVG
|