Contacts

welcome@t-art.vn
+84 8.3881.2882
+84 963.893.933

Office

19/2/208 Tran Cung Str.,
Bac Tu Liem District
Hanoi, Vietnam

Want to Work with Me?

Get in Touch!

20 LÝ DO NÊN DÙNG SVG ANIMATION

Bài viết được dịch từ Ebook “20 Reasons to Use SVG Animations” phát hành bởi SVGATOR.COM

Chào mừng đến với thế giới của SVG animation

Chúng tôi phát triển eBook này dành cho những nhà thiết kế mà trong tâm trí họ muốn tạo các hoạt ảnh SVG hấp dẫn nhưng không chắc liệu nó có xứng đáng hay không.

Nhiệm vụ của chúng tôi là khuyến khích sử dụng rộng rãi SVG, vì nó có rất nhiều lợi thế. Hãy để chúng tôi hướng dẫn bạn thông qua 20 điều quan trọng nhất, lý do tại sao SVG là một lựa chọn hoàn hảo dành cho bạn

1. Xem tốt trên tất cả các loại màn hình

Bạn mong muốn gì hơn trong thế giới thiết kế web hơn là hình ảnh độ có thể mở rộng vô hạn? Bạn đang dành hàng giờ để làm việc hình minh họa, thêm màu sắc và xử lý các chuyển động mượt mà, vì vậy bạn mong muốn có được một kết quả chất lượng cao – và đó là những gì SVG có thể làm cho bạn.

Thực tế là việc thiết kế Website responsive không còn là tùy chọn nữa, tin vui là Vector là bản chất của SVG, animations của bạn sẽ không phụ thuộc vào độ phân giải nữa, vì vậy chúng trông luôn sắc nét và hoàn hảo đến tức pixel, ngay cả trên những màn hình Retina vậy.

Lúc đầu bạn có thể đã nghĩ đến việc sử dụng định dạng GIF hoặc thêm JPG hay PNG vào dự án của bạn. Các định dạng kiểu raster này là hoàn hảo cho những hình ảnh và đồ họa chi tiết, nhưng chúng không thích hợp cho các Logo, hình minh họa và các biểu tượng có thể làm động.

Với SVG, bạn có thể kết hợp các path, shapes và fill để tạo ra tất cả các loại hoạt họa, và bạn có thể chắc chắn rằng chúng giữ nguyên được tối đa chất lượng bất kể kích thước màn hình, mức độ zoom hay độ phân giải.

Có khả năng mở rộng vô hạn, bạn có thể có một SVG duy nhất, ngay cả khi bạn muốn sử dụng cùng một hình minh họa ở các kích thước khác nhau cho tất cả các loại thiết bị.

Bạn không cần lo lắng về các hoạt ảnh của bạn sẽ khác nhau trên các thiết bị và thay vào đó, bạn hãy tập trung vào việc tạo ra các hình hoạt họa tuyệt với để tăng sức mạnh cho trang Web của bạn.

2. Có dung lượng file nhỏ

Bạn có công nhận rằng khi sử dụng hình minh họa cho Website, thì kích thước file thực sự quan trọng. Sau khi tạo và xuất file, một trong những điều quan trọng nhất là kích thước file ảnh của bạn. Bạn có biết việc sử dụng định dạng ảnh SVG thay thế cho JPG hoặc PNG có thể giúp bạn giảm kích thước tệp lên đến 200% trong khi vẫn duy trì được chất lượng cao nhất và khả năng scale không giới hạn?

Thử nghĩ một chút: Kích thước có vẻ như là một vấn đề không đáng kể khi xử lý các Icon png nhỏ hay logo, nhưng ngay cả một tỷ lệ phần trăm nhỏ hơn của việc giảm kích thước tệp cũng có thể tạo ra một sự khác biệt lớn về tổng thể. Như việc SVG Animation có thể scale, responsive và linh hoạt, không lý do gì mà bạn không sử dụng chúng trên website, blog post và các nền tảng kỹ thuật số khác.

Chúng tôi sẽ không đề cập sâu vào chi tiết. Tất cả những gì bạn cần biết chính là SVG đặc biệt trong số các định dạng vector khác bởi vì chúng dựa trên XML – ngôn ngữ đánh dấu, mô tả đồ họa vector 2 chiều. Điều này có nghĩa là tệp sẽ sử dụng cách kết hợp các phần tử và thuộc tính để chỉ định cách các phần tử sẽ được hiển thị. Về cơ bản thì nó chính là một dòng code, giống như HTML vậy, và đó là lý do tại sao nó lại có kích thước nhỏ gọn, không giống như các mảng pixel từ ảnh raster.

3. Giảm thời gian tải trang

