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

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

Mục lục

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ì?

svg là gì 1

Ả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

svg là gì 2

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:

svg là gì 3

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. 

Xem chi tiết toàn bộ khóa học tại đây

Xem ngay: Học thiết kế web từ cơ bản đến nâng cao

Đánh giá :

Tags: Thiết kế