SVG là gì? Có nên sử dụng trong thiết kế không?

SVG là gì? Có nên sử dụng trong thiết kế không?

149
CHIA SẺ

SVG là từ viết tắt của Scalable Vector Graphics. Cơ bản nó được xem là định dạng hình ảnh vector có thể phóng to, thu nhỏ đến một kích thước bất kỳ mà không mất đi sự rõ ràng, dịch sang ngôn ngữ đánh dấu làm cho các trình duyệt để đọc và hiện thị trên màn hình

Ưu nhược điểm của SVG là gì?

Kích thước file nhỏ nén tốt

Hình ảnh SVG, XML, chứa nhiều mảnh lặp đi lặp lại của văn bản, vì vậy chúng rất thích hợp cho các thuật toán nén lossless dữ liệu. khi một hình ảnh SVG được nén bằng thuật toán tiêu chuẩn gzip, nó được gọi là một hình ảnh “svgz” và sử dụng phần mở rộng tên tập tin .svgz tương ứng

Trong rất tuyệt trên màn hình Retina

SVGs nó là các đồ họa vector, có thể được thu nhỏ kích thước bất kỳ mà không mất đi sự rõ ràng (trừ khi file đó rất nhỏ). Nói cách khác thì bạn có thể phóng to một SVG tất các bạn muốn và họ sẽ luôn luôn nhìn sắc nét, vì vậy bạn không cần tạo ra một @ 2x Retina phiên bản cho logo hình ảnh của bạn

>>> Những sai lầm cần tránh khi thiết kế web

Có thể làm ảnh động

Sử dụng thẻ SVG để nhúng các hình ảnh trên trang http://blog.mypage.vn/nhung-sai-lam-can-tranh-khi-thiet-ke-web.htmlweb của chúng tôi cho phép chúng tôi để định dạng một cách dễ dàng thông qua CSS, giống như cách làm với thẻ HTML thông thường. Chúng tôi có thể thay đổi thuộc tính đối tượng như màu nền, độ mờ đục, vị trí, chiều rộng,… Ngoài ra, chúng tôi có thể thêm các hiệu ứng hình ảnh động ấn tượng bằng cách sử dụng kết hợp của các thư viện JS và CSS

Hỗ trợ đầy đủ

Sau nhiều năm không tương thích trình duyệt, SVGs cuối cùng đã đến. Chúng tôi được hỗ trợ trong tất cả các trình duyệt hiện đại bao gồm IE9. Bạn thậm chí có thể sử dụng Fallbacks nếu bạn còn quan tâm đến IE8

Thời gian tải tốt hơn

SVGs tuyệt vời cho thiết kế web, vì nó có độ phân giải vô hạn và kích thước file rất nhỏ. Nó có thể nhúng trực tiếp vào một tài liệu HTML với thẻ SVG, do trình duyệt không cần phải tải về độ họa. Nên sẽ làm cho trang web bạn tải nhanh hơn

Bạn muốn tìm hiểu mọi thông tin từ trang web của chúng tôi, bạn hãy tham các bài viết của chúng tôi!