- VIE
- VIE
- ENG
Việc hiển thị hình ảnh trên nhiều màn hình có kích thước và độ phân giải khác nhau là một vấn đề lớn cần xử lý, vì khi dùng CSS thông thường rất tốn thời gian và công sức. Nên việc sử dụng thủ thuật SVG hay Ảnh SVG đã cho thấy hiệu quả cao khi tiết kiệm công sức, tăng tốc độ load trang, giảm dung lượng website.
Bởi vậy hiện nay, Ảnh SVG đang rất được ưa chuộng bởi những tiện ích mà nó mang lại. Vậy Ảnh SVG là gì? Hãy cùng tìm hiểu ngay nhé!
Ảnh SVG là gì? Tại sao nên dùng ảnh SVG?
Contents
Ảnh SVG (viết tắt của Scalable Vector Graphics) là định dạng ảnh vector dùng để thể hiện các đối tượng đồ họa hai chiều và có hỗ trợ tương tác từ phía người dùng cũng như ảnh động. 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.
Ảnh SVG thuộc tiêu chuẩn mở và được quản lý bởi tổ chức World Wide Web Consortium, một tổ chức quản lý nhiều chuẩn khác như HTML, XHTML… Các tập tin có đuôi “.svg” được mặc định hiểu là tập tin SVG. Ảnh SVG có thể phóng to thu nhỏ mọi kích cỡ mà không giảm chất lượng hình ảnh. Chính vì thế, nó được dùng nhiều trong các bản đồ, sơ đồ.
Điều gì làm cho đồ họa vector trở nên hấp dẫn đến mức rất nhiều công ty lớn trong ngành công nghệ cũng như hãng phần mềm thiết kế nhảy vào cùng phát triển? Bạn có thể tưởng tượng rằng trong đồ họa vector, mọi đường thẳng, đường cong, hình tròn, hình chữ nhật… đều được vẽ ra đều dựa vào các điểm tọa độ.
Các điểm này sẽ được nối với nhau trong không gian hai chiều để tạo nên các hình ảnh thực sự. Bởi vì tọa độ này chỉ mang tính tương đối so với hệ trục tại thời điểm vẽ nên 1 đơn vị trong đồ họa vector có thể là 10 pixel, 20 pixel hay 100 pixel.
Ả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.
Ảnh SVG giống với tất cả các đồ họa vector, có thể được thu nhỏ đến kích thước bất kỳ mà không mất đi sự rõ ràng (trừ rất nhỏ). Nói cách khác, bạn có thể phóng to để một ảnh SVG tất cả 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 phải tạo ra một phiên bản 2x Retina phiên bản cho logo hình ảnh của bạn.
Ưu điểm của ảnh SVG
Sử dụng thẻ SVG để nhúng các hình ảnh trên trang web cho phép chúng ta đị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. Ta 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, ta cũng có thể thêm các hiệu ứng hình ảnh động ấn tượng bằng cách sử dụng sự kết hợp của các thư viện JS và CSS.
Sau nhiều năm không tương thích trình duyệt, ảnh SVG cuối cùng đã có thể hỗ trợ cách đầy đủ hơn. Chúng đượ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 vẫn còn quan tâm đến IE8.
Ảnh SVG 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ể được 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. Điều này có nghĩa rằng trang web của bạn sẽ được tải nhanh hơn!
Nhược điểm của ảnh SVG
Tất nhiên không thể dùng Ảnh SVG trong 100% mọi trường hợp. Nhược điểm của ảnh SVG là giới hạn về độ chi tiết và màu sắc, tất nhiên chúng ta có thể sử dụng SVG để vẽ một hình ảnh phức tạp, hoặc thực như ảnh chụp, nhưng nếu làm vậy thì performance sẽ rất tệ.
Nhưng với xu hướng hiện nay, phong cách thiết kế phẳng đang là mốt, những website với giao diện đơn giản, sử dụng hình ảnh cũng đơn giản, ít chi tiết thì ảnh SVG hoàn toàn có thể phát huy được thế mạnh của mình.
Từ những gì được viết ở trên cho thấy việc dùng hình ảnh dạng vector, mà cụ thể là ảnh SVG để tiết kiệm công sức, tăng tốc độ load trang, giảm dung lượng website đang ngày càng được ưa chuộng. Hi vọng rằng qua bài viết này, các bạn có thể biết thêm một thủ thuật hiển thị hình ảnh nhanh gọn mà mang lại hiệu quả cao nhất!
| Kho ảnh SVG | Thẻ <SVG trong HTML |
| SVG file | SVG icon free |
| Tạo ảnh SVG | SVG w3school |
| Tải ảnh SVG | Svgrepo |
Hướng dẫn 3 cách sử dụng imagify tối ưu hình ảnh website
5 cách tối ưu hóa hình ảnh cho WordPress
