Những lợi ích của việc sử dụng Scalable Vector Graphics
Scalable Vector Graphics, hoặc SVG, đóng một vai trò quan trọng trong thiết kế website ngày nay. Nếu bạn hiện không sử dụng SVG trong công việc thiết kế web của mình, dưới đây là một số lý do tại sao bạn nên bắt đầu làm như vậy, cũng như những hạn chế mà bạn có thể sử dụng cho các trình duyệt cũ không hỗ trợ các tệp này.
Độ phân giải
Lợi ích lớn nhất của SVG là độ phân giải độc lập. Bởi vì các tệp SVG là đồ họa vector thay vì hình ảnh raster dựa trên pixel, chúng có thể được thay đổi kích thước mà không làm mất chất lượng hình ảnh. Điều này đặc biệt hữu ích khi bạn tạo các trang web đáp ứng cần phải xem tốt và hoạt động tốt trên nhiều loại thiết bị và kích thước màn hình .
Các tệp SVG có thể được phóng to hoặc thu nhỏ để đáp ứng nhu cầu về kích thước và bố cục thay đổi của trang web đáp ứng của bạn và bạn không cần phải lo lắng về những đồ họa có chất lượng bị xâm phạm trong bất kỳ bước nào.
Kích thước tập tin
Một trong những thách thức khi sử dụng hình ảnh raster (JPG, PNG, GIF) trên trang web đáp ứng là kích thước tệp của những hình ảnh đó. Bởi vì hình ảnh raster không quy mô theo cách mà các vector làm, bạn cần phân phối hình ảnh dựa trên pixel của bạn ở kích thước lớn nhất mà tại đó chúng sẽ được hiển thị. Điều này là bởi vì bạn luôn có thể làm cho một hình ảnh nhỏ hơn và giữ lại chất lượng của nó, nhưng điều này cũng không đúng cho việc tạo hình ảnh lớn hơn. Kết quả cuối cùng là bạn thường có những hình ảnh lớn hơn rất nhiều so với chúng được hiển thị trên màn hình của một người, điều đó có nghĩa là chúng không cần thiết phải tải xuống một tệp rất lớn.
SVG giải quyết vấn đề này. Bởi vì đồ họa vector có thể mở rộng, bạn có thể có kích thước tệp rất nhỏ bất kể các ảnh đó có thể cần được hiển thị như thế nào. Điều này cuối cùng sẽ có tác động tích cực đến hiệu suất tổng thể của trang web và tốc độ tải xuống.
Tạo kiểu CSS
Mã SVG cũng có thể được thêm trực tiếp vào HTML của trang. Điều này được gọi là “SVG nội tuyến”. Một trong những lợi ích của việc sử dụng SVG nội tuyến là do đồ họa thực sự được trình duyệt vẽ dựa trên mã của bạn, không cần phải thực hiện yêu cầu HTTP để tìm nạp tệp hình ảnh. Một lợi ích khác là SVG nội tuyến có thể được tạo kiểu với CSS.
Cần thay đổi màu của biểu tượng SVG? Thay vì cần phải mở hình ảnh đó trong một số loại phần mềm chỉnh sửa và xuất và tải lên lại tệp, bạn có thể chỉ cần thay đổi tệp SVG bằng một vài dòng CSS.
Bạn cũng có thể sử dụng các kiểu CSS khác trên đồ họa SVG để thay đổi chúng trên các trạng thái di chuột hoặc cho các nhu cầu thiết kế nhất định. Bạn thậm chí có thể làm động các đồ họa đó để thêm một số chuyển động và tương tác vào một trang.
Ảnh động
Bởi vì các tệp SVG nội tuyến có thể được tạo kiểu với CSS, bạn cũng có thể sử dụng hoạt ảnh CSS trên chúng. Chuyển đổi CSS và chuyển tiếp là hai cách dễ dàng để thêm một số cuộc sống vào các tệp SVG. Bạn có thể có được trải nghiệm giống như Flash phong phú trên một trang mà không ảnh hưởng đến những nhược điểm đi kèm với việc sử dụng Flash trên các trang web hiện nay.
Sử dụng SVG
Mạnh mẽ như SVG, những đồ họa này không thể thay thế mọi định dạng hình ảnh khác mà bạn đang sử dụng trên trang web của bạn. Ảnh yêu cầu độ sâu màu sâu sẽ vẫn cần phải là tệp JPG hoặc có thể là tệp PNG nhưng các hình ảnh đơn giản như biểu tượng hoàn toàn phù hợp để được thực thi dưới dạng SVG.
SVG cũng có thể thích hợp cho các hình minh họa phức tạp hơn, như biểu trưng hoặc biểu đồ và biểu đồ của công ty. Tất cả các đồ họa sẽ được hưởng lợi từ khả năng mở rộng, có thể được tạo kiểu với CSS và các ưu điểm khác được liệt kê trong bài viết này.
Hỗ trợ cho các trình duyệt cũ hơn
Hỗ trợ hiện tại cho SVG rất tốt trong các trình duyệt web hiện đại. Các trình duyệt duy nhất thực sự thiếu hỗ trợ cho các đồ họa này là các phiên bản cũ hơn của Internet Explorer (Phiên bản 8 trở xuống) và một vài phiên bản cũ hơn của Android. Tất cả trong tất cả, một tỷ lệ rất nhỏ dân số duyệt web vẫn sử dụng các trình duyệt này và con số đó tiếp tục giảm. Điều này có nghĩa rằng SVG có thể được sử dụng khá an toàn trên các trang web hiện nay.
Nếu bạn muốn cung cấp dự phòng cho SVG, bạn có thể sử dụng công cụ như Grumpicon từ Tập đoàn Filament. Tài nguyên này sẽ lấy các tệp hình ảnh SVG của bạn và tạo ra các ảnh dự phòng PNG cho các trình duyệt cũ hơn.
Biên tập bởi Jeremy Girard vào ngày 1/27/17