Top
Lý do nên sử dụng định dạng SVG - ART GRAPHIC - Thiết kế đồ họa chuyên nghiệp, In ấn, Website, Chụp ảnh, Làm Video, Dựng Clip
fade
5688
post-template-default,single,single-post,postid-5688,single-format-standard,eltd-core-1.0,flow-ver-1.0,,eltd-smooth-page-transitions,ajax,eltd-blog-installed,page-template-blog-standard,eltd-header-standard,eltd-fixed-on-scroll,eltd-default-mobile-header,eltd-sticky-up-mobile-header,eltd-dropdown-default,wpb-js-composer js-comp-ver-4.9.2,vc_responsive

Lý do nên sử dụng định dạng SVG

Lý do nên sử dụng định dạng SVG - Art Graphic Stock

Lý do nên sử dụng định dạng SVG

Scalable Vector Graphics hiện được hỗ trợ trên tất cả các trình duyệt (máy tính để bàn và thiết bị di động). Dưới đây là tám lý do tại sao bạn nên sử dụng SVG như là một phần của quy trình làm việc của bạn và cho thiết kế web responsive.

01. Vectors are crisp

SVG sử dụng hệ tọa độ âm mưu tọa độ để vẽ các điểm và kết nối chúng để vẽ các đường thẳng, hình dạng hoặc đường dẫn. Đồ họa vector được vẽ bằng cách sử dụng toán học, có nghĩa là chúng sắc nét và mượt, không pixelating như các định dạng hình ảnh khác, khiến chúng tuyệt vời cho logo, biểu tượng và hình minh họa.
SVG cũng có một số tính năng khác – với các bộ lọc, mẫu, gradient và mặt nạ và thuộc tính ‘viewBox’ để tạo khung cảnh – và tất cả đều có thể hoạt hình hoá. SVG là cực kỳ linh hoạt và được hỗ trợ bởi tất cả các trình duyệt kể từ IE9.

02. It’s got a navigable DOM

SVG bên trong trình duyệt có DOM của riêng nó. SVG được xử lý như một tài liệu riêng biệt bởi trình duyệt và sau đó được định vị bên trong DOM thông thường của trang. Điều này rất quan trọng đối với thuộc tính ‘viewBox’ vì chúng ta có thể vẽ hình ảnh của mình trên canvas có kích thước bất kỳ, nhưng sau đó hiển thị nó trong trình duyệt ở trình duyệt khác, tất cả đều không cập nhật thuộc tính bên trong SVG. DOM riêng biệt, điều hướng này cũng là cách chúng ta tương tác với các phần tử bên trong SVG bằng cách sử dụng CSS và Javascript.

03. Dễ tiếp cận

SVG có thẻ được tạo riêng cho khả năng truy cập, thẻ chính là thẻ <title>. Thẻ tiêu đề cùng với thẻ <desc> sẽ được sử dụng để cung cấp nội dung dự phòng cho trình đọc màn hình.

Nội dung của các thẻ này sẽ không được trình duyệt hiển thị nhưng chúng sẽ được hiển thị với API trợ năng của trình duyệt. Bạn có thể (và nên) cũng sử dụng các thuộc tính ARIA chính xác nếu có, ví dụ nếu bạn đang ẩn phần tử SVG.

04. Độ phân giải độc lập responsive

Do tính chất vector của SVG, hình ảnh là độ phân giải độc lập. Hình ảnh trông sắc nét trên bất kỳ màn hình nào từ màn hình hiển thị mật độ điểm ảnh ~ 285 ppi đẹp được tìm thấy trên điện thoại thông minh mới tới ~ 85 ppi của màn hình tiêu chuẩn.
Sử dụng SVG chúng ta có thể ngừng tạo các ảnh @ 2x.png (trừ khi bạn cần hỗ trợ IE8) và tạo một tệp cho tất cả các biểu tượng của chúng tôi (thêm về điều này sau). Hình ảnh SVG cũng có thể được thu nhỏ theo cùng cách mà chúng tôi mở rộng tất cả các yếu tố khác trong thiết kế đáp ứng.

05. Có thể hoạt hình hoá

Các yếu tố bên trong SVG có thể được hoạt hình hoá để tạo ra một số trải nghiệm tương tác thực sự tuyệt vời hoặc hoạt ảnh có thể được sử dụng để thêm các chạm nhỏ vào giao diện, hình ảnh hoặc biểu tượng.
Có thể tạo animation bằng cách sử dụng CSS, API hoạt ảnh web trong Javascript hoặc sử dụng thẻ ‘animate> của SVG. Hoạt hình SVG là một điểm thú vị trong phát triển.

06. Có thể style được

Sử dụng tên class hoặc ID, bạn có thể tạo kiểu cho các phần tử bên trong SVG chỉ bằng các thuộc tính hơi khác với những thuộc tính mà chúng ta thường sử dụng; thay vì màu sắc chúng tôi sử dụng điền, và thay vì border, chúng tôi sử dụng stroke. Có một số giới hạn để tạo kiểu SVG và chúng xuất phát từ cách bạn sử dụng SVG trong trang. Nếu bạn sử dụng SVG làm thẻ hình ảnh, bạn sẽ không thể tạo kiểu cho các phần tử bên trong trong Internet Explorer, tuy nhiên, một polyfill – svg4everybody – sẽ khắc phục sự cố này.

07. Có thể tương tác được

Sử dụng Javascript, chúng ta có thể tương tác với các phần tử bên trong SVG, nhờ vào DOM điều hướng. Điều này cho phép chúng ta tạo ra các phần tử tương tác bằng cách sử dụng SVG giống như cách chúng ta làm với HTML và CSS.

Chúng tôi cũng có thể áp dụng hình động thông qua Javascript bằng cách sử dụng API hoạt hình web mới cho phép cả các tương tác đơn giản và phức tạp và hoạt ảnh được lập trình. Ngoài ra còn có một số thư viện Javascript mà chúng tôi có thể sử dụng, được tạo ra để tăng tốc độ luồng công việc SVG.

08. Kích thước file nhỏ

Do tính chất vector của SVG (là một hình ảnh được vẽ từ một tập hợp các tọa độ) kích thước tệp của chúng khi tối ưu hóa là nhỏ khi so sánh với hầu hết các loại tệp hình ảnh khác.

Có một số cách để tối ưu hóa SVG từ các công cụ dòng lệnh để loại bỏ các điểm và nhóm theo cách thủ công nhưng SVGOMG có giao diện đồ họa và nhiều tùy chọn để tinh chỉnh – hiển thị trực quan các thay đổi được thực hiện trong quá trình tối ưu hóa.

Vì SVG có thể đáp ứng, hoạt hình và phức tạp, không có lý do gì bạn không nên sử dụng chúng cho hình ảnh hoặc hình ảnh anh hùng lớn trên một bài đăng blog hoặc phương tiện trực tuyến khác.