Mục lục

san sẻ

cho tới nay chúng ta có lẽ đã biết và phân biệt được khá nhiều định dạng ảnh không giống 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 vẫn chưa? Ảnh SVG là gì và những điểm mạnh 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 ra sao?

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 để mô tả hình ảnh tĩnh, ảnh phim hoạt hình hoặc ảnh đồ họa vector 2D. Không như những đị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 web site vì chúng được đánh giá là tốt nhất để hiển thị trên những màn hình máy tính và web site. Vậy lý do nào đã khiến những nhà phát triển web site lựa chọn ảnh SVG?

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

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 những định dạng ảnh khác như ảnh bitmap JPG thì ảnh đuôi SVG hoàn toàn 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 hoàn toàn có thể hiển thị là .svgz.

– Độ tương thích tốt: SVG là dạng ảnh được trình diễn dưới cấu trúc XML, điều này đã tạo thành 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 số đó gồm có cả IE9.

– Tạo Amation đơn giản: Mọi Element và thuộc tính của ảnh định dạng SVG đều hoàn toàn có thể tạo chuyển động như phim hoạt hình được. Tập tin SVG như nguyên liệu rất cần thiết để animate, những bạn sẽ chỉ việc 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 tương thích những đị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 hoàn toàn có thể  nhúng trực tiếp vào HTML nên không cần thiết phải mất công tải đồ họa lên.

Thế nhưng ảnh SVG cũng đều 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à những web site chắc chắn sẽ nhắm đến, tuy nhiên cho tới lúc đó những nhà phát triển web site cũng như những định dạng ảnh khác cần phải chuyển đổi bằng những công cụ hỗ trợ để tạo ảnh.  

hoàn toàn có thể nói tới một số phần mềm thiết kế để hỗ trợ chuyển ảnh như:

 – Adobe Illustrator (Premium)

 – CorelDraw (Premium)

 – Xara (Premium)

 – InkScape (miễn phí)

 – Method Draw

 – Mondrian

 – SVG Edit

 – … 

So sánh ảnh đuôi SVG và những 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ư định dạng GIF, xử lý transparency tốt hơn nhưng không tồn tại hình động, tuyệt vời khi sử dụng cho hình 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ư đị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 tồn tại 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ũng hoàn toà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

những 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 những đ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 hoàn toàn có thể sử dụng lại. không tồn tại gì nằm trong phần  được hiển thị.

 -  Gộp nhom nhiều hình dạng và đặt những nhóm đó trong  được cho phép chúng được sử dụng lại.

 -  sử dụng những tài nguyên được định nghĩa bên trong  và hiển thị trong SVG.

Như vậy trải 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 web site của bạn. hy vọng những thông tin này sẽ hữu ích cho bạn trong công việc của tớ.

Ngoài ra để nắm vững hơn những kiến thức và kỹ năng về web site và biết cách thiết kế web site chuẩn từ cơ bản nhất bạn hoàn toàn hoàn toàn có thể xem thêm 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 số đó 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 viên 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 web site bán hàng từ những bước đơn giản nhất cho tới những kiến thức và kỹ năng 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 những bạn sẽ hoàn toàn có thể có được tư duy phân tích hệ thống và tư duy thiết kế web site chuyên nghiệp, giúp bạn tự mình lên hệ thống, điều phối thiết kế và xây dựng web site chuẩn SEO theo ý thích tương thích với mục đích thuở đầu của tớ. 

>> 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 web site 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

Đánh giá :

Tags:
Thiết kế Web

Có thể bạn quan tâm:

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *