Xin chào mọi người, hôm nay mình muốn chia sẻ về một công nghệ hình ảnh vô cùng mạnh mẽ và đang được sử dụng rất rộng rãi hiện nay bởi các nhà phát triển web và trong các phần mềm trực quan hóa như Power BI, đó là SVG – Scalable Vector Graphics. Trong bài viết này, chúng ta sẽ cùng tìm hiểu về SVG, lý do tại sao nó lại trở thành sự lựa chọn hàng đầu của các nhà phát triển đồ họa và cách sử dụng SVG hiệu quả.

Bài viết sẽ bao gồm các nội dung sau:

  1. Giới thiệu về Scalable Vector Graphics
  2. Ứng dụng và ví dụ thực tiễn của Scalable Vector Graphics
  3. Ưu điểm và nhược điểm của Scalable Vector Graphics

Tất Tần Tật Về SVG: Công Nghệ Đồ Họa Vượt Trội

Khi thiết kế đồ họa, SVG (Scalable Vector Graphics) nổi lên như một giải pháp mạnh mẽ và phổ biến nhờ vào những lợi ích vượt trội mà nó mang lại. SVG là một dạng đồ họa 2D của ngôn ngữ XML, giống như XHTML, cho phép tạo ra các đồ họa vector có thể phóng to hay thu nhỏ mà không bị mất đi chất lượng. SVG sẽ luôn tạo ra các hình ảnh rõ ràng và sắc nét, điều này giúp SVG trở thành lựa chọn lý tưởng cho việc tạo ra các hình ảnh cần độ phân giải cao hoặc có tính tương thích đa thiết bị.

Ứng Dụng Và Ví Dụ Thực Tiễn Của SVG

  • Biểu Tượng và Logo

Các công ty lớn như Google, Apple, và Facebook sử dụng SVG cho các biểu tượng và logo của mình. Nhờ vào tính mở rộng và độ rõ nét, SVG giúp các biểu tượng luôn sắc nét ở bất kỳ kích thước nào.

  • Biểu Đồ và Đồ Họa Thông Tin

SVG rất phổ biến trong việc tạo ra các biểu đồ và đồ họa thông tin vì nó hỗ trợ tốt việc tương tác và thay đổi dữ liệu trực tiếp. Điều này đặc biệt hữu ích trong phân tích dữ liệu hoặc trình bày báo cáo trực quan.

  • Trang Web Tương Tác

Với khả năng tích hợp CSS và JavaScript, SVG được sử dụng để tạo ra các hiệu ứng động như hoạt hình hoặc các phần tử có thể tương tác. Điều này giúp cải thiện trải nghiệm người dùng và làm cho các trang web trở nên thu hút hơn.

  • Ứng dụng trong Power BI

Để sử dụng SVG trong Power BI chúng ta cần kết hợp với hàm DAX hoặc sử dụng các công cụ hiện thị dữ liệu ở ngoài thư viện biểu đồ mặc định của Power BI như nội dung tiếp thị thị giác của HTML. Các code và các mẫu templates SVG đã được tạo sẵn cho chúng ta và có thể lấy được trên Internet, tiêu biểu là website Kerry Kolosko hoàn toàn miễn phí. Dưới đây là một hàm DAX dùng để hiển thị xu hướng [Doanh Thu] dưới dạng sparkline, tạo bởi SVG với một vùng gradient tô bên dưới đường và điểm cuối được làm nổi bật để nhấn mạnh giá trị gần nhất.

A screenshot of a computer code Description automatically generated

A screen shot of a computer code Description automatically generated

  • LineColour: Xác định màu đường line của sparkline.
  • PointColour: Là màu của điểm ở cuối sparkline.
  • Defs: Định nghĩa vùng gradient tuyến tính ở dưới đường sparkline.
  • XMinDate và XMaxDate: xác định ngày bắt đầu và ngày kết thúc của trường dim_date[start_of_month].
  • YMinValue và YMaxValue: xác định giá trị nhỏ nhất và giá trị lớn nhất của hàm [Doanh Thu] trong toàn bộ khoảng thời gian.
  • SparklineTable: Tính toàn tọa độ trên các điểm của đồ thị sparkline.

+ SUMMARIZE: Tạo ra một bảng chỉ có các ngày bắt đầu của tháng từ bảng dim_date.

