MinhTrang
CTV Nữ
Scalable Vector Graphics (SVGs) là các loại hình ảnh được phổ biến trên tất cả các trình duyệt máy tính để bàn và di động. Lợi ích của việc sử dụng chúng cho thiết kế web và ứng dụng là rất lớn - chúng ta hãy nói cho bạn thông qua sáu lý do lớn nhất.
1. Giải pháp độc lập và đáp ứng
Hình ảnh có thể được thu nhỏ theo cùng một cách mà chúng tôi đã quy mô tất cả các yếu tố khác trong thiết kế web phản hồi. Do tính chất vector của SVG, hình ảnh được 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 hiển thị nào, từ những màn hình mật độ đẹp 285 ppi hiển thị trên điện thoại thông minh mới, đến màn hình chuẩn ~ 85 ppi.
Sử dụng SVG, chúng tôi có thể ngừng tạo '@ 2x. png '(trừ khi bạn cần hỗ trợ IE8) và tạo một tập tin cho tất cả các biểu tượng của chúng tôi. Hình ảnh SVG cũng có thể được thu nhỏ theo cùng một cách mà chúng tôi đã quy mô tất cả các yếu tố khác trong thiết kế đáp ứng.
2. DOM điều hướng
SVG bên trong trình duyệt có DOM riêng. SVG được xem như một tài liệu riêng biệt bởi trình duyệt và sau đó được đặt bên trong DOM bình 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 chúng ta trên bất cứ kích thước nào, nhưng sau đó hiển thị nó trong trình duyệt khác, tất cả đều không cập nhật các thuộc tính bên trong SVG. DOM điều hướng riêng biệt này cũng có thể tương tác với các phần tử bên trong SVG bằng CSS và JavaScript.
3. Có thể làm animation
Các phần tử bên trong SVG có thể được tạo ra để tạo ra một số trải nghiệm tương tác thật tuyệt vời hoặc có thể sử dụng hình ảnh động để thêm các chạm nhẹ đẹp vào giao diện, hình ảnh hoặc biểu tượng. Hoạt ảnh có thể được tạo ra bằng cách sử dụng CSS, Web Animations API trong Javascript hoặc sử dụng thẻ '<animate> của SVG.
Animation SVG là một điểm thú vị trong phát triển. Google đã không chấp nhận thẻ animate của SMIL - SVG - trong Chrome 45 nhằm ủng hộ các hoạt ảnh CSS và API Hoạt ảnh trên web, nhưng từ đó đã ngừng việc phản đối.
4. Có style riêng
Sử dụng các tên lớp hoặc ID, bạn có thể định dạng các phần tử bên trong SVG chỉ sử dụng các thuộc tính hơi khác với các thuộc tính mà chúng ta thường sử dụng; thay vì 'color' chúng ta sử dụng 'fill', và thay vì "border" chúng ta sử dụng 'stroke'. Có một số giới hạn để tạo mẫu SVG đến từ cách bạn sử dụng SVG trong trang.
Nếu bạn sử dụng một SVG như một thẻ hình ảnh, bạn sẽ không thể sắp xếp các yếu tố bên trong trong Internet Explorer. Tuy nhiên, có một polyfill - svg4everybody - mà sẽ khắc phục vấn đề này.
5. Tính tương tác tốt
Sử dụng JavaScript, chúng ta có thể tương tác với các phần tử bên trong của SVG nhờ DOM điều hướng được. Điều này cho phép chúng ta tạo ra các phần tử tương tác sử dụng SVG giống như cách chúng ta sẽ làm với HTML và CSS.
Chúng tôi cũng có thể áp dụng hình động qua JavaScript bằng cách sử dụng Web Animations API mới cho phép lập trình cả tương tác đơn giản và phức tạp. Ngoài ra còn có một số thư viện JavaScript mà chúng ta có thể sử dụng, đã được tạo ra để tăng tốc độ các luồng công việc của SVG.
6. Kích thước tệp nhỏ
Do tính chất vector của SVG (là một hình ảnh rút ra từ một tập hợp các tọa độ), kích thước tệp của chúng khi được tối ưu hoá 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ó một GUI và nhiều tùy chọn để tinh chỉnh hiển thị cho bạn trực quan các thay đổi đang được thực hiện trong quá trình tối ưu hóa.
Vì SVG có thể đáp ứng, animate 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 chủ đạo lớn trên một bài đăng trên blog hoặc các phương tiện truyền thông trực tuyến khác.
1. Giải pháp độc lập và đáp ứng
Hình ảnh có thể được thu nhỏ theo cùng một cách mà chúng tôi đã quy mô tất cả các yếu tố khác trong thiết kế web phản hồi. Do tính chất vector của SVG, hình ảnh được 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 hiển thị nào, từ những màn hình mật độ đẹp 285 ppi hiển thị trên điện thoại thông minh mới, đến màn hình chuẩn ~ 85 ppi.
Sử dụng SVG, chúng tôi có thể ngừng tạo '@ 2x. png '(trừ khi bạn cần hỗ trợ IE8) và tạo một tập tin cho tất cả các biểu tượng của chúng tôi. Hình ảnh SVG cũng có thể được thu nhỏ theo cùng một cách mà chúng tôi đã quy mô tất cả các yếu tố khác trong thiết kế đáp ứng.
2. DOM điều hướng
SVG bên trong trình duyệt có DOM riêng. SVG được xem như một tài liệu riêng biệt bởi trình duyệt và sau đó được đặt bên trong DOM bình 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 chúng ta trên bất cứ kích thước nào, nhưng sau đó hiển thị nó trong trình duyệt khác, tất cả đều không cập nhật các thuộc tính bên trong SVG. DOM điều hướng riêng biệt này cũng có thể tương tác với các phần tử bên trong SVG bằng CSS và JavaScript.
3. Có thể làm animation
Các phần tử bên trong SVG có thể được tạo ra để tạo ra một số trải nghiệm tương tác thật tuyệt vời hoặc có thể sử dụng hình ảnh động để thêm các chạm nhẹ đẹp vào giao diện, hình ảnh hoặc biểu tượng. Hoạt ảnh có thể được tạo ra bằng cách sử dụng CSS, Web Animations API trong Javascript hoặc sử dụng thẻ '<animate> của SVG.
Animation SVG là một điểm thú vị trong phát triển. Google đã không chấp nhận thẻ animate của SMIL - SVG - trong Chrome 45 nhằm ủng hộ các hoạt ảnh CSS và API Hoạt ảnh trên web, nhưng từ đó đã ngừng việc phản đối.
4. Có style riêng
Sử dụng các tên lớp hoặc ID, bạn có thể định dạng các phần tử bên trong SVG chỉ sử dụng các thuộc tính hơi khác với các thuộc tính mà chúng ta thường sử dụng; thay vì 'color' chúng ta sử dụng 'fill', và thay vì "border" chúng ta sử dụng 'stroke'. Có một số giới hạn để tạo mẫu SVG đến từ cách bạn sử dụng SVG trong trang.
Nếu bạn sử dụng một SVG như một thẻ hình ảnh, bạn sẽ không thể sắp xếp các yếu tố bên trong trong Internet Explorer. Tuy nhiên, có một polyfill - svg4everybody - mà sẽ khắc phục vấn đề này.
5. Tính tương tác tốt
Sử dụng JavaScript, chúng ta có thể tương tác với các phần tử bên trong của SVG nhờ DOM điều hướng được. Điều này cho phép chúng ta tạo ra các phần tử tương tác sử dụng SVG giống như cách chúng ta sẽ làm với HTML và CSS.
Chúng tôi cũng có thể áp dụng hình động qua JavaScript bằng cách sử dụng Web Animations API mới cho phép lập trình cả tương tác đơn giản và phức tạp. Ngoài ra còn có một số thư viện JavaScript mà chúng ta có thể sử dụng, đã được tạo ra để tăng tốc độ các luồng công việc của SVG.
6. Kích thước tệp nhỏ
Do tính chất vector của SVG (là một hình ảnh rút ra từ một tập hợp các tọa độ), kích thước tệp của chúng khi được tối ưu hoá 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ó một GUI và nhiều tùy chọn để tinh chỉnh hiển thị cho bạn trực quan các thay đổi đang được thực hiện trong quá trình tối ưu hóa.
Vì SVG có thể đáp ứng, animate 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 chủ đạo lớn trên một bài đăng trên blog hoặc các phương tiện truyền thông trực tuyến khác.
