Cho đến nay chúng ta có lẽ đã biết và phân biệt được khá nhiều định dạng ảnh khác nhau như ảnh tĩnh JPG, ảnh nền trong PNG hay ảnh động GIF. Vậy bạn đã từng nghe đến định dạng ảnh SVG chưa? Ảnh SVG là gì và những ưu điểm của nó là gì? Hãy cùng tìm hiểu chi tiết trong bài viết này nhé!
SVG là gì?
Ảnh đuôi SVG là ảnh như thế nào?
SVG viết tắt của từ Scalable Vector Graphics, một loại ngôn ngữ dạng dùng để miêu tả hình ảnh tĩnh, ảnh hoạt hình hoặc ảnh đồ họa vector 2 chiều. Không như các định dạng ảnh khác, định dạng ảnh SVG sử dụng cấu trúc XML để hiển thị, do đó ảnh có đuôi .svg được hiểu ngầm là một tập tin SVG.
Ảnh định dạng SVG xuất hiện nhiều nhất trên website vì chúng được đánh giá là tốt nhất để hiển thị trên các màn hình máy tính và website. Vậy lý do nào đã khiến những nhà phát triển website lựa chọn ảnh SVG?
Lý do chọn ảnh SVG
>>> Xem ngay: Substance là gì? Chức năng của phần mềm Substance
Những lý do nên chọn ảnh SVG là gì?
Chất lượng ảnh tốt
Nếu so với các định dạng ảnh khác như ảnh bitmap JPG thì ảnh đuôi SVG có thể giữ được chất lượng ảnh tốt bởi SVG là ảnh dạng vector, đồng thời dung lượng ảnh cũng rất nhỏ. Chúng được nén bằng thuật toán chuẩn gxip nên thường ngoài hiển thị đuôi là .svg còn có thể hiển thị là .svgz.
Độ tương thích tốt
SVG là dạng ảnh được trình bày dưới cấu trúc XML, điều này đã tạo nên một khả năng tuyệt vời mà không phải ảnh nào cũng làm được: chúng tương thích với mọi loại máy và trình duyệt hiện đại, trong đó bao gồm cả IE9.
Hiển thị màn Retina đẹp mắt
SVGs cũng tương tự như các vector đồ họa khác, có thể phóng to hoặc thu nhỏ tùy ý mà không làm ảnh hưởng đến độ sắc nét của nó. Hiểu một cách đơn giản là bạn có thể phóng to với kích thước bất kỳ để tạo ra một SVG luôn được xem ở chế độ sắc nét nhất.
Tạo Amation đơn giản
Mọi Element và thuộc tính của ảnh định dạng SVG đều có thể tạo chuyển động như hoạt hình được. Tập tin SVG như nguyên liệu cần thiết để animate, bạn sẽ chỉ cần 1 tập tin duy nhất và sử dụng Javascript hoặc CSS để tạo chuyển động cho chúng là được.
Tốc độ load ảnh nhanh hơn hẳn
Đó là ví do vì sao bên cạnh nén ảnh phù hợp các định dạng ảnh khác, ảnh đuôi SVG được ưa thích hơn hẳn. Hơn nữa nó còn có thể nhúng trực tiếp vào HTML nên không cần phải mất công tải đồ họa lên.
Thế nhưng ảnh SVG cũng có những nhược điểm nhất định. Tiêu biểu nhất đó là ảnh đuôi SVG không thể sửa chữa trực tiếp trên mã nguồn mặc dù svg là một tập tin XML. Tuy rằng đây là một lựa chọn trong tương lai mà các website chắc chắn sẽ hướng đến, tuy nhiên cho đến lúc đó những nhà phát triển website cũng như các định dạng ảnh khác cần phải chuyển đổi bằng các công cụ hỗ trợ để tạo ảnh.
Có thể kể đến một số phần mềm thiết kế để hỗ trợ chuyển ảnh như:
- Adobe Illustrator (Premium)
- CorelDraw (Premium)
- Xara (Premium)
- InkScape (FREE)
- Method Draw
- Mondrian
- SVG Edit
Để quảng cáo thêm phần hấp dẫn và thú vì thì bạn cần thiết kế logo, bao bì, nhãn mác và những sản phẩm liên quan thật đẹp mắt. Thông qua khóa học Thiết kế quảng cáo với phần mềm CorelDRAW online, bạn sẽ có những kỹ năng thiết kế liên quan đến nghành quảng cáo - in ấn. Đăng ký ngay để nhận ưu đãi hấp dẫn:
So sánh ảnh đuôi SVG và các loại ảnh khác
>>> Xem ngay: Solidworks là gì? Tính năng nổi bật của Solidworks
| Loại định dạng | Bảng màu | Công dụng | |
| JPG | Nén mất dữ liệu | Hàng triệu màu sắc |
Ảnh tĩnh, nhiếp ảnh |
| PNG-8 | Nén không mất dữ liệu | Tối đa 256 màu |
Tương tự như định dạng GIF, xử lý transparency tốt hơn nhưng không có hình động, tuyệt vời khi sử dụng cho biểu tượng |
| PNG-24 | Nén không mất dữ liệu | Không giới hạn màu sắc |
Tương tự như định dạng PNG-8, xử lý hình ảnh tĩnh và transperency |
| GIF | Nén không mất dữ liệu | Tối đa 256 màu |
Hình động đơn giản, đồ họa với màu trơn, đồ họa không có gradient |
| SVG | Vector/ Nén không mất dữ liệu | Không giới hạn màu sắc |
Đồ họa/Logo cho web, màn hình Retina/độ phân giải dpi cao |
Để so sánh rõ ràng hơn bạn có thể giữa ảnh bitmap và ảnh SVG như hình dưới:
so sánh giữa ảnh Bitmap và ảnh SVG
Các thành phần trong một tập tin đuôi SVG là gì?
- là thẻ bao ngoài, định nghĩa đó là phần tử SVG.
- tạo một đường thẳng.
- tạo hình vuông, hình chữ nhật.
- tạo hình đa giác từ 3 cạnh trở lên
- tạo hình ảnh bằng các điểm và đường thẳng không giới hạn giữa chúng để tạo ra hình bất kỳ.
- Định nghĩa những tài nguyên có thể sử dụng lại. Không có gì nằm trong phần được hiển thị.
- Gộp nhom nhiều hình dạng và đặt các nhóm đó trong cho phép chúng được sử dụng lại.
- sử dụng các tài nguyên được định nghĩa bên trong và hiển thị trong SVG.
Như vậy thông qua bài viết này chúng tôi đã giới thiệu tới bạn định dạng ảnh SVG là gì cũng như những lý do bạn nên lựa chọn ảnh SVG cho website của bạn. Hi vọng những thông tin này sẽ hữu ích cho bạn trong công việc của mình.
Ngoài ra để nắm rõ hơn những kiến thức về website và biết cách thiết kế website chuẩn từ cơ bản nhất bạn hoàn toàn có thể tham khảo những khóa học thiết kế web hấp dẫn, chi tiết và đầy đủ nhất tại Unica.vn.