+ ADDCOLUMNS: thêm các cột X và Y vào bảng đã tạo ở trên.

+ Cột X: Tính tỉ lệ phần trăm của ngày hiện tại trong khoảng từ XMinDate tới XMaxDate, phù hợp với tọa độ trên trục X của SVG, đại diện cho thời gian.

+ Cột Y: Tính tỉ lệ phần trăm của doanh thu hiện tại trong khoảng từ YMinValue tới YMaxValue, phù hợp với tọa độ trên trục Y của SVG, đại diện cho giá trị doanh thu.

  • Lines: Kết hợp các tọa độ X và Y thành một chuỗi tọa độ để vẽ đường sparkline.
  • LastSparkYValue và LastSparkXValue: xác định tọa độ điểm cuối cùng trên đường sparkline để hiển thị điểm nổi bật.
  • SVGImageURL: Tạo chuỗi SVG
  • Toàn bộ chuỗi SVG được kết hợp và mã hóa thành định dạng

“data : image / svg+xml;utf8,”. Định dạng này tương thích với Power BI khi trường được đặt ở dạng “Image URL”.

A screenshot of a graph Description automatically generated

Ưu Điểm Và Nhược Điểm Của SVG

Ưu Điểm

  • Tính mở rộng: SVG có thể phóng to hay thu nhỏ mà không làm giảm chất lượng hình ảnh. Điều này rất quan trọng trong thiết kế web hiện đại, nơi mà hình ảnh cần phải hiển thị rõ ràng trên nhiều loại thiết bị và độ phân giải màn hình khác nhau, từ điện thoại di động đến màn hình 4K.
  • Kích Thước Tệp Nhỏ: SVG thường có kích thước tệp nhỏ hơn so với các định dạng bitmap, đặc biệt khi sử dụng các hình ảnh đơn giản hoặc đồ họa vector. Điều này giúp tải trang nhanh hơn, mang lại trải nghiệm người dùng mượt mà hơn.
  • Tính Tương Thích Cao: SVG được hỗ trợ rộng rãi bởi tất cả các trình duyệt hiện đại, bao gồm Chrome, Firefox, Safari, và Edge. Điều này đảm bảo rằng bạn có thể sử dụng SVG mà không cần lo lắng về khả năng tương thích.
  • Dễ Dàng Sửa Đổi và Tích Hợp: Vì SVG là mã XML, bạn có thể dễ dàng chỉnh sửa nó bằng các trình soạn thảo văn bản đơn giản hoặc công cụ đồ họa vector. Bạn cũng có thể thêm hiệu ứng CSS, JavaScript, hoặc sử dụng SVG làm phần tử động trên trang web của mình.

Nhược Điểm

  • Khó xử lí hình ảnh phức tạp: SVG không phù hợp để hiển thị các hình ảnh phức tạp hoặc chứa nhiều chi tiết như ảnh chụp thực tế, vì file sẽ trở nên rất nặng và khó xử lý.
  • Hạn chế trong thiết kế đồ họa 3D: SVG là một dạng đồ họa 2D, vì vậy không thể thiết kế hoặc sử dụng cho các mô hình 3D.
  • Hiệu suất thấp với dữ liệu lớn: Với các hình ảnh chứa nhiều đối tượng vector hoặc chi tiết nhỏ, hiệu suất hiển thị của SVG có thể giảm, đặc biệt trên các thiết bị cấu hình thấp.
  • Vấn đề bảo mật: File SVG có thể chứa mã JavaScript, điều này làm tăng nguy cơ bảo mật nếu file được chèn hoặc tải từ nguồn không đáng tin cậy.

Kết Luận

SVG là một công cụ mạnh mẽ và linh hoạt cho các nhà thiết kế và nhà phát triển web cũng như các phần mềm trực quan hóa như Power BI, cung cấp nhiều lợi ích về tính mở rộng, kích thước tệp, và khả năng tùy chỉnh. SVG có thể giúp nâng cao trải nghiệm người dùng và tối ưu hóa hiệu suất trang web hay trang báo cáo của bạn. Vì vậy, nếu bạn chưa sử dụng SVG trong dự án của mình, hãy thử áp dụng ngay để thấy sự khác biệt!