SVG là gì? Vì sao nên lựa chọn ảnh SVG cho website?

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?

Khái niệm SVG là gì? Đây là 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?

Nên chọn ảnh SVG vì:

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ẩ 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.

– 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      

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. Trong đó chúng tôi muốn giới thiệu bạn một khóa học thiết kế web được đánh giá rất cao, đó là “Học thiết kế web từ cơ bản đến nâng cao” của giảng viên – chuyên gia Vũ Ngọc Đăng.

Tìm hiểu khoá học “Học thiết kế web từ cơ bản đến nâng cao”

Khóa học thiết kế web “Học thiết kế web từ cơ bản đến nâng cao”

Khóa học thiết kế web “Học thiết kế web từ cơ bản đến nâng cao” tại Unica.vn là một khóa học hướng dẫn chi tiết bạn tự thiết kế được website bán hàng từ những bước đơn giản nhất cho đến những kiến thức nâng cao do giảng viên Vũ Ngọc Đăng trực tiếp hướng dẫn. 

Tham gia khóa học này bạn sẽ có thể có được tư duy phân tích hệ thống và tư duy thiết kế website chuyên nghiệp, giúp bạn tự mình lên hệ thống, điều hướng thiết kế và xây dựng website chuẩn SEO theo ý thích phù hợp với mục đích ban đầu của mình. 

>> Chinh phục khóa học ngay

Bạn đọc cũng quan tâm những bài viết hay khác:

– Thế nào là một website chuẩn SEO?

– Chi tiết 3 định dạng file thiết kế phổ biến nhất 2020

– Responsive Web Design: Những “nguyên tắc vàng” cần ghi chú ngay

Tags:
Thiết kế Web