Blog Thiết kế & Xây dựng

SVG là gì? Lý do lựa chọn ảnh SVG cho website là gì?

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

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.