Bạn đã bao giờ ở trong tình huống mà các artwork của bạn rất tuyệt vời, nhưng bạn không thể sử dụng chúng vì kích thước file lớn và làm tăng thời giang tải trang? 

Đây chính là vị cứu tinh của bạn – đoán xem – chính là SVG. Cách dễ nhất để cải thiện thời gian tải trang là thay thế hình ảnh bằng file SVG.

Ý tưởng sử dụng ảnh động có thể khiến một số người e ngại, nhưng đã qua lâu rồi cái thời mà các hình ảnh động bắt mắt tương đương với thời giản tải trang chậm hơn. Bằng cách sử dụng hoạt ảnh SVG, bạn có thể mang lại lợi thế cạnh tranh cho tác phẩm của mình mà vẫn có một trang web tải nhanh.

Bạn hỏi làm như thế nào? Các tệp SVG có thể được nhúng inline vào file HTML của bạn, giảm số lượng yêu cầu đến máy chủ và tăng tốc trang web của bạn. Giả sử rằng bạn có 10 biểu tượng PNG trên website của mình, dẫn đến có 10 yêu cầu http. Nếu bạn có 10 SVG inline thay vào đó, điều đó có nghĩa chỉ có một yêu cầu. Nghe ổn không 😉

4. SVG tốt hơn GIF

Ảnh động SVG chiếm ưu thế hơn so với ảnh GIF trên nhiều phương diện. Bên cạnh việc có thể Scale không giới hạn, không phụ thuộc vào độ phân giải, kích thước tệp nhỏ, SVG không có bất cứ vấn đề gì về giới hạn màu sắc hoặc độ trong suốt. 

Bây giờ chúng ta hãy xem vấn đề với GIF là gì?

GIF đã tồn tại trong nhiều thập kỷ, và ban đầu chỉ danh cho những hình ảnh nhỏ với các vòng lặp ngắn. Khi thiếu các lựa chọn thay thế tốt hơn, GIF đã phục vụ tốt vào thời điểm đó, nhưng ngày ngay thì chúng đã trở nên khác lỗi thời và không hiệu quả, mặc dù chúng rất phổ biến.

Bạn có biết rằng SVG hỗ trợ tối thiểu 16,7 triệu màu, trong khi GIF chỉ sử dụng 256? Hạn chế này có thể làm cho ảnh GIF nhìn như kiểu là pixelated và có chất lượng thấp, đặc biết nếu có gradients, curved edges hay ảnh có nhiều màu sắc khác nhau.

Một lý do khiến bể kèo với GIF nữa là hỗ trợ transparency yếu. Nếu sử dụng với một nền trong suốt, ảnh GIF có thể xuất hiện hiệu ứng hào quang ở xung quanh các cạnh của chúng. Có thể bạn đã gặp những viền xám thậm chí còn nổi bần bật hơn khi có độ tương phản cao giữa màu nền và hình ảnh.

Điều này là do GIF sử dụng transparency nhị phân: Một pixel có thể trong suốt hoặc hoàn toàn mờ đục, không có ở giữa. May mắn thay là hình ảnh SVG có thể sử dụng được trên bất kỳ nền nào mà không gặp vấn đề gì? + 1 điểm cho SVG 😀

5. Có thể chỉnh sửa
bằng nhiều cách khác nhau

Như đã đề cập ở trên, SVG được làm từ code “thuần túy”, và ngôn ngữ đánh dấu của nó khá giống HTML. Nó hoàn toàn có thể chỉnh sửa và viết kịch bản thông qua CSS hay Javascript, giúp bạn có thể kiểm soát được hình ảnh của mình dưới dạng text đơn giản hay các công cụ lập trình.

Nếu bạn là một pro về các công cụ thiết kế đồ họa nhưng không quá quen thuộc với các dòng code, oke thôi. Có những ứng dụng có thể giúp bạn loại bỏ các rào cản mã và tạo các hoạt ảnh SVG mà không cần tới kỹ năng lập trình nào. 

Tuy nhiên, nếu cần thiết thì các Web dev có thể dễ dạng quản lý dự án của bạn bằng CSS. Ví dụ như có thể thay đổi màu sắc bằng cách thêm các class CSS hoặc thay đổi Attributes của SVG để hiển thị động.

Nghĩ như thế này: Bạn tạo ra một Vector tuyệt đẹp bằng Illustrator, bạn chọt Export ra file SVG, và điều kỳ diệu xảy ra. Bạn nhận được một file duy nhất mà có thể được bạn hoặc các lập trình viên có thể biến nó thành một hình ảnh động đáng yêu và tăng được giá trị cho Website.

Nói chung, nếu bạn là 1 người thiết kế Website, thì đây là thời điểm tuyệt vời để kết bạn với SVG.